@import"https://fonts.cdnfonts.com/css/intro-black";* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --h1: #f2faff;
    --h1-glow: #97a6fe8a;
    --content: rgba(30, 36, 44, 0.6);
    --content2: #13151e;
    --content3: #13151e;
    --news--gradient: #34ace4;
    --news--gradient2: #1058aa;
    --online: #65bc1f;
    --offline: #c62e3b;
    --body: #020307;
    --footer: #020307;
}

body {
    background: url(../../img/pwci/bg/1.jpg) top/contain no-repeat;
    background-color: var(--body)
}

h1 {
    color: var(--h1);
    font-weight: 400;
    font-family: america
}

p {
    text-transform: none
}

li {
    list-style: none
}

a {
    text-decoration: none
}

nav {
    position: fixed;
    z-index: 1002;
    top: 0;
    width: 150vh;
    margin: 0 auto;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    height: 8vh;
    justify-content: space-between;
    align-items: center;
    display: flex;
    transition: .5s
}

nav.scrolled {
    width: 100%;
    background-color: rgba(0,0,0,.781);
    padding-right: 2.5vh
}

nav .mobile {
    display: none
}

nav ul:nth-child(1) {
    height: 100%;
    display: flex;
    align-items: center
}

nav ul:nth-child(1) li:nth-child(1) {
    margin: 0
}

nav ul:nth-child(1) li {
    font-family: america;
    text-transform: uppercase;
    font-size: 1.5vh;
    margin: 0 2.1vh;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center
}

nav ul:nth-child(1) li div {
    width: 200%;
    border: .2vh solid rgba(126,88,58,.564);
    border-top: .2vh solid #be965f;
    box-shadow: 0 2vh 3vh rgba(0,0,0,.384);
    position: absolute;
    border-radius: 1vh;
    transition: .5s;
    padding: 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--content3);
    top: 80%;
    z-index: 1;
    opacity: 0;
    pointer-events: none
}

nav ul:nth-child(1) li div::before {
    content: "";
    width: 1.2vh;
    transform: rotate(45deg);
    height: 1.2vh;
    background-color: var(--content3);
    border-top: .2vh solid #be965f;
    border-left: .2vh solid #be965f;
    position: absolute;
    top: -.7vh
}

nav ul:nth-child(1) li div a:not(:last-child) {
    margin-bottom: 2vh
}

nav ul:nth-child(1) li div a {
    font-family: intro;
    color: gray!important;
    font-size: 1.6vh;
    transition: .5s;
    text-transform: none;
    text-align: center;
    text-shadow: none!important
}

nav ul:nth-child(1) li div a:hover {
    color: #fff!important;
    text-shadow: none!important
}

nav ul:nth-child(1) li.active a {
    color: #b75fe2;
}

nav ul:nth-child(1) li:hover a {
    color: #ffcb58;
    text-shadow: 0 0 2vh #ffcb58
}

nav ul:nth-child(1) li:hover div {
    top: 100%;
    opacity: 1;
    pointer-events: all
}

nav ul:nth-child(1) li a {
    color: #dbcdcc;
    transition: .5s;
    cursor: pointer
}

nav ul:nth-child(1) li img {
    width: 8.5vh;
    position: relative;
    top: 0
}

nav ul:nth-child(2) {
    display: flex;
    align-items: center;
    height: 100%
}

nav ul:nth-child(2) li:nth-child(1) {
    position: relative;
    margin-right: 4vh;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer
}

nav ul:nth-child(2) li:nth-child(1):hover div {
    opacity: 1;
    top: 80%;
    pointer-events: all
}

nav ul:nth-child(2) li:nth-child(1):hover span img:nth-child(2) {
    transform: rotate(180deg)
}

nav ul:nth-child(2) li:nth-child(1) span {
    display: flex;
    align-items: center;
    position: relative
}

nav ul:nth-child(2) li:nth-child(1) span img:Nth-child(1) {
    width: 2.8vh
}

nav ul:nth-child(2) li:nth-child(1) span img:nth-child(2) {
    width: 1.2vh;
    margin-left: 1vh;
    transition: .5s
}

nav ul:nth-child(2) li:nth-child(1) div {
    position: absolute;
    top: 60%;
    opacity: 0;
    pointer-events: none;
    transition: .5s
}

nav ul:nth-child(2) li:nth-child(1) div a img {
    width: 2.8vh
}

nav ul:nth-child(2) .logged {
    width: 20vh!important;
    margin-right: .5vh!important
}

