/* basic reset */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.bruno-ace-sc-regular {
    font-family: "Bruno Ace SC", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  

html {
    scroll-behavior: smooth;
}


body{
    font-family: 'Times New Roman', Times, serif;
    font-size: 22px;
    line-height: 44px; 
    color: #fae7c9;
    background-color: #2d2d2d;
}

img {
    width: 40%;
    padding: 0px;
}

header {
    width: 100%;
    height: 255px;
    background-color: rgb(95, 130, 204);
    padding: 20px;
   position: fixed;
}

nav ul li {
display: inline-block;
margin-right: 30px;
}

main, footer {
    padding: 20px;
}

main article p {
    /* max-width: 60ch; */ 
    max-width: 1800px;
}

main article img {
width: 100%;
height: auto;
}

main {
    background-color: rgb(39, 55, 80);
    padding: 255px;
}

footer{
    background-color: rgb(167, 203, 250);
}

main, footer {
padding: 20px;
}

main article {
    display: grid;
    gap: 1rem;
    grid-template-columns: (auto-fill, minmax(300px, 1fr));
}

main article img {
    width: 40% ;
}


#gallery {
background-color: rgba(117, 141, 141, 0.479);
display: grid;
gap: 1.44;
}


@media screen and (min-width: 450px) {
    #gallery {
    grid-template-columns: 1fr;}
}

@media screen and (min-width: 600px) {
    #gallery {
    grid-template-columns: 1fr, 1fr;
    }
}

@media screen and (min-width: 900px) {
    #gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
h3 {
    text-align: center;
}
p {
    text-align: center;
}
h1 {
    text-align: center;
    font-family: "Bruno Ace SC";
}

button {
     box-shadow: 0 0 5px #a68763, 0 0 25px #a68763;
     background-color: #d7c9ae;
     border-style: ridge;
      border-width: 2px;
      font-size: 1rem;
      line-height: 23px;
      padding: .75rem;
      transition: all 0.2s ease;
      border-bottom-left-radius: 15px 255px;
      border-bottom-right-radius: 225px 15px;
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      text-align: center;
    }

button:hover {
    box-shadow: 0 0 5px #a68763, 0 0 25px #a68763, 0 0 50 #a68763, 0 0 100px #a68763, 0 0 200px #a68763;
}

button a:hover {
    color: #231906;
}

button a{
    color: #a68763;
}