@import url(variables.css);

/* LAPTOP */
@media (max-width: 1440px) {
    /* ALL */
    .about__title, .socials__title, .setup__text h2, .contact__title {
        font-size: 56px;
    }
    .about__body, .socials__body p, .setup__text p, .contact__body {
        font-size: 22px;
    }
    .merch, .socials, .setup, .contact {
        padding: 100px 40px;
    }
    .hero__content, .about__content, .merch__content, .socials__content, .socials__content, .contact__content, .footer__content, .legal__content, .error__content {
        max-width: 1120px;
    }

    /* HERO */
    .hero {
        padding: 287px 40px 327px 40px;
    }
    .hero__title {
        font-size: 98px;
    }

    /* ABOUT */
    .about__bg {
        padding: 132px 40px 100px 40px;
    }
    .about__content {
        gap: 108px;
    }
    .agm-perfil {
        width: 1500px;
    }
    #poster1 {
        scale: .8;
        top: 0;
        left: 0;
    }
    #poster2 {
        scale: .8;
        bottom: 0;
        right: 0;
    }
    #poster3 {
        scale: .8;
        top: 0;
        right: 0;
    }
    #poster4 {
        scale: .8;
        bottom: 0;
        left: 0;
    }

    /* MERCH */
    .merch img {
        right: -275px;
        width: 777px;
    }
    .merch__content {
        padding-right: 280px;
    }

    /* SOCIALS */
    .socials__content {
        gap: 100px;
    }
    .socials__block {
        gap: 64px 32px;
    }
    .socials__block--yt {
        flex-direction: column-reverse!important;
    }
    .socials__text-yt {
        max-width: 100%;
    }
    .socials__body-yt {
        align-items: center;
    }
    .socials__text-yt p, .socials__text-yt h2 {
        text-align: center;
    }
    .socials__img-yt {
        max-width: 718px;
    }

    /* SETUP */
    .setup__content {
        gap: 42px;
    }
    .pagination {
        margin-top: 38px;
    }

    /* CONTACT */
    .contact__content {
        padding: 0;
        gap: 83px;
    }
    .contact__text img {
        width: 777px;
    }

    /* FOOTER */
    footer {
        padding: 60px 40px;
    }

    /* LEGAL PAGES */
    .legal {
        padding: 170px 40px 70px 40px;
    }
    .legal__title {
        font-size: 72px;
        padding: 78px 0;
    } 

    /* 404 PAGE */
    .error {
        padding: 160px 40px 60px 40px;
    }
    .error__content {
        flex-direction: column-reverse;
    }
    .error__image {
        max-width: 420px;
    }
    .error__text {
        max-width: 100%;
    }
    .error__title {
        font-size: 58px;
    }
    .error__body {
        font-size: 20px;
    }
}

/* TABLET */
@media (max-width: 992px) {
    /* ALL */
    .about__title, .socials__title, .setup__text h2, .contact__title {
        font-size: 48px;
    }
    .about__body, .socials__body p, .setup__text p, .contact__body {
        font-size: 18px;
    }
    .merch, .socials, .setup, .contact {
        padding: 80px 24px;
    }
    .hero__content, .about__content, .merch__content, .socials__content, .socials__content, .contact__content, .footer__content, .legal__content, .error__content {
        max-width: 832px;
    }


    /* NAVBAR */
    .header__nav {
        justify-content: space-between;
    }
    .logo {
        position: static;
        max-height: 48px;
    }
    .hamburger {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        z-index: 101;
    }
    .hamburger span {
        display: block;
        width: 40px;
        height: 4px;  
        background: #fff;
        margin: 8px 0;  
        transition: 0.3s ease;  
    }
    .header__nav.active .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(10px, 10px);  
    }
    .header__nav.active .hamburger span:nth-child(2) {
        opacity: 0;
    }
    .header__nav.active .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -7px);  
    }
    .nav__links {
        position: fixed;
        top: -200%;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 100px;
        transition: 0.3s;
        z-index: 100;
        padding: 0;
    }
    .nav {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 156px;
    }
    .header__nav.active .nav__links {
        top: 0;
    }
    .nav__links a {
        color: #fff;
        font-size: 24px;
    }

    /* HERO */
    .hero {
        padding: 267px 40px 307px 40px;
    }
    .hero__title {
        font-size: 82px;
    }

    /* ABOUT */
    .about__bg {
        padding: 112px 40px 80px 40px;
    }
    .agm-perfil {
        width: 1400px;
    }
    #poster1 {
        scale: .7;
        top: -20px;
        left: -70px;
    }
    #poster2 {
        scale: .7;
        bottom: -20;
        right: -70px;
    }
    #poster3 {
        scale: .7;
        top: -20px;
        right: -20px;
    }
    #poster4 {
        scale: .7;
        bottom: -20px;
        left: -20px;
    }

    /* MERCH */
    .merch img {
        right: -375px;
    }
    .merch__content {
        padding-right: 140px;
    }
    .merch__title {
        font-size: 84px;
    }
    .merch__subtitle {
        font-size: 32px;
    }
    .merch__body {
        font-size: 20px;
    }

    /* SOCIALS */  
    .socials__content {
        gap: 80px;
    }
    .socials__block {
        flex-direction: column;
        gap: 60px;
    }
    .socials__text {
        max-width: 100%;
    }
    .socials__title {
        text-align: center;
    }
    .socials__body {
        align-items: center;
    }
    .socials__body p {
        text-align: center;
    }

    /* SETUP */
    .setup__content {
        gap: 32px;
    }
    .card-affiliate {
        padding: 24px;
        gap: 14px;
    }
    .pagination {
        margin-top: 24px;
    }

    /* CONTACT */
    .contact__content {
        flex-direction: column;
        gap: 32px;
    }
    .contact__text {
        gap: 8px;
        width: 100%;
    }
    .contact__title, .contact__body {
        text-align: center;
    }
    .contact__text img {
        width: 555px;
        top: 30%;
    }
    .contact__form {
        width: 100%;
        gap: 18px;
    }

    /* FOOTER */
    footer {
        padding: 60px 24px;
    }
    .footer__content {
        justify-content: space-between;
    }
    .footer__copyright {
        gap: 18px;
    }
    .footer__copyright p {
        font-size: 14px;
        line-height: 120%;
        min-width: 100%;
    }
    .footer__legal {
        flex-wrap: wrap;
        flex: 1 1 40%;
        gap: 8px 24px;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        padding-left: 28px;
    }
    .politics {
        font-size: 14px;
        line-height: 120%;
    }

    /* LEGAL PAGES */
    .legal {
        padding: 160px 40px 60px 40px;
    }
    .text__block {
        gap: 12px;
    }
    .legal__title {
        font-size: 54px;
        padding: 68px 0;
    }
    .text__block h2 {
        font-size: 34px;
    }
    .text__block p, .text__block li {
        font-size: 20px;
    }    

    /* 404 PAGE */
    .error {
        padding: 140px 40px 40px 40px;
    }
    .error__image {
        max-width: 320px;
    }
    .error__title {
        font-size: 48px;
    }
    .error__body {
        font-size: 18px;
    }
}