nav ul:nth-child(2) .logged:hover a {
    text-shadow: 0 0 1vh var(--h1)
}

nav ul:nth-child(2) .logged:hover div {
    opacity: 1;
    pointer-events: all;
    top: 100%
}

nav ul:nth-child(2) .logged a {
    color: #fff;
    font-size: 1.6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: america;
    cursor: pointer;
    transition: .5s
}

nav ul:nth-child(2) .logged a img {
    border-radius: 100%;
    width: 4vh;
    border: .2vh solid #be965f;
    margin-left: 1.2vh
}

nav ul:nth-child(2) .logged div {
    width: 120%;
    border: .2vh solid rgba(126,88,58,.564);
    border-top: .2vh solid #be965f;
    box-shadow: 0 2vh 3vh rgba(0,0,0,.384);
    position: absolute;
    border-radius: 1vh;
    transition: .5s;
    padding: 3.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--content3);
    top: 80%;
    opacity: 0;
    pointer-events: none
}

nav ul:nth-child(2) .logged div::before {
    content: "";
    width: 1.2vh;
    transform: rotate(45deg);
    height: 1.2vh;
    background-color: var(--content3);
    border-top: .2vh solid #be965f;
    border-left: .2vh solid #be965f;
    position: absolute;
    top: -.7vh
}

nav ul:nth-child(2) .logged div a:not(:last-child) {
    margin-bottom: 2vh
}

nav ul:nth-child(2) .logged div a {
    font-family: intro;
    color: gray!important;
    font-size: 1.6vh;
    transition: .5s;
    text-transform: none;
    text-align: center;
    text-shadow: none!important
}

nav ul:nth-child(2) .logged div a:hover {
    color: #fff!important;
    text-shadow: none!important
}

nav ul:nth-child(2) li:nth-child(2) {
    width: 23vh;
    margin-right: 3vh;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center
}

nav ul:nth-child(2) li:nth-child(2):hover .user {
    text-shadow: 0 0 3vh #fff;
    color: #fff;
    filter: brightness(120%)
}

nav ul:nth-child(2) li:nth-child(2):hover .user p {
    transform: scale(1.1)
}

nav ul:nth-child(2) li:nth-child(2):hover form {
    top: 101%;
    opacity: 1;
    pointer-events: all
}

nav ul:nth-child(2) li:nth-child(2) form {
    width: 130%;
    border: .2vh solid rgba(126,88,58,.564);
    border-top: .2vh solid #be965f;
    box-shadow: 0 2vh 3vh rgba(0,0,0,.384);
    position: absolute;
    border-radius: 1vh;
    top: 80%;
    opacity: 0;
    pointer-events: none;
    transition: .5s;
    padding: 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--content3)
}

nav ul:nth-child(2) li:nth-child(2) form::before {
    content: "";
    width: 1.2vh;
    transform: rotate(45deg);
    height: 1.2vh;
    background-color: var(--content3);
    border-top: .2vh solid #be965f;
    border-left: .2vh solid #be965f;
    position: absolute;
    top: -.7vh
}

nav ul:nth-child(2) li:nth-child(2) form p {
    color: var(--h1);
    font-family: america;
    font-size: 2vh;
    margin-bottom: 2.1vh;
    text-transform: uppercase
}

nav ul:nth-child(2) li:nth-child(2) form input {
    width: 100%;
    height: 5vh;
    padding: 0 2vh;
    border-radius: .4vh;
    margin-bottom: 1.2vh;
    font-size: 1.5vh;
    color: #fff!important;
    font-family: intro;
    background-color: rgba(66,48,33,.564);
    border: none;
    border: .2vh solid rgba(121,85,57,.564);
    outline: none;
    transition: .5s
}

nav ul:nth-child(2) li:nth-child(2) form input:focus {
    color: #fff;
    border-color: rgba(151,110,80,.875);
    box-shadow: inset 0 0 2vh rgba(126,88,58,.564)
}

nav ul:nth-child(2) li:nth-child(2) form span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2vh;
    margin-top: 1vh;
    cursor: pointer
}

nav ul:nth-child(2) li:nth-child(2) form span label {
    color: #fff;
    font-family: intro;
    margin-left: 1vh;
    cursor: pointer;
    font-size: 1.5vh
}

nav ul:nth-child(2) li:nth-child(2) form #checkbox {
    appearance: none;
    cursor: pointer;
    width: 2vh!important;
    padding: 0;
    height: 2vh!important;
    background-color: rgba(66,48,33,.564);
    border-radius: 100%;
    margin-bottom: 0;
    outline: none!important
}

