@font-face{
    font-family: 'FellGreat';
    src: url(./fonts/IMFellGreatPrimerSC-Regular.ttf);
}
@font-face{
    font-family: 'CrimsonText';
    src: url(./fonts/Crimson_Text/CrimsonText-Regular.ttf);
}
@font-face{
    font-family: 'SpecialElite';
    src: url(./fonts/SpecialElite-Regular.ttf);
}

body{
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: CrimsonText;
}
body a{
    text-decoration: none;
    color: inherit;
}

nav{
    display: grid;
    grid-template-columns: 40% auto;
    grid-template-areas: "logga nav";
    column-gap: 0.4vw;
    height: 5.5vw;
    width: 80vw;
    margin: auto;
}
nav #navContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
nav .navThing{
    grid-area: nav;
    font-family: "SpecialElite";
    font-size: 1.5vw;
    background-image: url("../images/cardboard.jpg");
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    margin-top: 2vw;
    height:62%;
    text-align: center;
    width: 15vw;
}
nav .currentPage{
    filter:brightness(130%);
}
nav .navThing:hover{        
    font-weight: 600;
    filter: brightness(120%);
}
nav .navThing:focus-within{
    filter: brightness(120%);
    font-weight: 600;
}
nav .navThing a{
    position: relative;
    top: 0.7vh;
    text-decoration: none;
    color:black;
}
nav #home{
    grid-area: logga;
    font-family: "FellGreat";
    text-decoration: none;
    color:black;
    font-size: 5vw;
}
nav #home a:hover{
    text-shadow: 0.2vw 0.2vw white;
}
nav #home a:focus{
    text-shadow: 0.2vw 0.2vw white;
}
nav #home a{
    text-decoration: none;
    color:black;
}


/*Articles:*/
main{
    width:80vw;
    margin:auto;
    margin-bottom: 0;
    display:grid;
    grid-template-columns: 45vw 35vw;
    min-height: 95vh;
}
.articleSection{
    display: flex;
}
.textFirst{
    flex-direction: row;
}
.imgFirst{
    flex-direction: row-reverse;
}
.articleSection img{
    max-width:30vw;
    max-height: 20vw;
    margin: 2vw;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.445);
}
.articleSection p{
    font-size: 1.5vw;
    margin-left:2vw;
    margin-right:2vw;
    top: 50%;
}
.articleSection a{
    font-weight: 600;
    font-style: italic;
}
.articleSection h1{
    font-size: 2vw;
    margin-left:2vw;
    border-bottom: 1px solid black;
    width: 80%;
}
.articleSection h2{
    font-size: 1.8vw;
    margin-left:2vw;
    border-bottom: 1px solid black;
    width: 80%;
}
.articleSection h3{
    font-size: 1.5vw;
    margin-left:2vw;
    border-bottom: 1px solid black;
    width: 80%;
}

.imgContainer{
    display: flex;
    flex-direction: column;
    width: min-content;
    margin: auto;
}
.imgContainer p{
    font-style: italic;
    font-size: 1.2vw;
    color: rgb(54, 53, 53);
    margin-top: -1vw;
}
.imgContainer a{
    text-decoration: none;
    color: rgb(33, 33, 58);
    font-weight: 600;
}
table{
    font-family: "SpecialElite";
    margin-left:3vw;
    margin-bottom:2vw;
}
td, th{
    border: 1px solid black;
    text-align: left;
    background-color: rgba(250, 235, 215, 0.87);
    padding:1vw;
}
tr:nth-child(even){
    background-color:rgb(129, 176, 230);
}


footer{
    width:80vw;
    margin:auto;
    background-color:antiquewhite;
    border-top:rgb(33, 33, 58) 0.25vw solid;
    height: 20vh;
}
footer h3{
    text-align: center;
    font-family: "SpecialElite";
}
footer p{
    text-align: center;
    margin: auto;
    font-size: 1.5vw;
    margin-top: -2vh;
    margin-bottom:1vh;
    width:50%;
    padding:0.5vw;
}
footer a{
    text-align: center;
    width: 40%;
    margin-left:35vw;
    margin-top: 0.8vw;
    color: rgb(9, 9, 175);
    padding:0.3vw;
    font-size: 1.3vw;
    border: dotted rgb(9, 9, 175) 0.3vw;
    margin-bottom: 2vw;
    
}
footer a:hover{
    border: dotted rgb(177, 18, 18) 0.3vw;
    color: rgb(177, 18, 18);
}
footer a:focus{
    border: dotted rgb(177, 18, 18) 0.3vw;
    color: rgb(177, 18, 18);
}


/*Things that are only used on startpage*/
#container{
    grid-template-rows: auto;
    grid-template-columns: auto;
    display:grid;
    width:80vw;
    margin: auto;
    margin-top:7vw;
}

