* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#inicial {
    height: 130vh;
}

#quem2 {
    height: 100vh;
}

#contato2 {
    height: 100vh;
}

#cadastro2 {
    height: 100vh;
}

#grade2 {
    height: 160vh;
}

#ped1 {
    height: 100vh;
}

#pgprod {
    height: 100vh;
}

#menu {
    display: flex;
    background-color: #CD0000;
    height: 150px;
    flex-direction: row;
}

#logo {
    height: 200px
}

#search {
    position: absolute;
    width: 40%;
    height: 7%;
    border: solid transparent;
    border-radius: 20px;
    outline: none;
    right: 600px;
    top: 40px;
}

#carro svg {
    width: 50px;
    position: absolute;
    right: 130px;
    top: 50px;
}

#lista {
    background-color: black;
    display: flex;
    width: 100%;
    height: 60px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 100px;
}

#galeria>a {
    text-decoration: none;
    color: white;
}

#quem>a {
    text-decoration: none;
    color: white;
}

#contato>a {
    text-decoration: none;
    color: white;
}

#cadastro>a {
    text-decoration: none;
    color: white;
}

#acaba {
    margin-top: 80px;
    font-size: 25px;
    margin-left: 42%;
}

#destaque {
    background-color: #CD0000;
    height: 400px;
    width: 92%;
    margin-top: 10px;
    margin-left: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 200px;
}

#death img {
    width: 240px;
}

#ring img {
    width: 210px;
}

#obscur img {
    width: 210px;
}

#death>p {
    background-color: #FF0000;
    width: 40px;
    height: 25px;
    margin-top: 0;
}

#ring>a {
    text-decoration: none;
    color: #000000;
}

#select>h2 {
    position: absolute;
    left: 92px;
}

#select>h3 {
    margin-left: 40px;
    margin-top: 30px;
}

#obscur>p {
    background-color: #FF0000;
    width: 40px;
    height: 25px;
    margin-top: 0;
}

#death {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 100%;
}

#death>p {
    position: absolute;
    left: 0;
    top: 0;
}

#ring {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 18%;
}

#ring>p {
    position: absolute;
    left: 0;
    top: 0;
}

#obscur {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 19%;
}

#obscur>p {
    position: absolute;
    left: 10px;
    top: 0;
}

#categoria {
    font-size: 20px;
    margin-top: 150px;
    margin-left: 800px;
}

#empresa {
    position: absolute;
    margin-top: 100px;
    width: 500px;
    left: 450px;
    align-self: center;
    display: flex;
    gap: 10px;
}

#xbox>img {
    width: 300px;
    height: 280px;
}

#play>img {
    width: 280px;
}

#nintendo>img {
    width: 280px;
}

#inicio {
    font-size: 20px;
    margin-top: 80px;
    margin-left: 800px;
    font-weight: 400;
}

#textos {
    display: flex;
    width: 600px;
    margin-top: 100px;
    margin-left: 580px;
    gap: 30px;
}

#cot {
    font-size: 20px;
    margin-left: 850px;
    margin-top: 20px;
}

#logos {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    margin-left: 600px;
}

#ins {
    width: 200px;
    height: 200px;
}

#twi {
    width: 200px;
    height: 200px;
}

#face {
    width: 200px;
    height: 200px;
}

#rede {
    margin-top: 80px;
    margin-left: 630px;
    font-size: 40px;
}

#cont2 {
    display: flex;
    margin-top: 100px;
    margin-left: 560px;
    gap: 20px;
    font-size: 20px;
}

#textoini {
    font-size: 30px;
    margin-top: 100px;
    margin-left: 750px;
}

#textos {
    display: flex;
    flex-direction: column;
}

#inemail {
    height: 30px;
}

#pass {
    height: 30px;
}

#textc {
    position: absolute;
    top: 48.5%;
    left: 420px;
}

#textd {
    position: absolute;
    top: 54%;
    left: 480px;
}

#registro {
    border: transparent;
    height: 50px;
    width: 200px;
    position: absolute;
    top: 65%;
    left: 780px;
    background-color: #CD0000;
}