nav ul:nth-child(2) li:nth-child(2) form #checkbox:checked {
    border: .6vh solid #312317;
    background-color: orange;
    box-shadow: 0 0 .4vh orange
}

nav ul:nth-child(2) li:nth-child(2) form button {
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    height: 4vh;
    color: #fff;
    font-size: 1.8vh;
    text-transform: uppercase;
    font-family: america;
    background-color: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2vh;
    transition: .5s
}

nav ul:nth-child(2) li:nth-child(2) form button:hover {
    filter: brightness(120%)
}

nav ul:nth-child(2) li:nth-child(2) form button span {
    position: relative;
    z-index: 1;
    margin: 0
}

nav ul:nth-child(2) li:nth-child(2) form button::before {
    content: "";
    position: absolute;
    width: 110%;
    height: 5vh;
    background: url(../../img/pwci/nav/button.png) top/cover no-repeat
}

nav ul:nth-child(2) li:nth-child(2) form a {
    font-family: intro;
    color: gray;
    font-size: 1.6vh;
    transition: .5s
}

nav ul:nth-child(2) li:nth-child(2) form a:hover {
    color: #fff
}

nav ul:nth-child(2) li:nth-child(2) .user {
    color: var(--h1);
    font-size: 1.4vh;
    width: 100%;
    cursor: pointer;
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: america;
    transition: .5s
}

nav ul:nth-child(2) li:nth-child(2) .user p {
    transition: .5s;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

nav ul:nth-child(2) li:nth-child(2) .user::before {
    content: "";
    width: 110%;
    height: 6.9vh;
    background: url(../../img/pwci/nav/button.png) top/cover no-repeat;
    position: absolute;
    top: -.7vh
}

.effect {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 1001
}

.effect div {
    position: absolute;
    pointer-events: none!important
}

.effect div:nth-child(2) {
    animation: fly 20s infinite linear;
    transform: rotate(-20deg)
}

.effect div:nth-child(2) img {
    width: 250vh
}

.effect div:nth-child(3) {
    animation: fly 20s 10s infinite linear;
    transform: rotate(-20deg);
    opacity: 0
}

.effect div:nth-child(3) img {
    width: 250vh
}

.effect div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: levitate 5s infinite linear
}

.effect div:nth-child(1) img {
    width: 190vh;
    pointer-events: none
}

@keyframes levitate {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2vh)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes fly {
    0% {
        opacity: 0;
        left: -20%;
        top: 0%
    }

    10% {
        opacity: 1
    }

    90% {
        left: 0%;
        top: -90%
    }

    100% {
        left: 0%;
        top: -100%;
        opacity: 0
    }
}

header {
    width: 131vh;
    margin: 0 auto;
    text-align: center;
    padding-top: 2vh
}

header div:nth-child(1) {
    position: relative;
    top: 8.3vh
}

header div:nth-child(1) img {
    width: 58vh
}

header h1 {
    font-size: 4.8vh;
    letter-spacing: .2vh;
    margin-top: 2vh;
    line-height: 5vh;
    text-shadow: 0 0 2vh var(--h1-glow);
    text-transform: uppercase
}

header p {
    color: #fff;
    font-size: 1.8vh;
    width: 60%;
    margin: 0 auto;
    margin-top: 1vh;
    font-family: intro;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

header a {
    width: 40vh;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    margin-top: 3.5vh;
    height: 8.2vh;
    color: var(--h1);
    font-family: america;
    text-transform: uppercase;
    font-size: 2.5vh;
    position: relative;
    border-radius: 2vh;
    box-shadow: 0 2vh 3vh rgba(0,0,0,.627);
    transition: .5s
}

header a:hover {
    text-shadow: 0 0 3vh #fff;
    color: #fff;
    filter: brightness(120%)
}

header a:hover span {
    transform: scale(1.1)
}

header a span {
    position: relative;
    z-index: 1;
    transition: .5s
}

/* Remova ou comente esta regra */
/*
header a::before {
  content: "";
  position: absolute;
  top: -.5vh;
  width: 110%;
  background: url(../../img/pwci/header/button.png) top/cover no-repeat;
  height: 9vh;
}
*/

/* Adicione esta nova regra para o botão do Discord */
.discord-button-before::before {
    content: "";
    position: absolute;
    top: -.5vh;
    width: 110%;
    background: url(../../img/pwci/header/button.png) top/cover no-repeat;
    height: 9vh;
  }

main {
    width: 130vh;
    margin: 0 auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-top: 10vh
}

main .left {
    width: 60.9%;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vh
}

main .left .news {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vh
}

main .left .news div {
    background-color: rgba(255,255,255,.107);
    border-radius: 1.8vh;
    position: relative
}

main .left .news div span:nth-child(1) {
    position: absolute;
    top: -1.2vh;
    right: 2.8vh;
    height: 9.2vh;
    border-radius: 1.2vh;
    width: 7.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--news--gradient2),var(--news--gradient))
}

