@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');
*{
        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: 
    "latest site site site site point"
    "nav nav nav nav nav nav"
    "main main main main main main"
    "vid vid vid vid vid vid"
    "foot foot foot foot social social"
}
main{
    display: grid; 
    background-color: #faf9f1;
    grid-template-columns: 1fr ; 
    grid-template-rows:auto ;
    grid-template-areas: 
    "cover"
    "about"
    "news"
    "his"
}
header{
    background-color: #0C0D1D;
    position:relative; 
    z-index: 100; 
}
header a{
    font-family:'DM Serif Display', serif;
    color:#faf9f1; 
}
#site-title{
    grid-area:site; 
    font-weight: 400; 
    font-style: italic; 
    font-size:55px;
    text-align: center; 
}
#site-title a, #sitename{
    text-shadow: #0C0D1D 2px 2px 0px, #9C9C9C 4px 1.5px 0px;
}
#f1-updates {
    grid-area:latest;
    font-size: 15px; 
    text-align: left; 
    display: flex; 
}
#championship{
    grid-area:point; 
    font-size: 15px;
    text-align: right; 
    display: flex;
}
#f1-updates a{
    position: absolute;  
    bottom: 0;
    left: 10px;
}
#championship a{
    position: absolute; 
    bottom: 0; 
    right: 10px; 
}
nav{
    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 a{
    color: rgb(197, 195, 195);
}
nav li > a{
    padding: 0.6vw 3.6vw; 
}
nav li:hover{
    box-shadow: inset 0 -3px 0 #faf9f1;
    transition:  0.2s;
}
nav li:hover a{
    color: #faf9f1; 
}
main {
    grid-area: main; 
    overflow-x: hidden;
}
#cover {
    grid-area: cover; 
}
#cover-image{
    width: 100%;
    height: 35vw; 
}
figcaption{
    font-style: italic; 
    font-weight: 300; 
    font-size: 12px; 
    text-align: center; 
}
#site-info, #welcome{
    margin-left: 1.7vw; 
    margin-right: 1.7vw; 
    color: #12142D;
}
#welcome{
    letter-spacing: 1px;
    margin-bottom: 0.9vw; 
}
#site-info{ 
    border-bottom: 0.5px solid #12142D;
    margin-bottom: 1.7vw; 
    padding-bottom: 0.9vw; 
    line-height: 25px; 
    font-size: 18px; 
    font-weight: 300; 
}
#about, #history{
    grid-area: about;
    border-bottom: 0.5px solid #12142D;
    display: grid; 
    padding-bottom: 1.7vw; 
    margin: 0 1.7vw 1.7vw 1.7vw; 
    grid-template-columns:1fr 1.2fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "text pic";
}
.content-pic{
    grid-area: pic;
    margin-top: auto; 
    margin-bottom: auto; 
}
.image {
    width: 100%; 
    height: auto;
    transition: 0.5s; 
}
#about .content-text, #history .content-text{
    margin-top: auto; 
    margin-bottom: auto; 
    margin-right: 1.7vw; 
    grid-area: text;
    line-height: 25px;   
}
#about #header, #news #header, #history #header {
    text-align: center; 
    letter-spacing: 3px; 
    font-weight: 200;
    font-size: 11px; 
    padding-bottom: 0.4vw; 
} 
.content-text h1 {
    padding-left: 1.0vw; 
    padding-bottom: 0.9vw; 
    font-size: 25px; 
    letter-spacing: 2px; 
}
.context-text #explanation {
    font-size: 15px; 
    font-weight: 250; 
}
.content-text a {
    border-radius: 4px; 
    background-color: #12142D;
    margin: 2vw 1.7vw ; 
    padding: 0.4vw 0.9vw; 
    border: 2px solid #12142D; 
    transition: 0.3s;
}
.content-text button{
    color: #faf9f1; 
    background-color: transparent;
    border: transparent; 
    letter-spacing: 2px; 
    font-weight: 400;
    font-size: 16px;  
    margin-top: 2vw; 
}
.content-text a:hover{
    background-color: rgb(54, 119, 116);
    border-color: rgb(54, 119, 116);
}
.content-pic .image:hover{
    box-shadow: 0px 0px 20px #737373;
}
#news {
    grid-area: news; 
    display: grid; 
    border-bottom: 0.5px solid #12142D;
    margin: 0 1.7vw 1.7vw 1.7vw; 
    padding-bottom: 1.7vw;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "pic text";
}
#news .content-text{
    margin-top: auto; 
    margin-bottom: auto; 
    text-align: right;
    grid-area: text;
    line-height: 25px;   
}
#news #explanation {
    padding-left: 1.0vw; 
}
#news h1{
    padding-right:1.0vw;  
}
#history{ 
    grid-area:his; 
    display: grid; 
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto;
    grid-template-areas: "text pic";
}
aside {
    grid-area: vid ; 
    display: grid; 
    margin: 1.7vw; 
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 1.7vw; 
    column-gap: 1.7vw;
    row-gap: 1.7vw;
    grid-template-rows: auto;
    grid-template-areas: 
    "head head head"
    "gp1 gp2 gp3"
    "head1 head1 head1"
    "vid1 vid2 vid3"
    "ref ref ref";
}
iframe{
    width: 100%; 
    height: 100%; 
    transition: 0.3s; 
}
#abu-dhabi-gp{
    grid-area: head;
    letter-spacing: 2px; 
    margin: 1.7vw 0 0 0 ;
}
#beyond-f1{
    grid-area: head1; 
    letter-spacing: 2px; 
    margin: 1.7vw 0 0 0;
}
#gp1, #gp2, #gp3, #vid1, #vid2, #vid3{
    height: 20vw; 
    margin-bottom: 1.7vw; 
}

