/* Image Formatting*/
img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 25px;
    display: block; }

/* Text Formatting*/
body {
    max-width: 45rem;
    margin: 0 auto;
    padding: 1.5rem;
    line-height: 1.5;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: lavender;
    text-align: left;
}

h1 {
  font-size: 3em;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2em;
  margin-bottom: 0.2rem;
}

p {
  font-size: 1.3em;
  margin-top: 0;
}

/* Instagram Logo Formatting*/
.icon-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem;
  border-radius: 6px;
}


.icon-link:hover {
  background-color: hsl(240, 35%, 85%);
}

.icon-link:focus-visible {
  outline: 3px solid hsl(240, 45%, 25%);
  outline-offset: 3px;
}

.icon-link img {
  width: 5rem;
  display: block;
  border-radius: 0;
}

/* Netlify Contact form Controls*/
.hidden {
  display: none;
}

label {
  display: block;
  margin-bottom: 0.3rem;
}

input,
textarea {
  width: 100%;
  padding: 0.5rem;
  font: inherit;
  border: 1px solid hsl(240, 45%, 35%);
  border-radius: 6px;
}

button.btn {
  font: inherit;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 14rem;
  background:hsl(240, 45%, 35%);
  color:lavender;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}

.btn:hover {
  background: purple;
}
.btn:focus-visible {
  outline: 3px solid hsl(240, 45%, 25%);
  outline-offset: 3px;
}