main .left .news div span:nth-child(1) p {
    text-align: center;
    color: #fff;
    font-family: america;
    font-size: 1.6vh
}

main .left .news div span:nth-child(1) p strong {
    color: #fff;
    font-size: 3.5vh;
    font-weight: 400
}

main .left .news div span:nth-child(2) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: end;
    flex-direction: column;
    padding: 3.5vh;
    position: relative;
    overflow: hidden;
    border-radius: 1.8vh
}

main .left .news div span:nth-child(2)::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url(../../img/pwci/news/shadow.png) top/cover no-repeat;
    position: absolute;
    opacity: .9;
    left: 0;
    top: 0
}

main .left .news div span:nth-child(2) h1 {
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-family: poppins;
    -webkit-box-orient: vertical;
    text-transform: uppercase;
    margin-bottom: 1.3vh
}

main .left .news div span:nth-child(2) p {
    z-index: 1;
    font-family: intro;
    color: #c6c4c5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 2.2vh;
    font-size: 1.6vh;
    line-height: 2.2vh
}

main .left .news div span:nth-child(2) a {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: america;
    text-transform: uppercase;
    font-size: 1.6vh;
    color: #fff;
    background: linear-gradient(var(--news--gradient2),var(--news--gradient));
    border-radius: 1.1vh;
    transition: .5s
}

main .left .news div span:nth-child(2) a:hover {
    filter: brightness(120%)
}

main .left .news div:nth-child(1) {
    width: 100%;
    height: 35vh
}

main .left .news div:nth-child(1) h1 {
    font-size: 3vh;
    letter-spacing: .2vh
}

main .left .news div:nth-child(1) p {
    width: 80%
}

main .left .news div:nth-child(1) a {
    width: 21vh;
    height: 5.2vh
}

main .left .news div:nth-child(2) {
    width: 48.3%;
    height: 35vh
}

main .left .news div:nth-child(2) a {
    width: 18vh;
    height: 5vh
}

main .left .news div:nth-child(2) h1 {
    font-size: 2.5vh;
    margin-bottom: .5vh!important
}

main .left .news div:nth-child(3) {
    width: 48.3%
}

main .left .news div:nth-child(3) a {
    width: 18vh;
    height: 5vh
}

main .left .news div:nth-child(3) h1 {
    font-size: 2.5vh;
    margin-bottom: .5vh!important
}

main .left .more {
    width: 100%;
    display: flex;
    height: 6vh
}

main .left .more a {
    font-family: poppins;
    color: #6f7384;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    text-transform: uppercase;
    font-size: 2vh;
    background-color: var(--content2);
    border-radius: 1.2vh;
    transition: .5s
}

main .left .more a:hover {
    color: #fff
}

main .right {
    width: 47.1vh
}

main .right .status {
    background-color: var(--content);
    padding: 3vh;
    display: flex;
    height: 12.5vh;
    border-radius: 1.2vh;
    position: relative
}

main .right .status .online {
    position: absolute;
    top: 3.2vh;
    right: 3.2vh;
    color: #fff;
    font-family: intro;
    text-transform: uppercase;
    font-size: 1vh;
    padding: .3vh 1.2vh;
    border-radius: 4vh;
    background-color: var(--online)
}

main .right .status span:nth-child(1) {
    height: 100%;
    display: flex;
    align-items: center
}

main .right .status span:nth-child(1) img {
    width: 7vh
}

main .right .status span:nth-child(2) {
    margin-left: 2vh
}

main .right .status span:nth-child(2) p:nth-child(1) {
    color: #fff;
    font-size: 2.1vh;
    text-transform: uppercase;
    font-family: poppins;
    letter-spacing: .2vh
}

main .right .status span:nth-child(2) p:nth-child(2) {
    color: #fff;
    font-size: 1.1vh;
    margin-top: .3vh;
    margin-bottom: 1vh;
    font-family: intro;
    text-transform: uppercase
}

