/*Font size for iPhone */
html{
    font-size: 14px;
}
body{  
    background-image: linear-gradient(135deg,
    #f5f7fa 0%, #c3cfe2 100%);
    font-size: 1.2rem;
    margin: 0;
    font-family: 'Lato-Regular';


    /*Font for h1, h2 and h3 is set to Monserrat */
}
    h1,
    h2,
    h3{
        font-family:'Monserrat', sans-serif;
    
    }
    h1{
        font-size: 4rem;
        margin-bottom: 0;
    }
    h2{
        font-size: 2.2rem;
    }
    p{
        max-width: 70ch;
        line-height: 1.5;
        display: inline-block;
    }

header{
        background-image:url(assets/img/studentsbg.png) ;
       position: relative;
        background-attachment: fixed;    /*set to fixed so that the picture does not scroll with the page*/
        height: 55vh;
        background-position: center;
        background-size: cover;
        top:0;
        left: 0;
        right: 0;
        color: white;
        margin-bottom: 6rem; /*to get space between the header and the header div*/
        
     
    }
   

header>div{
        display: block;
        box-sizing: border-box;
        background-color: #c5192d;
        position: absolute;
        bottom: -4rem;
        left: 2.5vw;
        right: 2.5vw;
        text-align: center;
        margin: 0 auto;
        
        padding: 2rem;
}


@font-face {
    font-family: 'Monserrat-Bold';
    src: url(assets/fonts/Montserrat-Bold.ttf);
}
@font-face {
    font-family: 'Lato-regular' ;
    src: url(assets/fonts/Lato-Regular.ttf);
}

/*main is set på 95vw and it is added a box shadow that is grey*/
main{
    width: 95vw;
    margin: 0 auto;
    box-shadow: 0px 0px 1px 0px darkgrey ;
}

/*The background of the articles are set to white and padding 2rem*/
main>article{
    
    background-color: whitesmoke;
    padding: 2rem;
    
}
img{
    display: block;
    width: 100%;
    padding-bottom: 2rem;
    object-fit: contain;
    height: auto;
    position: relative;
    margin: 0 auto;
}

/*the intro container background-color is set to red*/
#intro-container{
    
    background-color: #c5192d;
}
/*list style is none with no padding*/
ul{
    list-style-type: none;
    padding: 0;
}


/*inpiration gotten from the site: https://clairecodes.com/blog/2019-04-26-styling-list-bullts-win-emoji/+/
Here i used the ::before pseudo element to change from a bullet point list, to an emoji list. 
To avoid repeating pattern of emojies, i used the pseudo-class :nth-child*/


ul li:nth-child(1n)::before{
    width: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

ul li:nth-child(1)::before{
    content: '\1F64C';
    


}
ul li:nth-child(2)::before{
    content: '\1F3EB';
    

    
}
ul li:nth-child(3)::before{
    content: '\1F4DA';
}



footer{ 
    display: block;           /*displays as a block element*/
    box-sizing: border-box;
    background-color: #c5192d; 
    width: 95vw;              /*the width is set to 95vw 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;
}

/* sets a border at the bottom of article 2*/
article:nth-of-type(2){
           border-bottom: solid lightgray 0.1px;
}

/*displays the article 3 as a table*/
article:nth-child(3){
 display:table;
}
/*sets the image to be the first child and the div to be the last child of article 3. */
article:nth-child(3)>img:first-child{
    display: table-header-group;
}
article:nth-child(3)>div:last-child{
    display: table-header-group;
}

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

    /*i have changed from displaying article 3 as a table to displaying as a block*/
    article:nth-child(3){
        display: block;
    }

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

       }  
       /*img displayed as a block*/
    article:nth-child(3) img{
        display: block;
    }

    header{
        display: block;
        height: 65vh; 
    }
    
    /*article is set to be in two colums, the gap is 10% and the width of the column is set to 22.5vw*/
    article{
        columns: 2;
        column-gap: 10%;
        column-width: 22.5vw;
        border-bottom: solid lightgray 0.1px;

       
    }
   /* Inpiration for this gotten from: https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20
   This makes the background split in two, on 90 degrees, with half red and half white.*/

    #intro-container{
        background: linear-gradient(90deg, #c5192d 50%, white 50%);
        }
    
    }
   
    
@media only screen and (min-width:600px) and (max-width:960px){

    html{
        font-size: 16px;
    }
    header>div, main, footer{
        max-width: 85vw;
    }
  
}

@media only screen and (min-width:950px){

    html{
        font-size: 24px;
    }
    header>div, main, footer{
        max-width: 70vw;
    }

}