#restext {
    position: absolute;
    left: 45px;
    top: 15px;
    text-decoration: none;
    color: black;
    font-size: 20px;
}

#marca {
    width: 1000px;
    background-color: #CD0000;
    height: 80px;
    margin-top: 40px;
    margin-left: 430px;
}

#nomes {
    display: flex;
    flex-direction: row;
    gap: 50px;
    margin-left: 350px;
    position: absolute;
    top: 275px;
}

#xb {
    text-decoration: none;
    color: black;
}

#ni {
    text-decoration: none;
    color: black;
}

#play {
    text-decoration: none;
    color: black;
}

#jogos {
    width: 1500px;
    height: 900px;
    margin-top: 50px;
    margin-left: 180px;
}

#pt1 {
    display: flex;
    flex-direction: row;
    gap: 100px;
    margin-left: 120px;
}

#elden {
    height: 400px;
}

#yakuza {
    height: 400px;
}

#red {
    height: 440px;
}

#text1 {
    position: absolute;
    left: 355px;
}

#text2 {
    position: absolute;
    left: 370px;
    top: 820px;
}

#text3 {
    position: absolute;
    left: 735px;
    top: 795px;
}

#text4 {
    position: absolute;
    top: 820px;
    left: 790px;
}

#text5 {
    position: absolute;
    left: 1220px;
}

#text6 {
    position: absolute;
    top: 850px;
    left: 1280px;
}

#pt2 {
    display: flex;
    flex-direction: row;
    gap: 200px;
    margin-left: 120px;
}

#banana {
    height: 400px;
    margin-top: 50px;
}

#mario {
    height: 400px;
    margin-top: 50px;
}

#last {
    height: 410px;
    margin-top: 60px;
}

#text7 {
    position: absolute;
    left: 330px;
}

#text8 {
    position: absolute;
    left: 340px;
    top: 1310px;
}

#text9 {
    position: absolute;
    left: 800px;
}

#text10 {
    position: absolute;
    top: 1310px;
    left: 790px;
}

#text11 {
    position: absolute;
    left: 1280px;
}

#text12 {
    position: absolute;
    top: 1325px;
    left: 1286px;
}

#bloco {
    
    width: 100%;
    margin-top: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    gap: 50px;
    margin-bottom: 50px;
}

#bloco>h1 {
    
}

#btt{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

#prods {
    
    display: flex;
    flex-direction: row;
    width: 600px;
    height: 100%;
    
}

#prod1 {
    width: 300px;
    border: #000000 solid;
}

#prod2 {
    width: 300px;
    border: #000000 solid;
}

#prod3 {
    width: 300px;
    border: #000000 solid;
}

#cont {
   
}

#fin {
    
    width: 190px;
}

#rip {
    position: absolute;
    left: 500px;
    top: 300px;
}

#rip>h1 {
    font-size: 30px;
}

#rip>h2 {
    position: absolute;
    left: 80px;
}

#rip>h3 {
    position: absolute;
    left: 70px;
    top: 450px;
}

#botoes {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 1100px;
    top: 320px;
    gap: 20px;
}

#botoes>a {
    border: #000000 solid;
    background-color: #CD0000;
    text-decoration: none;
    width: 200px;
    height: 100px;
    color: black;
    vertical-align: middle;
    font-size: 30px;
    align-content: center;
}