main .right .status span:nth-child(2) p:nth-child(2) strong {
    color: var(--h1);
    font-weight: 400
}

main .right .status span:nth-child(2) div {
    display: flex
}

main .right .status span:nth-child(2) div p {
    font-family: intro regular!important;
    font-size: 1.2vh!important;
    letter-spacing: 0!important;
    color: #7e7975!important;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0!important;
    margin-bottom: 0!important;
    margin-right: 2vh
}

main .right .status span:nth-child(2) div p strong {
    color: var(--online)!important
}

main .right .gm {
    margin-top: 3.4vh
}

main .right .gm h1 {
    font-size: 2.7vh;
    letter-spacing: 0;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 1.8vh
}

main .right .gm ul li:not(:last-child) {
    margin-bottom: .5vh
}

main .right .gm ul li {
    padding: 3vh;
    background-color: var(--content3);
    height: 8.5vh;
    border-radius: 1.3vh;
    display: flex;
    align-items: center;
    justify-content: space-between
}

main .right .gm ul li div:nth-child(1) {
    display: flex;
    align-items: center;
    color: #fff;
    font-family: poppins;
    font-size: 1.7vh
}

main .right .gm ul li div:nth-child(1) span {
    width: 5vh;
    height: 5vh;
    border-radius: 100%;
    margin-right: 2.1vh
}

main .right .gm ul li .online {
    color: #fff;
    font-family: intro;
    text-transform: uppercase;
    font-size: 1vh;
    padding: .3vh 1.3vh;
    border-radius: 4vh;
    background-color: var(--online)
}

main .right .gm ul li .offline {
    color: #fff;
    font-family: intro;
    text-transform: uppercase;
    font-size: 1vh;
    padding: .3vh 1.3vh;
    border-radius: 4vh;
    background-color: var(--offline)
}

main .right .categories {
    margin-top: 3.5vh
}

main .right .categories h1 {
    font-size: 2.7vh;
    letter-spacing: 0;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 1.8vh
}

main .right .categories ul {
    padding: 2.5vh 2.6vh 1vh 2.5vh;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--content3);
    border-radius: 1.2vh
}

main .right .categories ul li {
    width: 50%;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 1.5vh
}

main .right .categories ul li a {
    font-family: intro;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 1.4vh;
    color: #ac9c9c;
    transition: .5s
}

main .right .categories ul li a:hover {
    color: #fff
}

main .right .categories ul li span {
    width: 2.2vh;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .9vh
}

main .right .categories ul li span img {
    width: 1.5vh
}

.social {
    position: relative;
    overflow: hidden; /* Adicione isso para garantir que o background não vaze se ajustarmos a altura */
  }
  
  .social .bg {
    position: absolute;
    top: 0; /* Ancoramos o topo do background ao topo da seção */
    left: 0; /* Ancoramos a esquerda ao início da seção */
    width: 100%;
    height: 100%; /* Faz o background ter 100% da altura da seção */
    z-index: -1;
  }
  
  .social .bg img {
    width: 100%;
    height: 100%; /* Garante que a imagem do background preencha o container .bg */
    object-fit: cover; /* Mantém a proporção da imagem e cobre todo o espaço, pode cortar um pouco */
  }
  
  .social .content {
    width: 131vh;
    margin: 0 auto;
    text-align: center;
    padding-top: 12.5vh;
    padding-bottom: 13.7vh;
    position: relative; /* Mantemos para o posicionamento dos elementos internos */
  }

.social .content h1 {
    text-transform: uppercase;
    font-size: 5vh;
    font-family: poppins;
    line-height: 5vh
}

.social .content p {
    font-size: 1.6vh;
    color: #bab9b8;
    font-family: intro;
    width: 70%;
    margin: 0 auto;
    margin-top: 3.5vh
}

.social .content div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2vh
}

.social .content div a:nth-child(1):before {
    background: url(../../img/pwci/social/1.png) top/cover no-repeat
}

.social .content div a:nth-child(2):before {
    background: url(../../img/pwci/social/2.png) top/cover no-repeat
}

.social .content div a:nth-child(3):before {
    background: url(../../img/pwci/social/3.png) top/cover no-repeat
}

.social .content div a {
    margin: 0 2vh;
    width: 40vh;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    margin-top: 3.5vh;
    height: 8.2vh;
    color: #fff;
    font-family: america;
    text-transform: uppercase;
    font-size: 2.5vh;
    position: relative;
    border-radius: 2vh;
    box-shadow: 0 2vh 3vh rgba(0,0,0,.627);
    transition: .5s
}