aside p {
    text-align: center; 
    letter-spacing: 1.5px; 
    font-weight: 500; 
    font-size: 12px; 
    margin-top: 0.9vw; 
    color: #737373;
    margin-bottom: 1.5vw; 
}
#gp1{
    grid-area: gp1;}
#gp2{
    grid-area: gp2;}
#gp3{
    grid-area: gp3;}
#vid1{
    grid-area: vid1;}
#vid2{
    grid-area: vid2;}
#vid3{
    grid-area: vid3;}
#references {
    grid-area: ref
}
footer{
    display: flex; 
    position: relative; 
    bottom: 0; 
    justify-content: space-between;
    width: 100%;
    background-color: #0C0D1D;
}
footer#copyright {
    position: relative; 
    left: 10; 
    padding: 10px; 
    margin: auto 0; 
    grid-area: foot; 
}

footer li{
    margin-right: 2vw; 
    margin-left: 2vw; 
}
footer a:hover, #home a:hover{
    color: rgb(153, 188, 201); 
}
#logo, #copyright > li{
    display: flex; 
}
#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;  
}
#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; 
}
h6, h6 a{
    font-weight: 300; 
    color: #0C0D1D; 
    font-size: 11px; 
}
h6, b {
    margin-bottom: 0.3vw;
}
h6 a:hover {
    text-decoration: underline; 
}
@media only screen and (max-width: 700px){
    body{
        grid-template-columns: auto; 
        grid-template-rows: auto; 
        grid-template-areas: 
        "nav"
        "main"
        "about"
        "news"
        "his"
        "vid"
        "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;
        }
        .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;
        }
        #site-info{
            font-size: 16px;
            font-weight: 300; 
            text-align: center; 
        }
        .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; 
        }
        aside{
            grid-template-columns: 1fr;
            grid-gap: 5vw; 
            grid-template-rows: auto;
            grid-template-areas: 
            "head"
            "gp1"
            "gp2"
            "gp3"
            "head1"
            "vid1"
            "vid2"
            "vid3"
            "ref";
        }
        #gp1, #gp2, #gp3, #vid1, #vid2, #vid3{
            margin: 1.7vw; 
            height: 50vw; 
        }
        #qatar-gp, #beyond-f1{
            font-size: 20px; 
        }
        iframe{
            padding-bottom: 1.7vw; 
            margin-top: 0.9vw; 
        }
        #vid3{
            margin-bottom: 5vh ;
        }
        #copyright li{
            color: #0C0D1D; 
        }
    }
@media only screen and (max-width: 1000px ){
    body{
    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"
    "about about about about about about"
    "news news news news news news"
    "his his his his his his"
    "vid vid vid vid vid vid"
    "foot foot foot foot foot social"
    }
    #f1-updates , #championship {
        display: none; 
    }
    #site-title{
        width: 100%; 
    }
    #about, #news, #history{
        grid-template-columns: 1fr; 
        grid-template-rows: auto; 
        grid-template-areas: 
        "pic"
        "text";
}
    #explanation{
        font-weight: 150;
        font-size: 14px;
    }
    #news #explanation, h1{
        padding-left: 0; 
    }
    .content-text, #news>.content-text{
        text-align: center; 
    }
    #gp1, #gp2, #gp3, #vid1, #vid2, #vid3{
        margin-bottom: 5vh; 
    }
}