:root{
    --cardPadding: 30px;
    --upperCardMargin: 50px;
    --cardGap: 20px;
}

body{
    margin: 0px;
    background-color: whitesmoke;
    font-family: sans-serif;
    cursor: default;
}

.boxshadow{
    -webkit-box-shadow: -1px 1px 5px 1px rgba(0,0,0,0.2); 
    box-shadow: -1px 1px 5px 1px rgba(0,0,0,0.20);
    border-radius: 5px;
    }
/*
p, h1, h2, h3{
    opacity: 0;
    transition: opacity 300ms;
}
*/
div{
    /* outline: solid 1px black; */
}

p{
    text-align: left;
}

.button{
    min-height: min-content;
    min-width: min-content;
    max-width: 60%;
    display: inline-block;
    background-color: gray;
    padding: 10px;
    margin-bottom: 40px;
}

.clickable{
    text-decoration: none;
}

.clickable:hover{
    cursor: pointer;
}

h2{
    margin-top: 0px;
    padding: 5px;
}

#language{
    position: absolute;
    right: 30px;
    top: 0;
    font-size: 20px;
    color:darkgray;
    padding-right: 10px;
}
#language > img, #language > p{
    display: inline-block;
    padding-left: 10px;
}

#language:hover{
    background-color: #dddddd55;
    color: black;
}

.header{
    height: 70vh;
    width: 100%;
    display: grid;
    row-gap: 10px;
    grid-template-columns: 10px 1fr 10px;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    ". . ."
    ". logo ."
    ". menu ."
    ". . .";
    background-color: transparent;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.43); 
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.20);
}

#backgroundImage{
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 70vh;
    object-fit: cover;
}
#backgroundImageBlur{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 70vh;
    top: 0px;
    left: 0px;
    backdrop-filter: blur(2px);
}

#menu {
    height: 1fr;
    display: grid;
    background-color: #dddddd77;
    grid-area: menu;
    grid-template-columns: min-content;
    justify-content: center;
    align-content: center;
}

#menu > p{
    margin: 0px;
    font-size: 20px;
    color: black;
    padding: 15px;
    white-space: nowrap;
}

#menu > p > a{
    text-decoration: none;
    color: black;
}

#menu > p:hover{
    text-decoration: underline;
    vertical-align: auto;
}

#logo
{
    grid-area: logo;
    min-height: 1fr;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        ". logoImage .";
    background-color: #dddddd77;
}

#logo > a > img{
    max-width: 100%;
    max-height: 100%;
}

#logoImage{
    grid-area: logoImage;
}

.content{
    display: grid;
    grid-template-columns: 10px 1fr 10px;
    row-gap: 25px;
    grid-template-areas:
        ". project ."
        ". furniture ."
        ". reports ."
        ". about .";
}

#project{
    margin-top: var(--upperCardMargin);
    column-gap: 20px;
    grid-area: project;
    display: grid;
    grid-template-columns: 10px 1fr 10px;
    grid-template-areas:
        ". projectHeader ."
        ". projectImage ."
        ". projectText . "
        ". projectNavigation .";
    background-color: white;
}

#project > div > img{
    max-width: 100%;
}

#reports{
    grid-area: reports;
}

#about{
    padding: var(--cardPadding);
    grid-area: about;
}

#projectHeader{
    grid-area: projectHeader;
    text-align: center;
}

#projectImage{
    grid-area: projectImage;
    margin-top: 0px;
}

#projectImage > h2{
    text-align: center;
}

#projectText{
    padding-top: 10px;
    grid-area: projectText;
}

#projectNavigation{
    opacity: 0; /*Temporarily disabled card swap*/
    grid-area: projectNavigation;
    text-align: center;
}

#projectNavigation > div{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid black;
    border-radius: 100px;
    outline: none !important;
    padding: 3px;
    margin: 5px;
}
#projectNavigation > div:hover{
    background-color: lightgray;
    cursor: pointer;
}

#furniture{
    column-gap: 15px;
    row-gap: 10px;
    background-color: white;
    grid-area: furniture;
    display: grid;
    grid-template-columns: 10px 1fr 10px;
    grid-template-rows: repeat(5, min-content);
    grid-template-areas: 
        ". furnitureHeadline ."
        ". desk ."
        ". chair ."
        ". whiteboard ."
        ". camera .";
}

#furniture > div{
    text-align: center;
}
#furniture > div > img{
    max-width: 100%;
    max-height: 100%;
}

#furnitureHeadline{
    grid-area: furnitureHeadline;
    text-align: center;
    max-height: fit-content;
    height: min-content;
}
#chair{
    grid-area: chair;
}

#desk{
    grid-area: desk;
}

#whiteboard{
    grid-area: whiteboard;
}

#camera{
    grid-area: camera;
}

#reports{
    column-gap: 10px;
    row-gap: 10px;
    background-color: white;
    grid-area: reports;
    display: grid;
    grid-template-columns: 10px 1fr 10px;
    grid-template-rows: repeat(5, min-content);
    grid-template-areas: 
        ". reportsHeadline ."
        ". projectReport ."
        ". pedagogicsReport ."
        ". designReport ."
        ". circularityReport .";
}