/* MOBILE */
@media (max-width: 576px) {
    /* ALL */
    .about__title, .socials__title, .setup__text h2, .contact__title {
        font-size: 42px;
        line-height: 120%;
    }
    .about__body, .socials__body p, .setup__text p, .contact__body, .merch__body {
        font-size: 18px;
        line-height: 150%;
        font-weight: 400;
    }
    .merch, .socials, .setup, .contact {
        padding: 60px 24px;
    }
    .hero__content, .about__content, .merch__content, .socials__content, .socials__content, .contact__content, .footer__content, .legal__content, .error__content {
        max-width: 528px;
    }

    /* NAVBAR */
    .header {
        padding: 0 24px;
    }
    .hamburger {
        padding: 0;
    }

    /* HERO */
    .hero {
        padding: 227px 24px 267px 24px;
    }
    .hero__title {
        font-size: 74px;
    }

    /* ABOUT */
    .about__bg {
        padding: 92px 24px 60px 24px;
    }
    .about__content {
        gap: 36px;
    }
    .agm-perfil {
        width: 900px;
        left: 36%;
    }
    #poster1 {
        scale: .6;
        top: -40px;
        left: -85px;
    }
    #poster2 {
        scale: .6;
        bottom: -40;
        right: -85px;
    }
    #poster3 {
        scale: .6;
        top: 40px;
        right: -35px;
    }
    #poster4 {
        scale: .6;
        bottom: 80px;
        left: -35px;
    }
    .about__text {
        margin-top: -44px;
        gap: 8px;
    }
    .about__title {
        line-height: 100%;
    }

    /* MERCH */
    .merch__content {
        padding: 0;
        align-items: center;
    }
    .merch__title {
        text-align: center;
        font-size: 72px;
    }
    .merch__subtitle {
        text-align: center;
        font-size: 28px;
        }
    .merch__body {
        font-size: 18px;
        text-align: center;
    }

    /* SOCIALS */
    .socials__content {
        gap: 60px;
    }
    .socials__block {
        gap: 52px;
    }
    .socials__body {
        gap: 16px;
    }
    .socials__img-tiktok {
        max-width: 240px;
    }
    .tiktokavatar {
        bottom: 66px;
        right: 12px;
        max-width: 30px;
    }

    /* SETUP */
    .setup__content {
        gap: 28px;
    }
    .card-affiliate {
        padding: 18px;
        gap: 12px;
    }
    .card-affiliate__text {
        gap: 8px;
    }
    .card-affiliate__title {
        font-weight: 600;
        line-height: 100%;
        line-clamp: 10;
        -webkit-line-clamp: 10;
    }
    .card-affiliate__body {
        line-height: 120%;
        line-clamp: 10;
        -webkit-line-clamp: 10;
    }
    .pagination {
        margin-top: 18px;
    }

    /* CONTACT */
    .contact__content {
        gap: 28px;
    }
    .contact__form {
        gap: 12px;
    }
    .namemail {
        gap: 18px;
    }

    /* FOOTER */
    footer {
        padding: 50px 24px;
    }
    .footer__content {
        flex-direction: column-reverse;
        gap: 32px;
        align-items: center;
    }
    .footer__copyright {
        flex-direction: column;
        gap: 32px;
    }
    .footer__legal {
        flex-wrap: nowrap; 
        flex-direction: column;
        margin-left: 0;
        max-width: 100%;
        gap: 16px;
        padding-left: 0;
    }
    .politics {
        text-align: center;
    }

    /* LEGAL PAGES */
    .legal {
        padding: 150px 24px 50px 24px;
    }
    .legal__title {
        font-size: 38px;
        padding: 56px 0;
        word-wrap: break-word;
    }
    .text__block h2 {
        font-size: 28px;
    }
    .text__block p, .text__block li {
        font-size: 16px;
    } 

    /* 404 PAGE */
    .error__image {
        max-width: 280px;
    }
    .error__title {
        font-size: 42px;
        word-wrap: break-word;
    }
    .error__body {
        font-size: 16px;
    }
}