/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 22px;
    line-height: 44px;
    color: #FF8953;
    background-color: rgb(253, 246, 232);
}
header {
    width: 100%;
    height: 150px;
    background-color: #302621;
    padding: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #FF8953;
    /* position: fixed; */
}
nav {
    position: absolute;
    right: 24px;
    top: 110px;
}
nav ul li {
    display: inline-block ;
    margin-right: 20px;
 
    word-spacing: 80px;

}
nav ul li a {
    font-family: 'Krona One';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #f17841;
    text-decoration: none;
}

nav ul li a:hover{
    background-color: rgb(245, 96, 37);
    color: rgb(243, 217, 201);
    rotate: 2deg;
}

#logo {
    position: relative;
    top: 33px;          
    right: 27px;
}

#title-box {
    position: relative;
    top: -50px;
    left: 10px;
}

#banner {
    background-image: url(../img/banner.jpg);
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center top;
    text-align: center;
}

button {
    font-family: 'Slackey';
    font-style: normal;
    font-weight: 400;
    font-size: 12px; color: #FAE4DA;
    line-height: 150%;
    margin-top: 22vh;
    background-color: #D15D27;
    padding: 10px 25px;
    border-radius: 10px; 
    border: 3px solid #FAE4DA;
    font-weight: bold;
}

button:hover {
    background-color: rgb(248, 82, 16);
    color: rgb(252, 237, 228);
    rotate: 2deg;
}

#about {
    width: 100%;
    height: 40vh;
}

#contact {
    text-align: center;
    padding-top: 30px;
}
#contact h3 {
    margin-bottom: 50px;
}

main, footer {
    padding: 20px;
}

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

main {
    background-color: #42332D;
    padding-top: 130px;
}

footer {
    background-color:  #302621;
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(277px, 1fr));
    gap: 22px;
    text-align: center;
    padding-top: 30px;
}
 

h1 {
/* Shyra’s Design Lab */

font-family: 'Slackey';
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 150%;
/* identical to box height, or 45px */

letter-spacing: -0.011em;

color:  rgb(246, 227, 216);
}

h2 {
/* Web Design Development */

font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;

/* or 24px */

letter-spacing: -0.011em;

color: #FF8953;
}


h3 {
/* About Me */

font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 150%;
text-align: center;
/* or 27px */

letter-spacing: -0.011em;
background-color: #dc6e3a;
color:  rgb(246, 227, 216);

}

h4 {
    font-family: 'Krona One';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    padding: 20px;
    /* or 27px */
    
    letter-spacing: -0.011em;

    color: #DDC0B2;
}

h5 {
    font-family: 'Krona One';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    padding: 30px;
    position: relative; margin: 0 auto;
    /* or 27px */
    
    letter-spacing: -0.011em;

    color: #DDC0B2;
}

p {
    font-family: 'Krona One';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    padding: 80px;
    position: relative; margin: 0 auto;
    /* or 27px */
    
    letter-spacing: -0.011em;

    color: #DDC0B2;
}

figcaption {
    font-family: 'Krona One';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    padding: 20px;
    /* or 27px */
    
    letter-spacing: -0.011em;

    color: #DDC0B2;
}

@media screen and (max-width: 750px) {
    nav {
        left : 30px;
  
    }
}