.social .content div a:hover {
    text-shadow: 0 0 3vh #fff;
    color: #fff;
    filter: brightness(120%)
}

.social .content div a:hover span {
    transform: scale(1.1)
}

.social .content div a span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    transition: .5s
}

.social .content div a span i {
    font-size: 3vh;
    margin-right: 2vh
}

.social .content div a::before {
    content: "";
    position: absolute;
    top: -.5vh;
    width: 110%;
    height: 9vh
}

footer {
    background-color: #020d2d;
}

footer .content {
    padding: 5.7vh 0;
    width: 133.5vh;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: start
}

footer .content div:nth-child(2) {
    display: flex
}

footer .content div:nth-child(2) ul {
    margin-left: 10vh
}

footer .content div:nth-child(2) ul h1 {
    font-size: 1.4vh;
    font-family: poppins;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: .9vh
}

footer .content div:nth-child(2) ul li {
    margin-bottom: .4vh
}

footer .content div:nth-child(2) ul li a {
    font-size: 1.2vh;
    color: #7e7975;
    font-family: intro;
    text-transform: uppercase;
    transition: .5s
}

footer .content div:nth-child(2) ul li a:hover {
    color: #fff
}

footer .content div:nth-child(1) {
    display: flex;
    align-items: start
}

footer .content div:nth-child(1) span:nth-child(1) {
    display: flex;
    align-items: start
}

footer .content div:nth-child(1) span:nth-child(1) img {
    width: 22vh;
    position: relative;
    top: -3.5vh
}

footer .content div:nth-child(1) span:nth-child(2) {
    margin-left: 2.7vh
}

footer .content div:nth-child(1) span:nth-child(2) a {
    display: inline-flex;
    align-items: center;
    margin-top: 3.2vh
}

footer .content div:nth-child(1) span:nth-child(2) a:hover img {
    transform: rotate(360deg)
}

footer .content div:nth-child(1) span:nth-child(2) a:hover p {
    color: #fff!important
}

footer .content div:nth-child(1) span:nth-child(2) a img {
    width: 3vh;
    margin-bottom: 0;
    transition: .5s
}

footer .content div:nth-child(1) span:nth-child(2) a p {
    margin-top: 0!important;
    transition: .5s;
    margin-left: 1vh
}

footer .content div:nth-child(1) span:nth-child(2) p:nth-child(1) {
    color: var(--h1);
    font-family: america;
    font-size: 1.4vh;
    text-transform: uppercase;
    font-weight: 400
}

footer .content div:nth-child(1) span:nth-child(2) p:nth-child(2) {
    font-size: 1vh;
    font-family: intro;
    text-transform: uppercase;
    color: #7e7975;
    margin-top: 1.4vh
}

.article {
    overflow: hidden;
    width: 100%
}

.article .img {
    overflow: hidden;
    height: 26.2vh;
    width: 100%;
    background-color: #fff;
    border-radius: 1vh;
    margin-bottom: 3.5vh
}

.article h1 {
    font-size: 2.5vh;
    text-transform: uppercase;
    margin-bottom: 2vh
}

.article .share a:not(:last-child) {
    margin-right: 1.5vh
}

.article .share a:nth-child(1) {
    background: linear-gradient(#0b3a99,#0e55ea)
}

.article .share a:nth-child(2) {
    background: linear-gradient(#670ea8,#a938e8)
}

.article .share a {
    color: #fff;
    font-size: 1.3vh;
    font-family: america;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14.5vh;
    height: 4.2vh;
    border-radius: .7vh;
    transition: .5s
}

.article .share a:hover {
    filter: brightness(120%)
}

.article .share a i {
    font-size: 2vh;
    margin-right: 1vh
}

.article ul {
    margin-bottom: 3.5vh
}

.article ul li:not(:last-child) {
    margin-bottom: 1.8vh
}

.article ul li {
    color: #7e7975;
    font-size: 1.3vh;
    font-family: intro;
    display: flex;
    align-items: center
}

.article ul li span {
    display: inline-flex;
    width: .8vh;
    height: .8vh;
    background-color: gray;
    transform: rotate(45deg);
    margin-right: 1.2vh
}

.article p {
    color: #7e7975;
    font-size: 1.4vh;
    font-family: intro;
    margin-bottom: 3.7vh
}

.news--page {
    display: flex;
    flex-wrap: wrap;
    gap: 5vh
}

.news--page h1 {
    font-size: 4vh;
    font-weight: 400;
    text-transform: uppercase
}

.news--page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.news--page .pagination li {
    margin: 0 1.5vh
}

.news--page .pagination li.active a {
    color: var(--h1);
    text-shadow: 0 0 1vh var(--h1-glow)
}

.news--page .pagination li:hover a {
    color: var(--h1);
    text-shadow: 0 0 1vh var(--h1-glow)
}

.news--page .pagination li:hover button {
    color: var(--h1);
    text-shadow: 0 0 1vh var(--h1-glow)
}

.news--page .pagination button {
    cursor: pointer;
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 2vh;
    transition: .5s
}

.news--page .pagination a {
    cursor: pointer;
    transition: .5s;
    color: rgba(255,255,255,.464);
    font-size: 2vh;
    font-family: america
}

.news--page div {
    background-color: rgba(255,255,255,.107);
    border-radius: 1.8vh;
    position: relative;
    height: 35vh
}

.news--page div span:nth-child(1) {
    position: absolute;
    top: -1.2vh;
    right: 2.8vh;
    height: 9.2vh;
    border-radius: 1.2vh;
    width: 7.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--news--gradient2),var(--news--gradient))
}