@media(max-width: 550px) {
    #destaque {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        height: 1500px;
    }
    #death {
        position: absolute;
        top: 120px;
    }
    #ring {
        position: absolute;
        top: 600px;
    }
    #obscur {
        position: absolute;
        top: 1120px;
    }
    #destaque p {
        opacity: 0;
    }
    #acaba {
        margin-left: 180px;
    }
    #categoria {
        position: absolute;
        left: 0;
        margin-left: 0;

    }
    #xbox>img {
        width: 150px;
        height: 150px;
    }
    #play>img {
        width: 150px;
        height: 150px;
    }
    #nintendo>img {
        width: 150px;
        height: 150px;
    }
    #empresa {
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: 0px;
        top: 2000px;
    }
    #empresa>div {
        width: 150px;
    }
    #bloco{
    left: 0;
    }
    #prods{
    flex-direction: column;
    height: 500px;
    width: 100px;
    left: 140px;
    }
    #prod1{
    height: 100px;
    }
    #prod2{
    height: 100px;
    }
    #prod3{
    height: 100px;
    }
    #bloco>h1{
    left: 0;
    top: 0;
    }
    #cont{
    left: -365px;
    top: 500px;
    }
    #fin{
    left: 195px;
    top: 650px;
    }
    #ped1{
    height: 100vh;
    }
    #inicio{
    margin-left: 220px;
    }
    #textos{
    margin-left: 30px;
    width: 500px;
    }
    #cot{
    margin-left: 240px;
    }
    #logos{
    margin-left: 170px;
    display: flex;
    flex-direction: column  ;
    }
    #rede{
    margin-left: 150px;
    font-size: 20px;
    }
    #cont2{
    margin-left: 110px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    }
    #textoini{
    margin-left: 150px;
    }
    #textc{
    margin-left: -200px;
    }
    #textd{
    margin-left: -220px;
    margin-top: 20px;
    }
    #registro{
    margin-left: -600px;
    }
    #rip{
    left: 130px;
    }
    #botoes{
    display: flex;
    flex-direction: column;
    left: 170px;
    top: 800px;
    }
}

@media (min-width: 550px) and (max-width: 1100px) {
#jogos{
margin-left: 0;
}
#pt1{
display: flex;
flex-direction: column;
}
#pt2{
flex-direction: column;
}
#elden{
position: absolute;
left: 50px;
top: 300px;
}
#text1{
position: absolute;
left: 120px;
top: 700px;
}
#text2{
position: absolute;
left: 130px;
top: 720px;
}
#yakuza{
position: absolute;
left: 50px;
top: 800px;
}
#text3{
position: absolute;
left: 70px;
top: 1200px;
}
#text4{
    position: absolute;
    left: 130px;
    top: 1230px;
}
#red{
position: absolute;
left: 0;
top: 1300px;
}
#text5{
    position: absolute;
    left: 80px;
    top: 1700px;
}
#text6{
    position: absolute;
    left: 150px;
    top: 1720px;
}
#banana{
position: absolute;
top: 1800px;
left: 100px;
}
#text7{
    position: absolute;
    left: 140px;
    top: 2250px;
}
#text8{
    position: absolute;
    left: 150px;
    top: 2280px;
}
#mario{
position: absolute;
top: 2300px;
left: 100px;
}
#text9{
    position: absolute;
    top: 2750px;
    left: 150px;
}
#text10{
    position: absolute;
    top: 2770px;
    left: 140px;
}
#last{
position: absolute;
top: 2800px;
left: 50px;
}
}

@media (max-width: 1100px){
#search{
position: absolute;
left: 350px;
}
#select>h2{
width: 300px;
position: absolute;
left: 50px;
top: 355px;
}
#select>h1{
position: absolute;
left: 0;
width: 300px;
}
#obscur{
margin-right: 30px;
}
#empresa{
left: 120px;
}
#nomes{
display: flex;
flex-direction: column;
position: absolute;
left: 140px;
align-items: center;
top: 400px;
}
#marca{
width: 200px;
height: 500px;
}
#text11{
opacity: 0;
}
#text12{
opacity: 0;
}
.quem{
position: absolute;
right: 200px;
}
#lll{
position: absolute;
right: 200px;
}
#eee{
position: absolute;
right: 200px;
}
#textc{
position: absolute;
top: 250px;
}
#textd{
position: absolute;
top: 310px;
}
#registro{
position: absolute;
top: 380px;
}
#bloco{
position: absolute;
left: 0;
display: flex;
justify-content: center;
width: 100%;
}
#btt{
    position: absolute;
top: 600px;
}
#rip{
position: absolute;
left: 100px;
}
#botoes{
position: absolute;
left: 700px;
}
}