* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}




@font-face{
    font-family:lobster;
    src: url(tipos/Lobster/Lobster-Regular.ttf);
    }

@font-face {
     font-family:roboto;
    src: url(tipos/Roboto/Roboto-VariableFont_wdth\,wght.ttf);
    }

@font-face {
     font-family:robotoit;
    src: url(tipos/Roboto/Roboto-Italic-VariableFont_wdth\,wght.ttf);
    }


/*-----------------------------------------------------------*/


body{
    width:100%;

     background: url(imagens/1c9438c6c1f5b844a1f8095dddb5bdc4.gif);

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;


}




#nyancat{
    width: 150px;
    margin-left: 10px;

}

header{
    background: url(imagens/1841590_6f77d.gif);
    width:100%;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


nav{
    width: 120px;
    margin-right:60px;


    display: flex;
    justify-content:space-between   
}

#burger{
    display: none;
}


#butons{
    text-decoration: none;
    background-color: rgb(0, 255, 255);
    color: rgb(255, 96, 207);
    padding: 3px;
    font-family: lobster;
    width: 45px;

    margin: 10px;

}

#burger{
    margin-right: 20px;
    width: 55px;
}







#maxgreen{
    width: 100%;


    display: flex;
    justify-self: center;
}


#textogrande{
    margin: 50px;
    font-family: lobster;
    color: chartreuse;
    background-color: magenta;
    width: 200px;
}

#textopequeno1{
    margin: 50px;
    margin-top: 10px;
    margin-right: 600px;
    font-family: roboto;

    color: rgb(23, 240, 255);

    text-shadow:
        -0.5 -0.5px 0 blueviolet,
         0.5px -0.5px 0 blueviolet,
        -0.5px  0.5px 0 blueviolet,
         0.5px  0.5px 0 blueviolet;
      -webkit-text-stroke: 1px blueviolet;
}

#textopequeno2{
    margin: 50px;
    margin-top: 10px;
    margin-left: 600px;
    font-family: roboto;

    color: rgb(23, 240, 255);

    text-shadow:
        -0.5 -0.5px 0 blueviolet,
         0.5px -0.5px 0 blueviolet,
        -0.5px  0.5px 0 blueviolet,
         0.5px  0.5px 0 blueviolet;
      -webkit-text-stroke: 1px blueviolet;
}




#textogrande2{
    margin: 50px;
    font-family: lobster;
    color: chartreuse;
    background-color: magenta;
    width: 170px;

    display: flex;
    justify-self: center;

    display: none;

    
}



#textopequeno3{
    margin: 25px;
    margin-top: 10px;
    font-family: roboto;
    text-align: center;

    color: rgb(23, 240, 255);

    text-shadow:
        -0.5 -0.5px 0 blueviolet,
         0.5px -0.5px 0 blueviolet,
        -0.5px  0.5px 0 blueviolet,
         0.5px  0.5px 0 blueviolet;
      -webkit-text-stroke: 1px blueviolet;
}











#botaozao{
    width:100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

#clickhere{
    margin-right: 100px;
    margin-left: 150px;
    margin-bottom: 350px;


    font-size: 45px;


    color: greenyellow;
    background-color: magenta;

  border: 10px solid transparent;
  border-image: url(imagens/1841590_6f77d.gif) 30 stretch;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

#clickthere{
    margin-left: 100px;
}





#clicktheredois{
    margin-left: 20px;
    width: 170px;
}

#clickheredois{
    margin-right: 55px;
    margin-bottom: 155px;


    font-size: 22px;
    width: 154px;

    color: greenyellow;
    background-color: magenta;

  border: 6px solid transparent;
  border-image: url(imagens/1841590_6f77d.gif) 30 stretch;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}









footer{
  width: 100%;
  height: 200px;
  background: url(imagens/1841590_6f77d.gif);

  display: flex;
  align-items: center;
  flex-direction: column;
 

}

h2{
    color: aqua;
    background-color: rgb(255, 88, 216);

    height: 30px;
    margin-top: 30px;
    margin-bottom: 40px;
    width: 145px;
    
}

#social {
  display: flex;
  justify-content: space-between;
  width: 250px;
  margin-left: 100px;

}

.apps{
width: 50px;
}

h5{
    color: cornsilk;

    height: 30px;
    margin-top: 30px;
    margin-bottom: 40px;

    font-family: robotoit;

    display: flex;
    align-items: center;

}









#menumobile{
    background-color: rgb(66, 252, 255);
    transition:top .5s;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    top:-120;
    left:0;
}


#estrela{
    width: 90px;
    margin-top: 1px;

    display: flex;
    justify-content: center;

    justify-self: right;
}

#menubotoes{
    font-family: lobster;
    display: flex;
    justify-self: center;
    justify-content: center;


    font-size: 30px;
    width: 200px;

    text-decoration: none;

    margin-top: 30px;

    color: greenyellow;
    background-color: magenta;

  border: 6px solid transparent;
  border-image: url(imagens/1841590_6f77d.gif) 30 stretch;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);


}












.trezentossessenta{
    display: none;
}






/* --------------------------uhhh------------------------------- */

@media only screen and (max-width: 600px){
    
    #botoes{

        display: none;
    }

    #burger{
        display: block;
    
    }



    nav{
        display: none;
    }


    .trezentossessenta{
    display: block;
    }

    .milduzentos{
    display: none;
    }

     #textogrande2 {
        display: block;
    }

    
}


ul img ::before{
  position: relative;
}

ul img::after{
  position: absolute;

}

ul img:hover{
  transform: scale(1.1, 1.1);
}
