/* Basic reset */
*{

    
    margin: 0;
    padding: 0 ;
    

}

html{
scroll-behavior: smooth;
width: 100%;

}

body {
/* Hi, my name is Massimo I am a student at Vanier College in Multimedia Integration. I love sports, traveling and playing video games. */

    font-family: 'Itim';
    font-style: normal;
    font-weight: 100;
    font-size: 22px;
    line-height: 28px;
    position:relative;margin: 0 auto;
   
  
  
    
    font-family: 'Itim';
        font-style: normal;
        font-weight: 100;
        font-size: 22px;
        line-height: 28px;
        position: relative;
        
        color: #000000;
         background-color: rgb(17, 137, 235); 
        text-align: center; 
    }

    header {
    width: 100%;
    height: 115px;
    background-color: azure;
    padding: 20px;
    text-align: center;
    /* position: fixed; */
    
 }
 nav a{
    color: #000000;
    text-decoration: none;
    
 }
 nav a:hover {
    color: rgb(17, 137, 235);
    height: 20px;
    text-align: center;
 }
 header div {
     width: 100px;
     font-size: 20px;
    
 }
 main {
    /* padding: 20px;
    padding-top: 160px; */

    /* for 4 positions: top right bottom left */
    /* padding: 160px 20px 20px 20px; */
    
    /* combined left & right = 3 positions */
    padding: 160px 20px 20px;
    text-align: center;
 }

/*main article */
p {

text-align: center;
}

nav ul li {
display: inline-block;
margin-right: 30px;
text-align: center;
}


figure {
   
   padding: 30px;
}

article {
    padding: 20px;

}

footer{
padding: 20px;
text-align: center;
}

section{
    padding: 29px;
}



footer img{
   display: inline-block
   margin - right 20px
}
footer img:nth-child(3) {
   position: relative;
   top: -5px;
}


#banner{
    background-image: url(../images/soccer.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 30vh;
    left: 60px;
    right: 60px;
    
   
    
}


#title{
    /* Massimo's web */

font-family: 'Oleo Script Swash Caps';
font-style: normal;
font-weight: 400;
font-size: 48px;
line-height: 30px;
color: #FFFFFF;
position: relative;
top: -30px;
left: 150px;

}
#title span {
    font-size: 36px;
    color: #ff0000;
    display: block;
    text-align: center;
}


#interests {
 display: grid;
 grid-template-columns: repeat auto-fit,minmax(270px,1fr);
gap: 20px;
padding-top: 50px;
}
 #interests figure img {
    width: 100%;
    
 }

 #interests h3{
    font-family: 'Itim';
    font-size: normal;
    
 }

 h1{
    position: absolute;
    left: 100px;
    top: 50px;
    color: #ff0000;
    
}

 
 nav{
    position: relative;
    right: -10px;
    

 }

 header, #banner, main, footer {
   max-width: 3000px;
 }

 @media screen and (max-width:487px){
   /* nav{
       font-size: 30px;
       left: 0px;
   }
   header {
       height: 140px;
   } */

   body{
       scale: 0.5;
       transform-origin: center top;
   }

}