#reports > div{
    text-align: center;
}
#reports > div > img{
    max-width: 100%;
    max-height: 100%;
}

#projectReport:hover, #pedagogicsReport:hover, #designReport:hover, #circularityReport:hover{
    cursor: pointer;
    background-color: lightgray;
}

#reportsHeadline{
    grid-area: reportsHeadline;
    text-align: center;
    max-height: fit-content;
    height: min-content;
}
#projectReport{
    grid-area: projectReport;
}

#pedagogicsReport{
    grid-area: pedagogicsReport;
}

#designReport{
    grid-area: designReport;
}

#circularityReport{
    grid-area: circularityReport;
}

#about{
    column-gap: 0px;
    row-gap: 20px;
    background-color: white;
    grid-area: about;
    display: grid;
    grid-template-columns: 0px 1fr 1fr 0px;
    grid-template-rows: repeat(6, min-content);
    grid-template-areas: 
        ". aboutHeadline aboutHeadline ."
        ". groupPicture groupPicture ."
        ". aboutText aboutText ."
        ". people people ."
        ". people people ."
        ". people people .";
}

#people{
    column-gap: 40px;
    row-gap: 20px;
    text-align: center;
    display: grid;
    grid-area: people;
    grid-template-columns: 15px 1fr 1fr 15px;
    grid-template-rows: repeat(6, min-content);
    grid-template-areas: 
        ". pedagogicsGroup pedagogicsGroup ."
        ". amanda arvid ."
        ". designGroup designGroup ."
        ". harald agnes ."
        ". circularityGroup circularityGroup ."
        ". annika alma .";

}

#people > div >img{
    border-radius: 100%;
    max-width: 100%;
    width: 100%;
    max-height: 100%;
}

#aboutHeadline{
    grid-area: aboutHeadline;
    text-align: center;
    height: min-content;
    max-height: fit-content;
}

#groupPicture{
    grid-area: groupPicture;
    margin: 20px auto;
}

#groupPicture > img{
    max-width: 100%;
    max-height: 100%;
}

#aboutText{
    grid-area: aboutText;
    margin-bottom: 20px;
}

.linktext{
    text-align: center;
}

#pedagogicsGroup{
    grid-area: pedagogicsGroup;
}

#amanda{
    grid-area: amanda;
}

#arvid{
    grid-area: arvid;
}

#designGroup{
    grid-area: designGroup;
}

#harald{
    grid-area: harald;
}

#agnes{
    grid-area: agnes;
}

#circularityGroup{
    grid-area: circularityGroup;
}

#annika{
    grid-area: annika;
}

#alma{
    grid-area: alma;
}

#footer{
    padding: 10vh 0;
    text-align: center;
    display: grid;
    margin-top: 25px;
    background-color: white;
    grid-template-rows: 20px repeat(3, 1fr) 20px;
    grid-template-areas: 
        "." 
        "course"
        "updated"
        "contact"
        ".";

    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.20);
}
#footer > div > p, #footer > div >h3{
    margin-top: 10px;
}
#course > p, #updated > p{
    text-align: center;
}

#course{
    grid-area: course;
}
#updated{
    grid-area: updated;
}
#contact{
    grid-area: contact;
}

/*Product page styling*/
#productPage{
    row-gap: var(--cardGap);
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: repeat(3, min-content);
    grid-template-areas:
        ". presentation ."
        ". productGallery ."
        ". criterias .";
}

#presentation{
    row-gap: var(--cardGap);
    background-color: white;
    text-align: center;
    margin-top: var(--upperCardMargin);
    grid-area: presentation;
    display:grid;
    padding: var(--cardPadding);
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, min-content);
    grid-template-areas:
        "productHeadline"
        "classroomProductPicture" 
        "aboutProduct"
        "inShort";
}

#presentation > div > img{
    max-width: 100%;
    max-height: 100%;
}
#productHeadline{
    grid-area: productHeadline;
}
#classroomProductPicture{
    margin-top: 20px;
    grid-area: classroomProductPicture;
}
#aboutProduct{
    grid-area: aboutProduct;   
}
#inShort{
    grid-area: inShort;
}

#productGallery{
    grid-area: productGallery;
    background-color: white;
    row-gap: 20px;
    padding: var(--cardPadding);
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, min-content);
    grid-template-areas:
        "productPicture1"
        "productPicture1Description"
        "productPicture2"
        "productPicture2Description"
        "productPicture3"
        "productPicture3Description";
}
#productGallery > div >img{
    max-width: 100%;
    max-height: 100%;
}
#productPicture1{
    grid-area: productPicture1;
}
#productPicture1Description{
    grid-area: productPicture1Description;
}
#productPicture2{
    grid-area: productPicture2;
}
#productPicture2Description{
    grid-area: productPicture2Description;
}

#productPicture3{
    grid-area: productPicture3;
}
#productPicture3Description{
    grid-area: productPicture3Description;
}

#criterias{
    grid-area: criterias;
    background-color: white;
    padding: var(--cardPadding);
    text-align: center;
}
#criterias > ul{
    display: inline-block;
}

