@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
        box-sizing: border-box; 
        margin: 0; 
        padding: 0;
        font-family: 'DM sans', sans-serif; 
        text-decoration: none;
}
body{
    display: grid; 
    background-color: #faf9f1;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows:auto ;
    grid-template-areas: 
    "site site site site site site"
    "nav nav nav nav nav nav" 
    "main main main main main main" 
    "foot foot foot foot foot social"
    ;
}
main {
    display: grid; 
    grid-area: main; 
    z-index: 0; 
    background-color: #faf9f1;
    grid-template-columns: 1fr ; 
    grid-template-rows:auto ;
    grid-template-areas: 
    "cover"
    "one"
    "two"
    "three"
    "four"
}

#site-title, #site-title a{
    grid-area: site;
    background-color: #0C0D1D;
    font-weight: 400; 
    font-style: italic; 
    font-size:55px;
    font-family: 'DM Serif Display', serif;
    color: #faf9f1;
    text-align: center;
}
#site-title a, #sitename{
    text-shadow: #0C0D1D 2px 2px 0px, #9C9C9C 4px 1.5px 0px;
}
#sitename{
    display: none;
}
nav{
    z-index: 1; 
    position: -webkit-sticky; 
    position: sticky; 
    display: flex;
    top:0; 
    background-color: rgb(34,40,45);
    grid-area: nav;
    align-items:center; 
    justify-content: center; 
    box-shadow: 0 3px 7px 0 rgba(0,0,0,.2); 
}
nav li, nav a{
    display: inline-block; 
    font-size: 15px; 
    color: rgb(104, 104, 104); 
}
nav li > a{
    padding: 0.6vw 3.6vw; 
}
#page {
    box-shadow: inset 0 -3px 0 #faf9f1;
}
#page a{
    color:#faf9f1; 
}

nav li:hover a{
    color: #faf9f1; }
main {
    grid-area: main;
}
#cover {
    grid-area: cover; 
}
.section-one{
    grid-area: one;
}
.section-two{
    grid-area: two;
}
.section-three{
    grid-area: three;
}
.section-four{
    grid-area: four; 
}
footer{
    display: flex; 
    position: relative; 
    bottom: 0; 
    justify-content: space-between;
    width: 100%;
    background-color: #0C0D1D;
}
#copyright {
    position: relative; 
    left: 10; 
    padding: 10px; 
    margin: auto 0; 
    grid-area: foot; 
}
img {
    width: 100%;
    height: auto;
}
footer li{
    margin-right: 2vw; 
    margin-left: 2vw; 
}
footer a:hover, #home a:hover{
    color: rgb(54, 119, 116); 
}
#logo img{
    width: 6.5vh;
    height : auto; 
    margin-top: auto; 
    margin-bottom: auto;
}
#home{
    justify-content: center;
    display: flex; 
    background-color: rgb(34,40,45);
    width: 15%; 
}
#home a {
    text-align: center; 
    margin: 10px auto;
    letter-spacing: 5px; 
}
#copyright li{
    font-size: 12px; 
    color: rgb(134, 134, 134); 
    margin-top: auto;
    margin-bottom: auto;  
    list-style: none;
}
#social{
    grid-area: social;
    display: flex; 
    justify-content: space-between;
}
#social a, #home a{
    color: #faf9f1; 
    opacity: 70%;
    font-size: 23px ;
    margin: auto 10px; 
}
#social a:hover {
    color: rgb(54, 119, 116); 
}
.toggle-button{
    position: absolute; 
    top:1rem; 
    right:1rem; 
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    width: 30px; 
    height: 21px; 
}
.toggle-button .bar {
    height: 2px;
    width: 100%; 
    background-color:#faf9f1;
    border-radius: 10px;
}
#sitename {
    display: none; 
    color: #faf9f1; 
    font-size: 35px;
    font-family: 'DM Serif display', serif;
    font-weight: 500; 
    font-style: italic; 
    padding-left: 1rem; 
}
figcaption{
    text-align: center; 
    font-style: italic;
    font-size: 12px; 
    margin-bottom: 1vw; 
    color: #0C0D1D; 
}
.container{
    position: relative; 
    overflow: hidden;
    }
.container img {
    transition: transform 3s, filter 1.5s ease-in-out;
    transform-origin: center center;
    filter: brightness(75%);
    }

    /* The Transformation */
 .container:hover img {
    filter: brightness(100%);
    transform: scale(1.2);
    }

@media only screen and (max-width: 800px){
    body{
        grid-template-columns: 1fr; 
        grid-template-rows: auto; 
        grid-template-areas: 
        "nav"
        "main"
        "foot"
        "social";
    }
        header {
            display: none;
        }
        nav {
            justify-content: space-between;
            background-color: #0C0D1D;
        }
        nav ul  li:hover{
            background-color: rgba(136, 156, 184, .3);
            box-shadow: none; 
        }
        nav ul li:hover a{
            color: #faf9f1;
        }
        #page{
            box-shadow: none; 
        }
        .toggle-button{
            display: flex;
        }
        #sitename {
            display: flex; 
        }
        .navbar-links {
            display: none;
            width: 100%;
            flex-direction: column; 
            text-align: center; 
        }
        nav {
            flex-direction: column;
            align-items: flex-start;
        }
        .navbar-links li a{
            color: rgb(86, 104, 116);
            font-weight: 500; 
            letter-spacing: 1.5px; 
            padding: 1.4vw;
            width: 100%;  
        }
        .navbar-links.active {
            display: flex;
        }
        #copyright li {
            margin: auto 0; 
        }
    }