html, body {
    max-width: 100%;
    background-color: #fafafa;
}

.links {
    text-decoration: none;
    color: black;
}

.linksimg {
    text-decoration: none;
}

.image-shadow {
    box-shadow: 0 0 10px rgb(134, 134, 134);
}

.image-size {
    width: 25vw;
    align-self: center;
}

.centrarimagens {
    display: flex;
    flex-direction: column;
}

.imagemcentrador {
    align-self: left;
}


/*
    header
*/

.gridabout {
    grid-column: 1 / 5;
    grid-row: 1;
    justify-content: center;
}

.gridgoncalosantos {
    grid-column: 5 / 9;
    grid-row: 1;
    
}

.gridpteng {
    grid-column: 9 / 11;
    grid-row: 1;
    justify-self: right;
}

.gridheader {
    grid-column: span 10;
    grid-row: 1;
    justify-content: space-between;
}




/*
    landing page
*/

.gridbiglandingpage {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(43, 40px);
    grid-gap: 20px;
}

.gridoxigenio {
    grid-column: span 3;
    grid-row: 3;
}

.gridjayz {
    grid-column: span 3;
    grid-row: 3;

}

.gridkanye {
    grid-column: span 3;
    grid-row: 3;
}

.gridsky {
    grid-column: span 3;
    grid-row: 11;
}



.setasposicaooxidireita {
    grid-column: 6 / 7;
    grid-row: 72;
    justify-self: center;
}

.setasposicaojayzesquerda {
    grid-column: 5 / 6;
    grid-row: 34;
    justify-self: center;
}

.setasposicaojayzdireita {
    grid-column: 6 / 7;
    grid-row: 34;
    justify-self: center;
}

.setasposicaokanyeesquerda {
    grid-column: 5 / 6;
    grid-row: 29;
    justify-self: center;
}

.setasposicaokanyedireita {
    grid-column: 6 / 7;
    grid-row: 29;
    justify-self: center;
}

.setasposicaoskyesquerda {
    grid-column: 5 / 6;
    grid-row: 41;
    justify-self: center;
}



/*
    about page
*/

.gridbigaboutpage {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(15, 40px);
    grid-gap: 20px;
}

.gridbio {
    grid-column: span 3;
    grid-row: 2;
}

.gridbiotext {
    grid-column: 1 / 8;
    grid-row: 3;
}

.grideducation {
    grid-column: span 3;
    grid-row: 5;
}

.grideducationtext {
    grid-column: span 3;
    grid-row: 6
}

.gridcontacts {
    grid-column: 10;
    grid-row: 3;
}

.contacts {
    display: flex;
    flex-direction: column;
}

.gridcredit {
    grid-column: 5 / 11;
    grid-row: 15;
}





/*
    comum pagina de projeto
*/

.gridtituloprojeto {
    grid-column: 1 / 6;
    grid-row: 2
}





/*
    PAGINA OXIGENIO
*/    

.gridbigoxigenio {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(73, 40px);
    grid-gap: 20px;
}

.gridtextoesquerda {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
}

.gridtextodireita {
    grid-column: 5 / 9;
    grid-row: 3 / 5;
}

.gridimage1oxigenio {
    grid-column: 1 / 6;
    grid-row: 5;
    width: 50vw;
}

.gridimage2oxigenio {
    grid-column: 7 / 11;
    width: 30vw;
    grid-row: 5;
    justify-self: center;
}   

.gridimage3oxigenio {
    grid-column: 7 / 11;
    width: 30vw;
    grid-row: 10;
    justify-self: center;
} 

.gridimage4oxigenio {
    grid-column: span 10;
    width: 90vw;
    grid-row: 18;
    justify-self: center;
} 

.gridimage5oxigenio {
    grid-column: 1 / 4;
    width: 25vw;
    grid-row: 31;
    justify-self: center;
}

.gridimage6oxigenio {
    grid-column: 4 / 8;
    width: 25vw;
    grid-row: 31;
    justify-self: center;

}

.gridimage7oxigenio {
    grid-column: 8 / 11;
    width: 25vw;
    grid-row: 31;
    justify-self: center;

}

.gridimage8oxigenio {
    grid-column: span 10;
    width: 95vw;
    grid-row: 43;
    justify-self: center;
}

.gridimage9oxigenio {
    grid-column: span 10;
    width: 95vw;
    grid-row: 58;
    justify-self: center;
}

