*{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

:root{
    --cursor: url(../uploads/cursor.png), auto;
    --pointer: url(../uploads/pointer.png), auto;
}

/* comienzo del HEAD */

.head{
    width: 100%;
    height: 60px;
    background-color: rgb(236, 236, 236);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: row;
    cursor: var(--cursor);
    
}

.photoP{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(211, 211, 211);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 2px 2px 7px rgb(40, 112, 113), -2px -2px 7px rgb(138, 202, 208);
    cursor: var(--pointer);
}

.nameP{
    display: flex;
    align-items: left;
    justify-content: center;
    text-align: center;
    margin-left: 20px;
    flex-direction: column;
    width: calc(100% - 60px - 60px);
    /* font-family: 'Futura PT'; */
    font-family: 'Futura PT', 'Trebuchet MS', Arial, sans-serif;
}

.nameP h1{
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    font-size: 20px;
    color: rgb(0, 0, 0);
    margin: 0 0 -10px 0;
    padding: 0%;
    font-weight: bolder;
    text-transform: uppercase;
}

.nameP h4{
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    font-size: 12px;
    color: rgb(0, 0, 0);

    margin: -10px 0 0 0;
    padding: 0%;
}

.icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    visibility: 0.3;
    opacity: 0.3;
    
    cursor: var(--pointer);
}

/* FIN del HEAD */

.cont{
    width: 100%;
    height: calc(100dvh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgb(236, 236, 236);
    cursor: var(--cursor);
}

.cont .menu{
    width: 70px;
    height: 100%;
    background-color: rgb(236, 236, 236);
    border-top: 2px solid rgba(0, 229, 255, 0.672);
    cursor: var(--cursor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.cont .cpanel{
    width: calc(100% - 70px);
    height: 100%;
    background-color: rgb(226, 226, 226);
    box-shadow:  2px 2px 7px rgba(93, 93, 93, 0.25), -2px -2px 7px rgba(160, 160, 160, 0.25);
    border-radius: 8px;
    cursor: var(--cursor);
}

.m,.hm, .usr, .pj, .ph, .dwn, .conf, .crt{
    width: 40px;
    height: 40px;
    mix-blend-mode: multiply;
    cursor: var(--pointer);
}

.s{
    display: none;
    width: 0;
    height: 0;
}
.sl{
    display: none;
    width: 0;
    height: 0;
}


.sec{
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 180px);
}

.set{
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    flex-direction: column;
    width: 100%;
    height: 100px;
}

.dark{
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    flex-direction: column;
    width: 100%;
    height: 40px;
}

.hml, .usrl, .pjl, .phl, .dwnl,.confl, .crtl, .ml, .sl{
    font-size: 6px;
    color: rgb(0, 0, 0);
    margin: -20px 0 10px 0;
    opacity: 0;
}



.hovered{
    opacity: 0.9;
   
}


.d{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    flex-direction: column;
}