#logga{
    grid-row: 1;
    grid-column: 1;
    text-decoration: overline underline;
    height:15vw;
}
#logga h1{
    font-family: FellGreat;
    font-size:10vw;
    margin-top: 2.5vw;
}
#right{
    border-left: solid black 3px;
    grid-row: 1 / span 2;
    grid-column:2;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto auto auto;
    row-gap: 30px;
    height: 100%;
    margin-left:5px;
}
#right a{
    text-decoration: none;
    color:rgb(0, 0, 0);
    margin-left: 1vw;
}
#introduction{
    grid-row: 2;
    grid-column:1;
    background-image: url("../images/folded-paper-med.jpg");
    margin: 5px;
}
#introduction p{
    margin-left:2vw;
    font-size: 1vw;
}
#introduction a{
    color:rgb(46, 66, 95);
    font-weight: 600;
}
.startNav{
    grid-area: nav;
    background-image: url("../images/cardboard.jpg");
    border:rgba(0, 0, 0, 0.6) double 0.75vw;
    width: 100%;
    text-decoration: none;
}
.startNav:hover{
    border:rgba(90, 0, 0, 0.8) double 0.75vw;
}   
#right a:focus .startNav{
    border:rgba(90, 0, 0, 0.8) double 0.75vw;
    font-weight: 900;
}
.startNav:hover p{
    font-weight: 900;
}
.startNav h2{
    font-size: 1.5vw;
    font-family: "SpecialElite";
    text-align: center;
    text-decoration: underline;
    font-weight: 600;
}
.startNav p{
    font-size:1vw;
}


/*For sweden_through_ time*/
#statControl{
    position: sticky;
    top: 0px;
    overflow: visible;
    border: solid rgba(27, 11, 11, 0.466) 0.5vw;
    border-radius: 1vw;
    background-image: url("../images/cardboard.jpg");
    width:95%;
    margin: auto;
    height:fit-content;
    margin-top: 1vw;
}
#yearSlider{
    width:80%;
}
#yearDescription{
    text-align: center;
    margin: auto;
    margin-top: -1vw;
}

#statControl{
    font-size: 2vw;
}
#statisticsContainer{
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.cropStat{
    margin-left: 2vw;
    display:grid;
    grid-template-rows: 20% auto;
    grid-template-columns: 33% 33% 33%;
    grid-template-areas: "header header header" "stat1 stat2 stat3";
    border:rgb(33, 33, 58) solid 2px;
    border-radius:2vw;
    padding: 1.5vw;
    margin: 1vw;
}
.cropStat h2{
    grid-area: header;
    font-size: 3vw;
    border-bottom: 1px solid black;
    width: 60%;
    height:3vw;
    margin-top: 0;
}
.cropStat p{
    font-size: 3vw;
    margin-top: 2vw;
}
.cropStatTotal{
    grid-area: stat1;
}
.cropStatPerson{
    grid-area: stat2;
}
.cropStatPercent{
    grid-area:stat3;
    width:20vw;
    height:20vw;
    border-radius: 50%;
}
.cropStatPercentContainer{
    background-repeat: no-repeat;
    background-size: cover;
    width:20vw;
    height:20vw;
    border-radius: 50%;
    margin-top:-4vw;
}
.cropStatPercentContainer .percentLabel{
    font-size: 1.8vw;
    margin-top: -0.2vw;
}
#loadimg{
    margin: auto;
    width:10vw;
    opacity: 0.8;
}


/*    NEWSLETTER    */
form{
    font-size:1.3vw;
}
#formContainer{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    row-gap: 1vw;
}
#nameMailDiv{
    width:95%;
    grid-row: 1;
    grid-column:1;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 4vw 4vw;
    row-gap:0.3vw;
}
#nameMailDiv label{
    grid-column: 1;
}
#nameMailDiv input{
    grid-column: 2;
}
#locationDiv{
    grid-row:1;
    grid-column: 2;
}
#formContainer textarea{
    width: 95%
}
#submitButton{
    margin:auto;
    width:12vw;
    height: 4vw;
}

select{
    width:10vw;
}


