@font-face{     
    
                                                          /* Has to be in the same folder as css code to work  */ 
    src: url(fonts/BungeeInline-Regular.ttf);
    font-family:Bungee;
}

@font-face{     
    
                                                          /* Has to be in the same folder as css code to work  */ 
    
    src: url(fonts/gothbold.ttf);
    font-family:goth;
}

.custom-delay {
  animation-delay: 0.3s;
}


li{

    color: black;
}

body{
    margin:auto 0;

    }


img{

        width: 800px;
        height: 500px;
        border-radius:15px;
    }


a:link {
    font-family: 'Maven Pro', sans-serif; 
    color: black;  /*Don't know why but in Avast Secure Browser it becomes blue */
   
}

a:hover {
    color: blue;
    font-size: 1.2em;
    }

.headContainer{
    display:flex;
    position : fixed;   /*stays in the same place even if the page is scrolled */
    background-image: linear-gradient(to right, rgb(133, 216, 209), white , rgb(80, 206, 195));
    height: 80px;
    align-items:center;    /*set the alignment of secondary axis (y) */ 
    Z-index: 2;              /* everything hides behinder the header   */
    top:0px;                /* so it is fixed to the sides of the page  */
    left:0;
    right:0;
    justify-content: space-between;
    width:100%;
    border-radius:5px;               
}

.mainHead{
    text-align: center;
    color: black;
    text-decoration-line: underline;
    font-family: Bungee;
    font-size:1.4em;
    text-emphasis-color: white;  
}

.main-nav{
    display:flex;
    list-style:none;
    font-size:1em;
    width:130px;
    margin:5px;
}

.link{
    font-size:1.2em;
    margin-right: 10px;
}

.introduction{
    background: white;
    grid-column: 1/1;       /* the number depends on grid-template columns having 3 columns means there are 4 lines for the entire line */
    font-size: 20px;
    margin-top: 80px;    /* because of header   */
    padding-right: 50px;
    border-radius:1em;
    text-align: center;
    padding: 2em;
    font-family: 'Maven Pro', sans-serif;  
}

.grid{
    background:white;
    display:grid;
    grid-column: 0/0;  
    grid-template-columns: repeat(auto-fill, minmax(1000px , 1fr));
    grid-row: 0/0;
    gap:120px;
    justify-items: center;     /* start,center,end x axis  */
    align-items:center;    /* start,center,end y axis strech=default  */
    margin-left:4%;
    font-size: 1.2em;
    margin-bottom:120px;  /* because of footer   */

 

}

.image{
    border-radius:5px;
}


.footer{
    display:flex;
    position : fixed;   /*stays in the same place even if the page is scrolled */
    background-image: linear-gradient(to right, rgb(133, 216, 209), white , rgb(80, 206, 195));
    justify-content: flex-start;   /*set the alignment of primary axis (x) */ 
    height: 100px;
    align-items:flex-start;    /*set the alignment of secondary axis (y) */ 
    flex-direction:column;
    font-family: 'Maven Pro', sans-serif;   /*links are from index.html */ 
    bottom:0px;                /* so it is fixed to the sides of the page  */
    left:0;
    right:0;
    width:100%;
    border-radius:5px;
}


.aboutMe{
    color: black;
    height: 30px;
    padding-left: 10px;
    font-size: 15px;

}

.aboutMeInfo{
    margin-top: 5px;
    color: black;
    padding-left: 10px;
   
}

#red{
    color: red;
}

#black{
    color: black;
}


#positioning{
    margin-left:50px;
}

#edit{
    display: flex;
    justify-content: center;
    font-family: goth;
    font-style:bold;
    font-size:x-large;

}


@viewport {
  width: 100vw; /*Sets the width of the actual viewport to the device width*/
}

@media(max-width:850px){      /*Reponsive design for smaller tablet and large smartphones   */
    .grid{
        margin-left:3%;
    }
    img{
        width: 640px;
        height: 400px;
    }

    .footer{

        height:120px;
    }

    .introduction{
        font-size:.6em; 

    }

    #edit{

        font-size:1.5em;
    }

    .mainHead{
        font-size:1.0em;
    }

    .link{
        font-size:1.0em;
    }


    .aboutMe{

        font-size:.9em; 
    }

    .aboutMeInfo{

        font-size:.8em; 
    }


    .grid{

        justify-items: left;     /* start,center,end x axis  */
        align-items:left;    /* start,center,end y axis strech=default  */
        font-size: .8em;
        margin-left:8%;

    }

}


@media(max-width:600px){      /*Reponsive design for smaller tablet and large smartphones   */
    
    img{
        width: 440px;
        height: 300px;
    }

    #edit{

        font-size:1.0em;
    }

    .mainHead{
        font-size:1em;
    }

    .grid{
        margin-left:2%;
    }
    
}


@media(max-width:400px){      /*Reponsive design for smaller tablet and large smartphones   */
    
    img{
        width: 340px;
        height: 200px;
    }


    .mainHead{
        font-size:.8em;
    }

    #edit{

        font-size:0.9em;
    }

    
    li{

        color: black;
        font-size:.8em;
    }

    
    .grid{
        margin-left:1%;
    }

}


@media(max-width:350px){      /*Reponsive design for smaller tablet and large smartphones   */
    
    img{
        width: 250px;
        height: 120px;
    }

    .grid{
        margin-left:0%;
    }



}