/*Report page styling*/
#report{
    display: grid;
    text-align: center;
    grid-template-columns: 10px 1fr 10px;
    grid-template-rows: repeat(2, min-content);
    grid-template-areas:
        ". start ."
        ". aboutAuthors .";
}

#start{
    margin-top: var(--upperCardMargin);
    grid-area: start;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, min-content);
    grid-template-areas: 
        "reportHeadline"
        "abstract"
        "link";
}

#reportHeadline{
    background-color: white;
    grid-area: reportHeadline;
}

#abstract{
    background-color: white;
    grid-area: abstract;
}

#link{
    grid-area: link;
    text-align: center;
}

#aboutAuthors{
    background-color: white;
    grid-area: aboutAuthors;
    display: grid;
    column-gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, min-content);
    grid-template-areas: 
        "authorHeadline authorHeadline"
        "author1 author2"
        "comments comments";
}

#aboutAuthors > div > img{
    max-width: 100%;
    max-height: 100%;
    /*border-radius: 50%;*/
}

#authorHeadline{
    grid-area: authorHeadline;
}

#author1{
    grid-area:author1;
    text-align: center;
}

#author2{
    grid-area:author2;
    text-align: center;
}

#comments{
    padding-top: 10px;
    grid-area: comments;
}

@media only screen and (min-width: 1200px){
    
    .header{

        grid-template-columns: 1fr repeat(3, 400px) 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: ". . . . ."
        ". logo menu menu ."
        ". . . . ."
        ". . . . .";
        column-gap: 10px;
    }

    #menu {
        grid-template-columns: min-content min-content min-content min-content;
    }

    #logo
    {
        grid-area: logo;
        min-height: 1fr;
        display: inline-block;
        align-content: center;
        background-color: #dddddd77;
    }

    .content{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        row-gap: var(--cardGap);
        grid-template-areas:
            ". project project project ."
            ". furniture furniture furniture ."
            ". reports reports reports ."
            ". about about about .";
    }

    #project{
        display: grid;
        grid-template-columns: 20px repeat(3, 1fr) 20px;
        grid-template-areas: 
            ". projectHeader projectHeader projectHeader ."
            ". projectImage projectText projectText ."
            ". projectNavigation projectNavigation projectNavigation .";
    }
    
    #furniture{
        padding: var(--cardPadding);
        grid-template-columns: repeat(4, 1fr);
        row-gap: 0px;
        grid-template-areas: 
            "furnitureHeadline  furnitureHeadline furnitureHeadline furnitureHeadline"
            "desk chair whiteboard camera"
            "desk chair whiteboard camera"
            "desk chair whiteboard camera"
            "desk chair whiteboard camera";
    }

    #reports{
        grid-template-columns: repeat(4, 1fr);
        row-gap: 0px;
        grid-template-areas: 
            "reportsHeadline reportsHeadline reportsHeadline reportsHeadline"
            "projectReport pedagogicsReport designReport circularityReport"
            "projectReport pedagogicsReport designReport circularityReport"
            "projectReport pedagogicsReport designReport circularityReport"
            "projectReport pedagogicsReport designReport circularityReport";
        padding: var(--cardPadding);
    }
    #about{
        grid-template-rows: repeat(3, min-content);
        grid-template-areas: 
            ". aboutHeadline aboutHeadline ."
            ". groupPicture aboutText ."
            ". people people .";
        padding: var(--cardPadding);
        column-gap: var(--cardGap);
    }
    
    #people{
        /* column-gap: 10px; */
        width: 100%;
        column-gap: 10px;
        text-align: center;
        display: grid;
        grid-area: people;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: min-content 1fr;
        grid-template-areas: 
            " pedagogicsGroup pedagogicsGroup designGroup designGroup circularityGroup circularityGroup"
            "amanda arvid harald agnes annika alma";
    }

    #people > div{
        box-sizing: border-box;
        width: 100%;
    }
    #people > div > h3, #people > div > p {
        font-size: 15px;
    }

    #footer{
        margin-top: 50px;
        display: grid;
        grid-template-columns: 20px repeat(3, 1fr) 20px;
        grid-template-rows: 1fr;
        grid-template-areas: 
            ". course updated contact .";
    }

    /* Product Page Styling*/
    #productPage{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, min-content);
        grid-template-areas:
            ". presentation presentation presentation ."
            ". productGallery productGallery productGallery ."
            ". criterias criterias criterias .";
    }

  
    #productGallery{
        padding: var(--cardPadding);
        grid-area: productGallery;
        row-gap: 20px;
        column-gap: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, min-content);
        grid-template-areas:
            "productPicture1 productPicture2 productPicture3"
            "productPicture1Description productPicture2Description productPicture3Description";
    }
    /*Report page styling*/
    #report{
        row-gap: 20px;
        column-gap: 20px;
        padding: var(--cardPadding);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, min-content);
        grid-template-areas:
            ". start start start ."
            ". aboutAuthors aboutAuthors aboutAuthors .";
    }

    #start{
        padding: var(--cardPadding);
    }
    #aboutAuthors{
        padding: var(--cardPadding);
    }
    
}