/*
    PAGINA JAYZ
*/  


.gridbigjayz {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(35, 40px);
    grid-gap: 20px;
}

.gridtextoesquerdajayzkanyesky {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
}

.gridimage1jayz {
    grid-column: span 10;
    grid-row: 5;
    width: 50vw;
    justify-self: center;
}

.gridimage2jayz {
    grid-column: 2 / 4;
    width: 20vw;
    grid-row: 15;
    justify-self: center;
}   

.gridimage3jayz {
    grid-column: 4 / 6;
    width: 20vw;
    grid-row: 15;
    justify-self: center;
} 

.gridimage4jayz {
    grid-column: 6 / 8 ;
    width: 20vw;
    grid-row: 15;
    justify-self: center;
} 

.gridimage5jayz {
    grid-column: 8 / 10;
    width: 20vw;
    grid-row: 15;
    justify-self: center;
}

.gridimage6jayz {
    grid-column: 2 / 6;
    width: 42vw;
    grid-row: 19;
    justify-self: center;
}

.gridimage7jayz {
    grid-column: 6 / 10;
    width: 42vw;
    grid-row: 19;
    justify-self: center;
}


/*
    PAGINA KANYE
*/  

.gridbigkanye {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(30, 40px);
    grid-gap: 20px;
}

.gridimage1kanye {
    grid-column: 1 / 4;
    grid-row: 5;
    width: 25vw;
    justify-self: center;
}

.gridimage2kanye {
    grid-column: 4 / 8;
    width: 25vw;
    grid-row: 5;
    justify-self: center;
}   

.gridimage3kanye {
    grid-column: 8 / 11;
    width: 25vw;
    grid-row: 5;
    justify-self: center;
} 

.gridimage4kanye {
    grid-column: 1 / 4 ;
    width: 25vw;
    grid-row: 10;
    justify-self: center;
} 

.gridimage5kanye {
    grid-column: 4 / 8;
    width: 25vw;
    grid-row: 10;
    justify-self: center;
}

.gridimage6kanye {
    grid-column: 8 / 11;
    width: 25vw;
    grid-row: 10;
    justify-self: center;
}

.gridimage7kanye {
    grid-column: span 10;
    width: 90vw;
    grid-row: 15;
    justify-self: center;
}


/*
    PAGINA SKY
*/  

.gridbigsky {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(42, 40px);
    grid-gap: 20px;
}

.gridimage1sky {
    grid-column: 3 / 9;
    grid-row: 5;
    width: 50vw;
    justify-self: center;
}

.gridimage2sky {
    grid-column: span 10;
    grid-row: 20;
    width: 90vw;
    justify-self: center;
}

.gridimage3sky {
    grid-column: 1 / 3;
    grid-row: 32;
    width: 18vw;
    justify-self: center;
}

.gridimage4sky {
    grid-column: 4 / 6;
    grid-row: 32;
    width: 18vw;
    justify-self: center;
}

.gridimage5sky {
    grid-column: 6 / 8;
    grid-row: 32;
    width: 18vw;
    justify-self: center;
}

.gridimage6sky {
    grid-column: 9 / 11;
    grid-row: 32;
    width: 18vw;
    justify-self: center;
}




/*
    Type
*/

.aboutworktypography {
    font-family: "Roboto-Light";
    font-size: 14pt;
}

.goncalosantostypography {
    font-family: "Roboto-Regular";
    font-size: 14pt;
}

.projecttitlestypography {
    font-family: "RobotoMono-Light";
    font-size: 12pt;
}

.infotextstypography {
    font-family: "Roboto-Light";
    font-size: 12pt;
    line-height: 14pt;
}

.setas {
    font-family: "Roboto-Light";
    font-size: 64pt;
}

@font-face {
    font-family: "Roboto-Regular";
    src: url(fontes/Roboto-Regular.ttf);
}

@font-face {
    font-family: "Roboto-Light";
    src: url(fontes/Roboto-Light.ttf);
}

@font-face {
    font-family: "RobotoMono-Light";
    src: url(fontes/RobotoMono-Light.ttf);
}




/*
    Media Queries
*/

/*
    phone
*/

