h1{text-align: center;
    font-family: monospace;
    color: #fff
}.janela{width:1000px;height:503px;box-sizing:border-box;
    top:50%;left:50%;overflow:hidden;margin: 0 auto 20px;
    backdrop-filter:blur(10px);transition:all 0.1s;
    color:#fff;resize:both;font-family:monospace;
    border-radius:8px;border:1px solid#555;
    font-size:16px;box-shadow:0 0 30px #0005;
    animation:entrada 0.3s ease-out;user-select:none
}.barra{color:#CCC;z-index:5;padding:12px;
    font-size:14px;position:absolute;font-family:monospace;
    background:linear-gradient(to bottom,#3339,#2229);
    box-shadow:0 0 25px #0005;overflow:hidden;
    top:0;left:0;right:0;text-align:center;
    padding-left:16px;white-space:nowrap
}.barra img{position:absolute;
    right:7px;margin-top:-4px;
    width:25px;height:25px
}.barra zzz{position:absolute;top:8px;
    right:45px;font-size:19px;
    cursor:pointer;color:#ddd
}bbb{width:12px;height:12px;
    position:relative;float:left;
    margin-top:4px;cursor:pointer;
    margin-right:7px;
    background:#FF5F57;border-radius:50%
}bbb::before,bbb::after{width:100%;height:100%;
    cursor:pointer;position:absolute;
    content:'';border-radius:50%
}bbb::before{background:#FECF1A;left:20px}
bbb::after{background:#46D755;left:40px}
.janela .lateral{position:absolute;
    background-color:#111a;
    padding:0;width:130px;
    top:41px;left:0;bottom:0
}.lateral img{
    width:100px;margin:15px
}.conteudo{position:absolute;
    width:calc(100% - 150px);
    padding:10px;overflow:auto;
    top:41px;bottom:0;right:0;
    scrollbar-width:thin;z-index:9;
    transition: all 0.5s ease;
    background-color:#333;
    scrollbar-color:#222#333
}#modalJJ{position:fixed;
    z-index:10;display:none;
    left:0;top:0;width:100%;
    height:100%;overflow:hidden;
    background-color:#0005
}#modalJJ .JJ{color:#fff;width:auto;
    margin:auto;padding:0px;
    border-radius:8px;font-size:16px;
    backdrop-filter:blur(10px);
    border:1px solid#555;
    box-sizing:border-box;overflow:hidden;
    animation:entradaPP 0.2s ease-out;
    box-shadow:0 0 30px #0005
}.JJ .barraA{top:0;left:0;right:0;text-align:center;
    font-size:14px;position:relative;font-family:monospace;
    background:linear-gradient(to bottom,#3335,#2225);
    box-shadow:0 0 25px #0005;overflow:hidden;
    color:#CCC;z-index:5;padding:12px;margin:0;
    padding-left:16px;white-space:nowrap
}.JJ .close{position:relative;float:left;
    margin-top:4px;cursor:pointer;
    width:12px;height:12px;margin-right:7px;
    background:#FF5F57;border-radius:50%
}.conteudoo{margin:0;padding:10px;background-color:#333}
.btn{text-decoration:none;
    display:inline-block;border-radius:4px;
    font-size:12px;padding:5px 20px 7px 20px;
    margin:6px 2px 6px 2px;text-align:center;
    cursor:pointer;transition: all 0.2s;color:#fffc;
    border:1px solid #fff5;background-color:#2225
}.btn:hover{border-color:#fff}
.conteudo a{text-decoration:none;color:#aaa;
    font-size:16px;transition:all 0.3s ease;
    font-family:monospace;position:relative
}.conteudo a:hover{color:#fff}.conteudo a::before{
    content:'';position:absolute;width:0%;height:4px;
    bottom:0;left:0;transition:width 0.1s ease;
    background:linear-gradient(to right,#888,#ccc)
}.conteudo a:hover::before{width:100%;cursor:pointer}
@keyframes entrada{0%{opacity:0;width:0px;height:42px}
50%{opacity:1;width:1000px;height:42px}100%{height:503px}}
@keyframes entradaPP{0%{opacity:0;width:0px}
100%{opacity:1;width:50%}}@media only screen and (max-width:1020px){
.janela{max-width:calc(100% - 20px);resize:none}}
#slink{position:absolute;top:5px;left:85px;
font-size:22px;cursor:pointer;color:#ddd}
.conteudo.expandido{width:calc(100% - 20px)}/*Janela-----------------------------------*/
z { min-width: 140px;
    width: 140px;
    height: 200px;
    padding: 0px;
    color: #fff;
    background: linear-gradient(to bottom, #444, #222);
    border: 1px solid #777;
    box-shadow: 0 0 10px #000;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    margin: 10px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    transition: all 0.1s ease;
    box-sizing: border-box
}z img{
    margin-top: 10px;
    width: 129px;
    height: 129px
}z h3{
    padding: 2px 0 0 0;
    margin-top: 5px;
    background: linear-gradient(to right, #111, #333, #111);
    border-top: 1px solid #777;
    box-shadow: 0 0 50px #000;
    height: 50px
}z p{
    color: #999;
    margin-top: -44px;
}z:hover{
    transform: scale(1.1);
    margin-top: 10px;
    background: linear-gradient(to bottom, #777, #333);
    border: 4px solid #fff
}

.modal-overlay{
    position:fixed;display:flex;
    top:0;left:0;z-index:9;
    width:100%;height:100%;
    background-color:#0005;
    justify-content:center;
    align-items:center
}

.modal-content{
    background-color:#333;
    padding:10px;width:100%;
    border-radius:8px;border:1px solid#555;
    animation:entradaPP 0.2s ease-out;
    max-width:400px;text-align: center
}

.modal-content button{
    margin:5px;border:none;
    padding:10px 20px;
    border-radius:5px;
    cursor:pointer;
}
.btnXX{position:relative;float:left;
    margin-top:4px;cursor:pointer;
    width:12px;height:12px;margin-right:7px;
    background:#FF5F57;border-radius:50%}
#modalCompartilhar .modal-content{
    max-width: 300px;
}
input{
    width: calc(100% - 25px);
    padding: 8px;
    margin-bottom: 10px;
    background-color: #0003;
    height: 27px;
    border: 1px solid #ddd8;
    border-radius: 4px;
    color: #fffc;
    font-size: 12px;
    margin: 6px 2px 6px 2px}
label{text-align: left;
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 16px;
    font-family: monospace
}*{outline:none}