body {box-sizing: border-box;
padding: 0;
margin: 0;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;}

.cabeca {display: flex;justify-content: space-between;}

.logo {width: 120px;
height: 120px;
margin-left: 5%;
cursor: pointer;}
#logo {position: absolute;
color: white;
top: 108px;
left: 10px;
cursor: pointer;}

.conteudo {display: flex;
    justify-content: space-between;
width: 30%;
height: 50%;
margin-top: 2%;
margin-right: 45%;}

.c1 {color: #FD8210;
    font-size: 20px;
text-decoration: none;}
.c2 {text-decoration: none;
color: white;
font-size: 20px;
z-index: 100;}
.c2:hover {color: #FD8210;
transition: 0.5s;}

.cont {
height: 2%;
position: absolute;
left: 85%;
top: 2.7%;}

.search {width: 25px;
height: 50px;
margin-right: 30px;}
.carrinho {width: 25px;
    height: 52px;
margin-right: 28px;}
.user {width: 25px;
     height: 50px;}

.branca {background-color: white;
width: 99.7%;
height: 65vh;
margin-top: 2%;
border: #FD8210 3px solid;
}

.desc {padding-top: 5.5%;
font-size: 100px;
margin-left: 10.5%;
color: #FD8210;}

.b2 {position: absolute;
top: 44%;
font-size: 45px;
line-height: 5px;
text-align: center;
left: 10.9%;}

.buy {width: 9%;
height: 4.5vh;
background-color: black;
color: white;
border: #FD8210 solid 1px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 16.8%;
margin-top: 5.5%;
cursor: pointer;}

.tenis {position: absolute;
top: 1px;
left: 45%;
height: 90%;
}

.ff {color: white;
width: 15%;
margin-left: 42.5%;}


.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    height: 100%;
    
}
    
.div1 {background-color: black;
    border: #FD8210 1px solid;
    grid-row: span 3 / span 3;
    color: white;
    cursor: pointer;
}
.div1:hover {background-color: #FD8210;
transition: 0.5s;}

.div2 {background-color: black;
    border: #FD8210 1px solid;
    grid-row: span 3 / span 3;
    color: white;
    cursor: pointer;
}
.div2:hover {background-color: #FD8210;
    transition: 0.5s;}

.div3 {background-color: black;
    border: #FD8210 1px solid;
    grid-row: span 3 / span 3;
    color: white;
    cursor: pointer;
}
.div3:hover {background-color: #FD8210;
    transition: 0.5s;}

.div4 {background-color: black;
    border: #FD8210 1px solid;
    grid-row: span 3 / span 3;
    color: white;
    cursor: pointer;
}
.div4:hover {background-color: #FD8210;

    transition: 0.5s;}

.div5 {background-color: black;
    border: #FD8210 1px solid; 
    grid-row: span 3 / span 3;
    color: white;
    cursor: pointer;
}
.div5:hover {background-color: #FD8210;

    transition: 0.5s;}

#white {height: 80%;
width: 100%;
background-color: white;}

.imgg {height: 100%;
width: 100%;}

.mmo {font-size: 30px;
line-height: 1px;}
        
.rodape {background-color: white;
border: #FD8210 solid 3px;
height: 30vh;
width: 99.7%;}

.bbloc {margin-left: 2.2%;
font-size: 22px;}

.bbloc2 {height: 3vh;
    width: 20%;
background-color: black;
margin-left: 2%;
display: flex;
justify-content: end;
cursor: text;
border: #FD8210 solid 2px;
}

.sbsc {margin-top: 6px;
margin-right: 6px;}

.inscrever {width: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
background-color: #FD8210;
border-radius: 8px;
height: 12%;
margin-left: 2%;
margin-top: 1%;
cursor: pointer;}

.lor {margin-left: 2%;
margin-top: 2%;}

.icones {
display: flex;
position: absolute;
width: 30%;
justify-content: space-around;
left: 55%;
top: 190%;
}

#icon {width: 10%;
height: 10%;
cursor: pointer;}