.news--page div span:nth-child(1) p {
    text-align: center;
    color: #fff;
    font-family: america;
    font-size: 1.6vh
}

.news--page div span:nth-child(1) p strong {
    color: #fff;
    font-size: 3.5vh;
    font-weight: 400
}

.news--page div span:nth-child(2) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: end;
    flex-direction: column;
    padding: 3.5vh;
    position: relative;
    overflow: hidden;
    border-radius: 1.8vh
}

.news--page div span:nth-child(2)::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url(../../img/pwci/news/shadow.png) top/cover no-repeat;
    position: absolute;
    opacity: .9;
    left: 0;
    top: 0
}

.news--page div span:nth-child(2) h1 {
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-transform: uppercase;
    margin-bottom: 1.3vh
}

.news--page div span:nth-child(2) p {
    z-index: 1;
    font-family: intro;
    color: #c6c4c5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 2.2vh;
    font-size: 1.6vh;
    line-height: 2.2vh
}

.news--page div span:nth-child(2) a {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: america;
    text-transform: uppercase;
    font-size: 1.6vh;
    color: #fff;
    background: linear-gradient(var(--news--gradient2),var(--news--gradient));
    border-radius: 1.1vh;
    transition: .5s
}

.news--page div span:nth-child(2) a:hover {
    filter: brightness(120%)
}

.news--page div {
    width: 100%;
    height: 35vh
}

.news--page div h1 {
    font-size: 3vh;
    letter-spacing: .2vh
}

.news--page div p {
    width: 80%
}

.news--page div a {
    width: 21vh;
    height: 5.2vh
}

main .right .status .offline {
    position: absolute;
    top: 3.2vh;
    right: 3.2vh;
    color: #fff;
    font-family: intro;
    text-transform: uppercase;
    font-size: 1vh;
    padding: .3vh 1.2vh;
    border-radius: 4vh;
    background-color: var(--offline)
}

.tags {
    display: block;
    margin: 1rem 0;
    clear: both;
    font-size: 1.2rem;
    color: rgba(255,255,255,.5)
}

