body{
  margin: 0px;
  background-color: rgb(231, 201, 29);
  color:black;
  font-family: 'Chakra Petch';
}

nav{

  .house{
    height:20px;
    margin:3px 2px 0px 2px;
  }

  ul{
  list-style-type: none;
  background-color: rgb(70, 34, 0);
  text-align: center;
  overflow: hidden;
  margin:0px;
  padding:12px;
  }

  ul li{
    float:left;
  }

  ul li a{
    padding:10px 12px 10px 12px;
    color:white;
    text-decoration: none;
    font-family: 'Bungee';
    font-size:20px;
  }

  ul li a:hover{
    background-color: rgb(123, 61, 3);
  }

  @media screen and (max-width:577px){
    .homemargin{
      margin-bottom:20px;
    }
  }
}



header{
  background-color: rgb(182, 135, 18);
  text-align: center;

  div{
    max-width: 600px;
    margin: auto;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
  }

  div h1{
    font-size:60px;
    transition: color 1s;
    color:black;
    margin:auto;
    width: 250px;
    text-shadow: 2px 2px rgb(97, 97, 97);
  }
}

main{
  display:flex;

  section{
    width:80%;
    margin:auto;
    font-size:18px;
  }

  .home-section{
    width:600px;
    margin:40px 40px 40px 13vw;
  }

  .home-large img{
    width:300px;
    margin-right:150px;
  }

  .home-small img{
    visibility: hidden;
    width:1px;
  }
}

/* Contact page layout: center rows and make images responsive */
.contact-main{
  display:flex;
  flex-direction:column;
  align-items:center; /* center the figure blocks */
  padding: 20px; /* small padding so content doesn't touch edges */
  box-sizing: border-box;
  gap: 36px; /* uniform vertical spacing between figure rows */
}

.contact-row{
  display:flex;
  gap: 36px; /* space between two icons */
  justify-content:center;
  align-items:center;
  width:auto;
  max-width:960px; /* allow rows to be wider on desktop so icons can be larger */
  margin:0 auto; /* center the row horizontally; vertical spacing handled by .contact-main gap */
}

.contact-row img{
  /* scale between 160px and 300px depending on viewport, staying fluid */
  width: clamp(160px, 12vw, 300px);
  height: auto;
  display: block;
}

/* make icons even larger on wide desktop screens */
@media screen and (min-width:1200px){
  .contact-row{
    gap:48px;
  }

  .contact-row img{
    width: 260px;
  }
}

@media screen and (max-width:420px){
  .contact-row{
    gap:12px;
    max-width:100%;
    padding:0 12px; /* reduce side padding on very small screens */
  }

  .contact-row img{
    width:40vw; /* images scale with viewport width on very small screens */
    max-width:140px;
  }
}

@media screen and (max-width:360px){
  /* when stacked, make internal gap match the vertical gap between rows so spacing is uniform */
  .contact-main{
    gap:36px;
  }

  .contact-row{
    flex-direction:column;
    gap:36px;
  }

  .contact-row img{
    width:60vw;
    max-width:200px;
  }
}