body{
    overflow:hidden;
}
header{
    transition:0.3s;
}
.pcHeader{
    transition:0.3s;
    min-height:10vh;
    max-height:10vh;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    box-shadow:0px 6px 8px rgba(0, 0, 0, 0.2);
    position:relative;
    z-index:50;
}
.pcHeader p, .pcHeader div{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.pcHeader div{
    transition:0.3s;
    font-size:32px;
    font-family:'Poppins';
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    white-space:nowrap;
}
.pcHeader div p{
    font-size:15px;
    margin-top:-10px;
}
.pcHeader p{
    font-size:20px;
    font-family:'Roboto'
}
.mobileHeader{
    transition:0.3s;
    display:none;
    min-height:15vh;
    max-height:15vh;
    box-shadow:0px 6px 8px rgba(0, 0, 0, 0.2);
    z-index:50;
    flex-direction:column;
}
.tituloHeaderMOB{
    min-height:calc(15vh * 0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    font-family:'Poppins';
    font-size:28px;
    white-space:nowrap;
}
.tituloHeaderMOB hr{
    margin-top:3px;
    height:3px;
    width:100%;
}
.tituloHeaderMOB p{
    font-size:15px;
    margin-top:-10px;
}
.statsHeaderMOB{
    min-height:calc(15vh * 0.3);
    display:flex;
    justify-content:space-between;
    padding-left:15px;
    padding-right:15px;
    font-size:15px;
    font-family:'Roboto';
}
.sections{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
}
.section-1{
    height:85vh;
    background-color:rgb(221, 221, 221);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border:solid;
    border-left:rgba(0, 0, 0, 0);
    border-top:rgba(0, 0, 0, 0);
    border-bottom:rgba(0, 0, 0, 0);
    max-width:40vw;
}
.parteClicker{
    height:82vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.section-1 p{
    font-family:'Roboto';
}
.section-1 button{
    transition:0.2s;
    height:8vh;
    width:18vw;
    border:0;
    border-radius:9999px;
    cursor:pointer;
    font-size:15px;
    margin:10px;
}
.section-1 button:hover{
    transform:scale(1.1)
}
.section-1 button:active{
    transform:scale(0.9)
}
.section-2{
    background-color:rgb(211, 211, 216);
    width:60vw;
    min-height:85vh;
    max-height:85vh;
}
.section-2 h2{
    font-family:'Open Sans'
}
.listUpgrades{
    margin-top:20px;
    padding:15px;
    width:100%;
    background-color:rgb(201, 201, 201);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.upgrade{
    background-color:rgb(211, 211, 211);
    width:80%;
    padding:10px;
    display:flex;
    margin:10px;
    font-family:'Fira Sans'
}
.upgrade-1{
    width:80%;
}
.upgrade-2{
    width:120%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.upgrade-2 button{
    transition:0.2s;
    height:100%;
    width:140%;    
    border:0;
    border-radius:9999px;
    cursor:pointer;
    max-height:35px;
    max-width:200px;
}
.upgrade-2 button:hover{
    transform:scale(0.95);
}
.upgrade-2 button:active{
    transform:scale(1.05);
}
.buttonSell{
    transition:0.2s;
    margin-top:1vh;
    height:7vh;
    width:20vw;
    min-width:250px;
    min-height:50px;    
    border-radius:9999px;
    border:0;
    cursor:pointer;
}
.buttonSell:hover{
    transform:scale(1.1);
}
.buttonSell:active{
    transform:scale(0.9);
}
.tituloUpgrade{
    font-weight:bold;
}
.alertas{
    min-height:calc(5vh - 2.4px);
    max-height:calc(5vh - 2.4px);
    background-color:rgb(91, 91, 91);
    border:solid;
    border-bottom:none;
    border-left:none;
    border-right:none;
    text-align:center;
    font-size:0vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgb(255, 255, 255);
    border-color:black;
    font-family:'Roboto';
    font-weight:500;
    position:relative;
    z-index:50;
}
.botaoQuantias{
    margin-top:3vh;
    background-color:rgb(10, 15, 57);
    padding:5px;
    width:20%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow-x:auto;
    min-width:160px;
    min-height:40px;
}
.botaoQuantias button{
    height:30px;
    min-width:35px;
    width:35px;
    cursor:pointer;
    font-size:14px;
    margin:2px;
}
.itensSection-2{
    display:flex;
    align-items:center;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    padding:15px;
    max-height:100%;
}

@keyframes aparecer{
    0%{
        font-size:0vh;
    }
    100%{
        font-size:3vh;
    }
}
@keyframes sumir{
    0%{
        font-size:3vh;
    }
    100%{
        font-size:0vh;
    }
}
.editarSave{
    display:flex;
    align-items:end;
    justify-content:end;
}

@media(max-width:700px){
    .pcHeader{
        display:none;
    }
    .mobileHeader{
        display:flex;
    }
    .section-1, .section-2{
        max-height:80vh;
        min-height:80vh;
        height:80vh;
    }
    .itensSection-2{
        transform:scale(0.97)
    }

    body{
        overflow:auto;
        overflow-x:hidden;
    }

    .sections{
        display:flex;
        flex-direction:column;
    }
    .section-1{
        min-width:100vw;
        max-width:100vw;
        min-height:25vh;
        max-height:25vh;
    }
    .section-1 button{
        height:8vh;
        width:70vw;
        border-radius:9999px;
    }
    .section-1 p{
        font-size:14px;
    }

    .section-2{
        min-width:100vw;
        max-width:100vw;
        max-height:unset;
        min-height:fit-content;
    }
    .itensSection-2{
        max-height:unset;
        overflow:hidden;
    }
    .upgrade{
        width:95%;
    }
}