/*       SMALL      */
@media (max-width: 630px){
    /*StartPage*/
    #container{
        display: flex;
        flex-direction: column;
        margin-top:7vw;
    }
    #right{
        display:flex;
        flex-direction: row;
        border: none;
        margin-top: 2vh;
        margin-left: -1vw;
        justify-content: center;
    }
    #right a{
        height:5vh;
        width: 90%;
        margin-top: 2vh;
        font-size: 2vw;
    }
    .startNav{
        width:90%;
        height: 4vh;
    }
    #container{
        width:90vw;
    }
    
    /*Textsize*/
    #logga h1{
        margin-top: 0;
        font-size: 15vw;
        text-align: center;
    }
    #introduction p{
        font-size: 2vh;
    }
    .startNav h2{
        margin-top: 2vh;
        font-size: 2.5vw;
    }
    .startNav p{
        visibility: hidden;
    }
    
    /*Move around in the navigation please*/
    /*Navigation*/
    nav{
        height: fit-content;
        display: flex;
        flex-direction: column;
        width:90vw;
    }
    nav .navThing{
        grid-area: none;
        width:fit-content;
    }
    nav #home{ 
        text-align: center;
        font-size:9vw;
    }
    nav #navContainer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    nav .navThing{
        font-size: 3vw;
        height: 5vw;
    }
    main{
        width: 90vw;
    }

    /*Articles*/
    .articleSection{
        flex-direction: column;
    }
    .articleSection h1{
        font-size: 4vh;
    }
    .articleSection h2{
        font-size: 3vh;
    }
    .articleSection h3{
        font-size: 2.5vh;
    }
    .articleSection p{
        font-size: 2vh;
    }
    .articleSection img{
        max-width:70vw;
        max-height: 100vh;
        box-shadow: 2vw 2vw 1vw rgba(0, 0, 0, 0.445);
    }


    /*Sweden Through Time*/
    #yearDescription{
        font-size:4vw;
    }
    #sliderLabel{
        font-size:3.5vw;
    }
    
    .cropStat{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 3vw;
    }
    .cropStat *{
        margin:auto;
    }
    .cropStat h2{
        text-align: center;
        font-size: 7vw;
        height: fit-content;
    }
    .cropStat p{
        font-size: 5vw;

    }
    .cropStatPercent{
        width:30vw;
        height: 30vw;
    }
    .cropStatPercentContainer{
        width:30vw;
        height: 30vw;
    }
    .cropStatPercentContainer .percentLabel{
        font-size: 3vw;
        width:40vw;
        text-align: center;
    }


    /*Form*/
    form{
        font-size:2vh;
    }
    #formContainer{
        display: flex;
        flex-direction: column;
    }
    #locationDiv{
        display:flex;
        flex-direction: column;
    }
    #locationDiv select{
        width:fit-content;
    }
    #submitButton{
        width:fit-content;
        height: fit-content;
    }

    /*Footer*/
    footer{
        width:90vw;
    }
    footer p{
        font-size: 2vh;
        width:80%;
    }
    footer h3{
        font-size: 2vh;
    }
    footer a{
        font-size: 4vw;
        margin-left: 30vw;
    }
}


/*     MEDIUM     

In my humble opinion, this site in particular does not need three seperate layouts,
two would have been enough, but the grading requires three so three it is.
This means that the smaller and medium layouts are very similar.
*/
@media(min-width: 631px) and (max-width: 1100px){
    #container{
        display: flex;
        flex-direction: column;
        margin-top:7vw;
    }
    #right{
        display:flex;
        flex-direction: row;
        border: none;
        margin-top: 2vh;
        margin-left: -1vw;
        justify-content: center;
    }
    #right a{
        height:90%;
        width: 85%;
    }
    .startNav{
        width:85%;
        height:90%;
    }
    
    /*Textsize*/
    #logga h1{
        margin-top: 0;
        font-size:13vw;
        text-align: center;
    }
    #introduction p{
        font-size: 2vh;
    }
    .startNav h2{
        font-size: 2.5vw;
        margin-top: 2vh;
    }
    .startNav p{
        visibility: hidden;
    }

    /*Navigation*/
    nav{
        grid-template-columns: 35% auto;
        width:90vw;
        height: 6vw;
    }
    nav .navThing{
        font-size: 2vw;
        width: fit-content;
    }
    nav #home{
        font-size:5vw;
    }
    

    /*   Article*/
    main{
        width:90vw;
    }
    .articleSection{
        flex-direction: column;
    }
    .articleSection h1{
        font-size: 4vh;
    }
    .articleSection h2{
        font-size: 3vh;
    }
    .articleSection h3{
        font-size: 2.5vh;
    }
    .articleSection p{
        font-size: 2vh;
    }
    .articleSection img{
        max-width:50vw;
        max-height: 50vh;
        box-shadow: 2vw 2vw 1vw rgba(0, 0, 0, 0.445);
    }

    /*NewsLetter*/
    form{
        font-size:1.7vw;
    }

        /*Footer*/
        footer{
            width:90vw;
        }
        footer p{
            font-size: 2vw;
            width:80%;
        }
        footer h3{
            font-size: 2vw;
        }
        footer a{
            font-size: 2.5vw;
            margin-left: 35vw;
        }
}

/* The page is constructed with this as the default size, 
the other media queries modifies it for smaller screens*/
@media(min-width: 1100px){

}