.tags a {
    text-decoration: none;
    color: rgba(255,255,255,.5)
}
.modal {
    display: none; /* Inicialmente escondido */
    position: fixed; /* Fixo na tela */
    z-index: 1; /* Sobre outros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    overflow: auto; /* Habilita scroll se o conteúdo for grande */
    background-color: rgba(0,0,0,0.4); /* Fundo semi-transparente */
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Centraliza verticalmente e adiciona margem */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largura do conteúdo do modal */
    border-radius: 5px;
    position: relative;
  }
  
  .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  .modal-header img {
    display: block;
    margin-bottom: 15px;
    width: 100%; /* Garante que a imagem não ultrapasse a largura do modal */
    height: auto;
    border-radius: 5px 5px 0 0;
  }
  
  .modal-body {
    display: flex;
    gap: 20px; /* Espaçamento entre as colunas */
  }
  
  .info-column {
    flex: 1; /* As colunas ocupam o mesmo espaço */
  }
  
  .info-column h3 {
    margin-top: 0;
    color: #333;
  }
  
  .info-column p {
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
  }
  
  .with-icons p {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  
  /* Estilos adicionais para o tema roxo e azul (adapte conforme suas imagens) */
  .modal-content {
    color: #f8f8f2;
    margin: 5% auto; /* Aumentei a margem superior para 5% - experimente outros valores */
    padding: 25px 0;
    border: none;
    width: 80%;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: transparent;
  }

  .modal-body img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .modal-content .info-column p {
    line-height: 0.6;
    margin-bottom: 12px;
    color: white; /* Texto branco */
    font-size: 0.9em; /* Tamanho da fonte um pouco menor */
    font-family: intro;
  }
  .modal-header {
    text-align: center;
    margin-bottom: 15px; /* Mantenha alguma margem abaixo da imagem do título */
  }
  
  .modal-open {
    overflow: hidden !important; /* Usar !important para garantir a aplicação */
  }

  .modal-header img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0; /* Arredonda os cantos superiores */
    /* Adicione um background para a imagem do título se ela tiver transparência e você quiser um fundo sólido */
    /* background-color: rgba(0, 0, 0, 0.5); Por exemplo, um fundo preto semi-transparente */
    padding: 5px; /* Adicione um pouco de padding ao redor do texto da imagem, se necessário */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
  }
  .info-column h3 {
    color: #a78bfa; /* Um tom de roxo para os títulos */
  }
  
  .close-button {
    color: #eee;
    font-size: 28px;
    font-weight: bold;
    position: absolute; /* Posiciona relativamente ao ancestral mais próximo com position: relative */
    top: 10px; /* Ajusta a distância do topo */
    right: 15px; /* Ajusta a distância da direita */
    cursor: pointer;
    z-index: 2; /* Garante que o botão fique acima da imagem */
  }
  
  .close-button:hover,
  .close-button:focus {
    color: #f8f8f2;
    text-decoration: none;
  }

  /* Estilos para telas com largura máxima de 600 pixels (celulares) */
@media (max-width: 600px) {
    .modal-content {
      width: 95%; /* Aumenta a largura para 95% da tela */
      margin-top: 10%; /* Pode ajustar a margem superior em telas menores */
    }
  }

  /* Estilos para telas com largura mínima de 601 pixels (computadores e tablets maiores) */
@media (min-width: 601px) {
    .modal-content {
      width: 75%; /* Diminui a largura para 75% da tela (era 80%) */
      /* Você também pode ajustar a margin-top se precisar */
      /* margin-top: 8%; */
    }
  }

  .download-buttons-container {
    display: flex;
    width: 100%; /* O container ocupa a largura disponível */
    flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha */
    gap: 10px; /* Espaçamento entre os botões */
  }
  
  .download-button {
    display: block; /* Faz o botão ocupar a largura disponível dentro do seu espaço no flex container */
    padding: 15px 0; /* Remove a largura fixa do padding e mantém o espaçamento vertical */
    margin-right: 0; /* Remove a margem direita */
    border-radius: 5px;
    color: white;
    text-decoration: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center; /* Centraliza o texto */
    flex-grow: 1; /* Faz o botão crescer para preencher o espaço disponível na linha */
    line-height: 50px; /* Substitua 50px pela altura real dos seus botões (padding superior + padding inferior + altura da fonte) */
    display: flex; /* Adicionamos flex para garantir o comportamento de bloco */
    justify-content: center; /* Centraliza o texto horizontalmente (já deve estar, mas garante) */
    align-items: center; /* Centraliza o texto verticalmente */
  }
  
  
  /* Estilos de fundo dos botões (mantenha como estão) */
  .direct-link {
    background-image: url('https://i.imgur.com/CuMJLK0.png'); /* Azul */
  }
  
  .google-drive-1 {
    background-image: url('https://i.imgur.com/TIGpynf.png'); /* Roxo */
  }
  
  .google-drive-2 {
    background-image: url('https://i.imgur.com/Cm02EIw.png'); /* Azul Escuro */
  }
  
  .google-drive-3 {
    background-image: url('https://i.imgur.com/CuMJLK0.png'); /* Azul */
  }
  
  .google-drive-4 {
    background-image: url('https://i.imgur.com/TIGpynf.png'); /* Roxo */
  }
  
  .google-drive-5 {
    background-image: url('https://i.imgur.com/Cm02EIw.png'); /* Azul Escuro */
  }
  
  .media-fire {
    background-image: url('https://i.imgur.com/CuMJLK0.png'); /* Azul */
  }
  
  .torrent {
    background-image: url('https://i.imgur.com/TIGpynf.png'); /* Roxo */
  }
  
  .mega-drive {
    background-image: url('https://i.imgur.com/Cm02EIw.png'); /* Azul Escuro */
  }