html{
    font-size: 14px;
}
body{  
   
    font-size: 1.2rem;
    font-family: 'Lato-Regular';
    
}
main{
    max-width: 90vw;
    text-align: center;
}

/* Fonts */
h1,
h2{
    font-family: 'Monserrat-Bold';
}
h1{
    font-size: 8vw;
    padding-top: 7rem;
}

p{
    line-height: 1.5;
    display: inline-block;
    max-width: 70vw;
}
@font-face{
    font-family: 'Lato-Regular';
    src: url(assets/fonts/Lato-Regular.ttf);
}
@font-face {
    font-family: 'Monserrat-Bold';
    src: url(assets/fonts/Montserrat-Bold.ttf);
}

/* Bits of code and inspiration for layout of the page taken from my own oblig 2. */
/* Layout inspiration also take from "A short history of the web"
    https://home.cern/science/computing/birth-web/short-history-web               */ 

header{
    background-image: url(assets/img/luke-chesser-pJadQetzTkI-unsplash.jpg);
    position: relative;
    height: 60vh;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    margin-bottom: 4rem; /* This will create space between the header and the first article*/
    text-align: center; 
    
}


main>article{
    padding: 2rem;
    margin-bottom: 2rem;
    border-bottom: solid 1px lightslategray;   
}

 
/*Skjuler container for alle skjerm størrelser foruten <960px */
.hidetext{
    visibility: hidden;
}


/*displays the article 2 as a table*/
article:nth-child(2){
    display:table;
   }
   /* sets the image to be the first child and the div to be the last child of article 2. */
   /* This will result i the picture being shown at the bottom in article 2
      when using a screen under 600px. */

   article:nth-child(2)>img:first-child{
       display: table-header-group;
   }
   article:nth-child(2)>div:last-child{
       display: table-header-group;
   }

.container>img{
    display: block;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    height: auto;
    position: relative;
    justify-content: center;
    
}



/* Sets space between list elements*/
/* Code inspiration from: https://stackoverflow.com/questions/19254411/how-do-i-set-vertical-space-between-list-items*/
li:not(:last-child) {
    margin-bottom: 15px;
}


#quote{
    display: flex;
    margin: 0 auto;
    width: 50%;
    background-color: rgb(255, 255, 255);
    color: black;
    font-size: 15px;
    margin-top: 4rem;
    justify-content: center;
    border-radius: 15px 5px 15px 5px; /*Rounded corners of the quote box*/
    padding: 0.5rem;   
}

footer{ 
    display: block;               /*displays as a block element*/
    box-sizing: border-box;
    background-color: #305B93; 
    width: 90vw;                 /*the width is set to 90vw as the other elements*/
    color: white;             /*the text is set to white*/
    margin: 0 auto;
    text-align: center;
    margin-top: 2rem;
    
}

footer p{
    margin: 0;
    padding: 2rem;
    
}

/*the links in the footer get the same color as the text*/
a:link{
    color: white;
}








/*Media query for iPad and desktop sizes*/
@media only screen and (min-width: 600px){

    header{
        display: block;
        height: 65vh; 
    }
    header>div, main, footer{
        max-width: 85vw;
        margin: 0 auto;
    }

    h1{
    font-size: 5vw;
    padding-top: 10rem;
    }

    #quote{
    font-size: 20px;
    margin-top: 5rem; 
    padding: 1rem;
    }

    /* Article is set to be in two colums, the gap is 10% */
    /* The width of the column is set to 22vw */
    article{
        columns: 2;
        column-gap: 10%;
        column-width: 22vw;
        align-items: center;
    }

    /*Article 2 displayed as block*/
    article:nth-child(2){
        display: block;
    }
        /*div in article 2 displayed as a block*/
        article:nth-child(2) div:last-child  {
        display: inline-block;
        }  
        /*img in article 2 displayed as a block*/
        article:nth-child(2) img{
        display: block;
        }

         /*div in article 3 displayed as a block*/
         article:nth-child(3) div:last-child  {
            display: inline-block;
            }  
    

    /* Changing font sizes for different sceen widths*/

        @media only screen and (min-width:600px) and (max-width:960px){

            html{
                font-size: 13px;
            }
 
        }
        
        @media only screen and (min-width:960px){
        
            html{
                font-size: 15px;
            }
/*Animation on hover*/
 /* Inspiration for code from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity */
.container{
    position: relative;
    
}
.image{
    opacity: 1;
    transition: .5s ease;
    height: auto;
    backface-visibility: hidden;
}
.hidetext{
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 45%;
    left: 18%;
    text-align: center;
    visibility: visible;

}
.container:hover .image{
    opacity: 0.4;
}
.container:hover .hidetext{
    opacity: 1;

}
    .text{
    background-color: #305B93;
    color: #fff;
    border-radius:15px 15px 2px 15px;
    padding: 1rem ;
    font-size: 1.5rem;
    
    
    }
 }
}