@media screen and (max-width: 480px) and (min-width: 320px){
    .gridbiglandingpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(37, 40px);
        grid-gap: 20px;
    }    
    
    .gridbigoxigenio {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(83, 40px);
        grid-gap: 20px;
    }
    
    .aboutworktypography {
        font-family: "Roboto-Light";
        font-size: 10pt;
    }
    
    .goncalosantostypography {
        font-family: "Roboto-Regular";
        font-size: 10pt;
    }
    
    .projecttitlestypography {
        font-family: "RobotoMono-Light";
        font-size: 8pt;
    }
    
    .infotextstypography {
        font-family: "Roboto-Light";
        font-size: 8pt;
        line-height: 10pt;
    }

    .image-size {
        width: 90vw;
    }
    
    .gridoxigenio {
        grid-column: span 10;
        grid-row: 2;
    }

    .gridjayz {
        grid-column: span 10;
        grid-row: 11;
    }
    
    .gridkanye {
        grid-column: span 10;
        grid-row: 20;
    }

    .gridsky {
        grid-column: span 10;
        grid-row: 29;
    }

    .gridtituloprojeto {
        grid-column: span 10;
        grid-row: 2;
    }

    .gridimage1oxigenio {
        grid-column: span 10;
        grid-row: 7;
        width: 90vw;
        justify-self: center;

    }
    
    .gridimage2oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 15;
        justify-self: center;
    }   
    
    .gridimage3oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 20;
        justify-self: center;
    } 
    
    .gridimage4oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 25;
        justify-self: center;
    } 
    
    .gridimage5oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 31;
        justify-self: center;
    }
    
    .gridimage6oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 45;
        justify-self: center;
    }
    
    .gridimage7oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 59;
        justify-self: center;
    }
    
    .gridimage8oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 73;
        justify-self: center;
    }
    
    .gridimage9oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 78;
        justify-self: center;
    }

    .gridbigjayz {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(56, 40px);
        grid-gap: 20px;
    }

    .gridtextoesquerdajayzkanyesky {
        grid-column: span 10;
        grid-row: 3 / 5;
    }
    
    .gridimage1jayz {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 11;
        justify-self: center;
    }   
    
    .gridimage3jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 17;
        justify-self: center;
    } 
    
    .gridimage4jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 23;
        justify-self: center;
    } 
    
    .gridimage5jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 29;
        justify-self: center;
    }
    
    .gridimage6jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 35;
        justify-self: center;
    }
    
    .gridimage7jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 45;
        justify-self: center;
        
    
    }

    .gridbigkanye {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(41, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1kanye {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 10;
        justify-self: center;
    }   
    
    .gridimage3kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 15;
        justify-self: center;
    } 
    
    .gridimage4kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 20;
        justify-self: center;
    } 
    
    .gridimage5kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 25;
        justify-self: center;
    }
    
    .gridimage6kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 30;
        justify-self: center;
    }
    
    .gridimage7kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 35;
        justify-self: center;
    }


    .gridbigsky {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(73, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1sky {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2sky {
        grid-column: span 10;
        grid-row: 13;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage3sky {
        grid-column: span 10;
        grid-row: 31;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage4sky {
        grid-column: span 10;
        grid-row: 45;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage5sky {
        grid-column: span 10;
        grid-row: 17;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage6sky {
        grid-column: span 10;
        grid-row: 59;
        width: 90vw;
        justify-self: center;
    }

    .setas {
        font-family: "Roboto-Light";
        font-size: 12pt;
    }

    .setasposicaooxidireita {
        grid-column: 6 / 7;
        grid-row: 83;
        justify-self: center;
    }
    
    .setasposicaojayzesquerda {
        grid-column: 5 / 6;
        grid-row: 56;
        justify-self: center;
    }
    
    .setasposicaojayzdireita {
        grid-column: 6 / 7;
        grid-row: 56;
        justify-self: center;
    }
    
    .setasposicaokanyeesquerda {
        grid-column: 5 / 6;
        grid-row: 41;
        justify-self: center;
    }
    
    .setasposicaokanyedireita {
        grid-column: 6 / 7;
        grid-row: 41;
        justify-self: center;
    }

    .setasposicaoskyesquerda {
        grid-column: 5 / 6;
        grid-row: 73;
        justify-self: center;
    }

    .gridbigaboutpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 40px);
        grid-gap: 20px;
    }
    
    .gridbio {
        grid-column: span 3;
        grid-row: 2;
    }
    
    .gridbiotext {
        grid-column: 1 / 8;
        grid-row: 3;
    }
    
    .grideducation {
        grid-column: span 3;
        grid-row: 7;
    }
    
    .grideducationtext {
        grid-column: span 3;
        grid-row: 8
    }
    
    .gridcontacts {
        grid-column: 10;
        grid-row: 3;
    }
    
    .contacts {
        display: flex;
        flex-direction: column;
    }

    
}





/*
    tablet
*/

@media screen and (max-width: 768px) and (min-width: 481px) {
    .gridbiglandingpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(45, 40px);
        grid-gap: 20px;
    }    
    
    .gridbigoxigenio {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(67, 40px);
        grid-gap: 20px;
    }
    
    .aboutworktypography {
        font-family: "Roboto-Light";
        font-size: 12pt;
    }
    
    .goncalosantostypography {
        font-family: "Roboto-Regular";
        font-size: 12pt;
    }
    
    .projecttitlestypography {
        font-family: "RobotoMono-Light";
        font-size: 10pt;
        line-height: 10pt;
        justify-self: start;
    }
    
    .infotextstypography {
        font-family: "Roboto-Light";
        font-size: 10pt;
        line-height: 12pt;
    }

    .image-size {
        width: 75vw;
    }
    
    .gridoxigenio {
        grid-column: span 8;
        grid-row: 2;
    }

    .gridjayz {
        grid-column: span 8;
        grid-row: 13;
    }
    
    .gridkanye {
        grid-column: span 8;
        grid-row: 24;
    }

    .gridsky {
        grid-column: span 8;
        grid-row: 35;

    }

    .gridtituloprojeto {
        grid-column: span 10;
        grid-row: 2
    }

    .gridimage1oxigenio {
        grid-column: span 10;
        grid-row: 6;
        width: 90vw;
    }
    
    .gridimage2oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 19;
        justify-self: center;
    }   
    
    .gridimage3oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 26;
        justify-self: center;
    } 
    
    .gridimage4oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 33;
        justify-self: center;
    } 
    
    .gridimage5oxigenio {
        grid-column: 1 / 4;
        width: 25vw;
        grid-row: 41;
        justify-self: center;
    }
    
    .gridimage6oxigenio {
        grid-column: 4 / 8;
        width: 25vw;
        grid-row: 41;
        justify-self: center;
    }
    
    .gridimage7oxigenio {
        grid-column: 8 / 11;
        width: 25vw;
        grid-row: 41;
        justify-self: center;
    }
    
    .gridimage8oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 49;
        justify-self: center;
    }
    
    .gridimage9oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 59;
        justify-self: center;
    }

    .gridbigjayz {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(55, 40px);
        grid-gap: 20px;
    }

    .gridtextoesquerdajayzkanyesky {
        grid-column: span 10;
        grid-row: 3 / 5;
    }
    
    .gridimage1jayz {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 14;
        justify-self: center;
    }   
    
    .gridimage3jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 14;
        justify-self: center;
    } 
    
    .gridimage4jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 18;
        justify-self: center;
    } 
    
    .gridimage5jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 18;
        justify-self: center;
    }
    
    .gridimage6jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 22;
        justify-self: center;
    }
    
    .gridimage7jayz {
        grid-column: span 10;
        width: 90vw;
        grid-row: 38;
        justify-self: center;
    }

    .gridbigkanye {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(61, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1kanye {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 13;
        justify-self: center;
    }   
    
    .gridimage3kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 21;
        justify-self: center;
    } 
    
    .gridimage4kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 29;
        justify-self: center;
    } 
    
    .gridimage5kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 37;
        justify-self: center;
    }
    
    .gridimage6kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 45;
        justify-self: center;
    }
    
    .gridimage7kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 53;
        justify-self: center;
    }

    .gridbigsky {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(74, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1sky {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2sky {
        grid-column: span 10;
        grid-row: 18;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage3sky {
        grid-column: 1 / 6;
        grid-row: 66;
        width: 30vw;
        justify-self: center;
    }
    
    .gridimage4sky {
        grid-column: span 10;
        grid-row: 24;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage5sky {
        grid-column: span 10;
        grid-row: 45;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage6sky {
        grid-column: 6 / 11;
        grid-row: 66;
        width: 30vw;
        justify-self: center;
    }

    .setas {
        font-family: "Roboto-Light";
        font-size: 18pt;
    }

    .setasposicaooxidireita {
        grid-column: 6 / 7;
        grid-row: 67;
        justify-self: center;
    }
    
    .setasposicaojayzesquerda {
        grid-column: 5 / 6;
        grid-row: 55;
        justify-self: center;
    }
    
    .setasposicaojayzdireita {
        grid-column: 6 / 7;
        grid-row: 55;
        justify-self: center;
    }
    
    .setasposicaokanyeesquerda {
        grid-column: 5 / 6;
        grid-row: 61;
        justify-self: center;
    }
    
    .setasposicaokanyedireita {
        grid-column: 6 / 7;
        grid-row: 61;
        justify-self: center;
    }

    .setasposicaoskyesquerda {
        grid-column: 5 / 6;
        grid-row: 74;
        justify-self: center;
    }

    .gridbigaboutpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 40px);
        grid-gap: 20px;
    }
    
    .gridbio {
        grid-column: span 3;
        grid-row: 2;
    }
    
    .gridbiotext {
        grid-column: 1 / 8;
        grid-row: 3;
    }
    
    .grideducation {
        grid-column: span 3;
        grid-row: 7;
    }
    
    .grideducationtext {
        grid-column: span 3;
        grid-row: 8;
    }
    
    .gridcontacts {
        grid-column: 10;
        grid-row: 3;
    }
    
    .contacts {
        display: flex;
        flex-direction: column;
    }
}



/*
    laptop
*/

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .gridbiglandingpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(58, 40px);
        grid-gap: 20px;
    }    
    
    .gridbigoxigenio {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(59, 40px);
        grid-gap: 20px;
    }
    
    .aboutworktypography {
        font-family: "Roboto-Light";
        font-size: 12pt;
    }
    
    .goncalosantostypography {
        font-family: "Roboto-Regular";
        font-size: 12pt;
    }
    
    .projecttitlestypography {
        font-family: "RobotoMono-Light";
        font-size: 10pt;
    }
    
    .infotextstypography {
        font-family: "Roboto-Light";
        font-size: 10pt;
        line-height: 12pt;
    }

    .image-size {
        width: 75vw;
    }
    
    .gridoxigenio {
        grid-column: span 8;
        grid-row: 2;
    }

    .gridjayz {
        grid-column: span 8;
        grid-row: 16;
    }
    
    .gridkanye {
        grid-column: span 8;
        grid-row: 30;
    }

    .gridsky {
        grid-column: span 8;
        grid-row: 44;
    }

    .gridtituloprojeto {
        grid-column: span 10;
        grid-row: 2
    }

    .gridimage1oxigenio {
        grid-column: span 6;
        grid-row: 5;
        width: 50vw;
    }
    
    .gridimage2oxigenio {
        grid-column: 7 / 11;
        width: 36vw;
        grid-row: 5;
        
    }   
    
    .gridimage3oxigenio {
        grid-column: 7 / 11;
        width: 36vw;
        grid-row: 9;
        
    } 
    
    .gridimage4oxigenio {
        grid-column: span 10;
        width: 90vw;
        grid-row: 15;
        justify-self: center;
    } 
    
    .gridimage5oxigenio {
        grid-column: 1 / 4;
        width: 25vw;
        grid-row: 26;
        justify-self: center;
    }
    
    .gridimage6oxigenio {
        grid-column: 4 / 8;
        width: 25vw;
        grid-row: 26;
        justify-self: center;
    }
    
    .gridimage7oxigenio {
        grid-column: 8 / 11;
        width: 25vw;
        grid-row: 26;
        justify-self: center;
    }
    
    .gridimage8oxigenio {
        grid-column: span 10;
        width: 95vw;
        grid-row: 36;
        justify-self: center;
    }
    
    .gridimage9oxigenio {
        grid-column: span 10;
        width: 95vw;
        grid-row: 48;
        justify-self: center;
    }

    .gridbigjayz {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(40, 40px);
        grid-gap: 20px;
    }

    .gridtextoesquerdajayzkanyesky {
        grid-column: 1 / 6;
        grid-row: 3 / 5;
    }
    
    .gridimage1jayz {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 17;
        justify-self: center;
    }   
    
    .gridimage3jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 17;
        justify-self: center;
    } 
    
    .gridimage4jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 23;
        justify-self: center;
    } 
    
    .gridimage5jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 23;
        justify-self: center;
    }
    
    .gridimage6jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 29;
        justify-self: center;
    }
    
    .gridimage7jayz {
        grid-column: span 5;
        width: 40vw;
        grid-row: 29;
        justify-self: center;
    }

    .gridbigkanye {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(30, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1kanye {
        grid-column: 1 / 6;
        grid-row: 5;
        width: 40vw;
        justify-self: center;
    }
    
    .gridimage2kanye {
        grid-column: 6 / 11;
        width: 40vw;
        grid-row: 5;
        justify-self: center;
    }   
    
    .gridimage3kanye {
        grid-column: 1 / 6;
        width: 40vw;
        grid-row: 10;
        justify-self: center;
    } 
    
    .gridimage4kanye {
        grid-column: 6 / 11;
        width: 40vw;
        grid-row: 10;
        justify-self: center;
    } 
    
    .gridimage5kanye {
        grid-column: 1 / 6;
        width: 40vw;
        grid-row: 15;
        justify-self: center;
    }
    
    .gridimage6kanye {
        grid-column: 6 / 11;
        width: 40vw;
        grid-row: 15;
        justify-self: center;
    }
    
    .gridimage7kanye {
        grid-column: span 10;
        width: 90vw;
        grid-row: 20;
        justify-self: center;
    }

    
    .gridbigsky {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(49, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1sky {
        grid-column: span 10;
        grid-row: 5;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage2sky {
        grid-column: span 10;
        grid-row: 21;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage3sky {
        grid-column: 1 / 6;
        grid-row: 39;
        width: 30vw;
        justify-self: center;
    }
    
    .gridimage4sky {
        grid-column: 1 / 6;
        grid-row: 29;
        width: 30vw;
        justify-self: center;
    }
    
    .gridimage5sky {
        grid-column: 6 / 11;
        grid-row: 29;
        width: 30vw;
        justify-self: center;
    }
    
    .gridimage6sky {
        grid-column: 6 / 11;
        grid-row: 39;
        width: 30vw;
        justify-self: center;
    }

    .setas {
        font-family: "Roboto-Light";
        font-size: 24pt;
    }

    .setasposicaooxidireita {
        grid-column: 6 / 7;
        grid-row: 59;
        justify-self: center;
    }
    
    .setasposicaojayzesquerda {
        grid-column: 5 / 6;
        grid-row: 40;
        justify-self: center;
    }
    
    .setasposicaojayzdireita {
        grid-column: 6 / 7;
        grid-row: 40;
        justify-self: center;
    }
    
    .setasposicaokanyeesquerda {
        grid-column: 5 / 6;
        grid-row: 30;
        justify-self: center;
    }
    
    .setasposicaokanyedireita {
        grid-column: 6 / 7;
        grid-row: 30;
        justify-self: center;
    }

    .setasposicaoskyesquerda {
        grid-column: 5 / 6;
        grid-row: 49;
        justify-self: center;
    }

    .gridbigaboutpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 40px);
        grid-gap: 20px;
    }
    
    .gridbio {
        grid-column: span 3;
        grid-row: 2;
    }
    
    .gridbiotext {
        grid-column: 1 / 8;
        grid-row: 3;
    }
    
    .grideducation {
        grid-column: span 3;
        grid-row: 6;
    }
    
    .grideducationtext {
        grid-column: span 3;
        grid-row: 7;
    }
    
    .gridcontacts {
        grid-column: 10;
        grid-row: 3;
    }
    
    .contacts {
        display: flex;
        flex-direction: column;
    }

}



/*
    desktop
*/

@media screen and (max-width: 1400px) and (min-width: 1025px){
    .gridbiglandingpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(45, 40px);
        grid-gap: 20px;
    }    
    
    .gridbigoxigenio {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(70, 40px);
        grid-gap: 20px;
    }

    .gridgoncalosantos {
        grid-column: 5 / 8;
        grid-row: 1;
    }
    
    .gridpteng {
        grid-column: 8 / 11;
        grid-row: 1;
        justify-self: right;
    }
    
    .aboutworktypography {
        font-family: "Roboto-Light";
        font-size: 14pt;
    }
    
    .goncalosantostypography {
        font-family: "Roboto-Regular";
        font-size: 14pt;
    }
    
    .projecttitlestypography {
        font-family: "RobotoMono-Light";
        font-size: 12pt;
    }
    
    .infotextstypography {
        font-family: "Roboto-Light";
        font-size: 12pt;
        line-height: 14pt;
    }

    .image-size {
        width: 40vw;
    }
    
    .gridoxigenio {
        grid-column: span 6;
        grid-row: 2;
    }

    .gridjayz {
        grid-column: span 6;
        grid-row: 13;
    }
    
    .gridkanye {
        grid-column: span 6;
        grid-row: 24;
    }

    .gridsky {
        grid-column: span 6;
        grid-row: 35;
    }

    .gridtextoesquerdajayzkanyesky {
        grid-column: 1 / 6;
        grid-row: 3 / 5;
    }

    .gridtituloprojeto {
        grid-column: span 10;
        grid-row: 2;
    }

    .gridimage1oxigenio {
        grid-column: 1 / 6;
        grid-row: 5;
        width: 50vw;
    }
    
    .gridimage2oxigenio {
        grid-column: 7 / 11;
        width: 30vw;
        grid-row: 5;
        justify-self: center;
    }   
    
    .gridimage3oxigenio {
        grid-column: 7 / 11;
        width: 30vw;
        grid-row: 10;
        justify-self: center;
    } 
    
    .gridimage4oxigenio {
        grid-column: span 10;
        width: 83vw;
        grid-row: 17;
        justify-self: center;
    } 
    
    .gridimage5oxigenio {
        grid-column: 1 / 4;
        width: 20vw;
        grid-row: 31;
        justify-self: center;
    }
    
    .gridimage6oxigenio {
        grid-column: 4 / 8;
        width: 20vw;
        grid-row: 31;
        justify-self: center;
    }
    
    .gridimage7oxigenio {
        grid-column: 8 / 10;
        width: 20vw;
        grid-row: 31;
        justify-self: center;
    }
    
    .gridimage8oxigenio {
        grid-column: span 10;
        width: 83vw;
        grid-row: 43;
        justify-self: center;
    }
    
    .gridimage9oxigenio {
        grid-column: span 10;
        width: 83vw;
        grid-row: 58;
        justify-self: center;
    }

    .gridbigjayz {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(33, 40px);
        grid-gap: 20px;
    }




    .gridbigkanye {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(28, 40px);
        grid-gap: 20px;
    }




    .gridbigsky {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(47, 40px);
        grid-gap: 20px;
    }
    
    .gridimage1sky {
        grid-column: span 6;
        grid-row: 5;
        width: 50vw;
        justify-self: center;
    }
    
    .gridimage2sky {
        grid-column: span 10;
        grid-row: 18;
        width: 90vw;
        justify-self: center;
    }
    
    .gridimage3sky {
        grid-column: 7 / 9;
        grid-row: 5;
        width: 18vw;
        justify-self: center;
    }
    
    .gridimage4sky {
        grid-column: 1 / 6;
        grid-row: 29;
        width: 40vw;
        justify-self: center;
    }
    
    .gridimage5sky {
        grid-column: 6 / 11;
        grid-row: 29;
        width: 40vw;
        justify-self: center;
    }
    
    .gridimage6sky {
        grid-column: 9 / 11;
        grid-row: 5;
        width: 18 vw;
        justify-self: center;
    }








    .setasposicaooxidireita {
        grid-column: 6 / 7;
        grid-row: 70;
        justify-self: center;
    }
    
    .setasposicaojayzesquerda {
        grid-column: 5 / 6;
        grid-row: 33;
        justify-self: center;
    }
    
    .setasposicaojayzdireita {
        grid-column: 6 / 7;
        grid-row: 33;
        justify-self: center;
    }
    
    .setasposicaokanyeesquerda {
        grid-column: 5 / 6;
        grid-row: 28;
        justify-self: center;
    }
    
    .setasposicaokanyedireita {
        grid-column: 6 / 7;
        grid-row: 28;
        justify-self: center;
    }

    .setasposicaoskyesquerda {
        grid-column: 5 / 6;
        grid-row: 47;
        justify-self: center;
    }

    .setas {
        font-family: "Roboto-Light";
        font-size: 36pt;
    }

    .gridbigaboutpage {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 40px);
        grid-gap: 20px;
    }
    
    .gridbio {
        grid-column: span 3;
        grid-row: 2;
    }
    
    .gridbiotext {
        grid-column: 1 / 8;
        grid-row: 3;
    }
    
    .grideducation {
        grid-column: span 3;
        grid-row: 6;
    }
    
    .grideducationtext {
        grid-column: span 3;
        grid-row: 7;
    }
    
    .gridcontacts {
        grid-column: 10;
        grid-row: 3;
    }
    
    .contacts {
        display: flex;
        flex-direction: column;
    }

}