/* ---GLOBAL STYLES--- */

@font-face {
    font-family: 'Maragsa';
    src: url('../fonts/maragsa.woff') format('woff');
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Space Grotesk', serif;
    box-sizing: border-box;
    word-break: break-word;
    scroll-behavior: smooth;
    cursor: none !important;
}

:root {
    --black: #101010;
    --white: #F9F6EF;
    --yellow: #F9DE79;
    --green: #85A392;
}

::-webkit-scrollbar {
    display: none;
}

body {
    position: relative;
    background: var(--black);
}

.freezy_body {
    overflow: hidden;
}

.background_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: .5;
}

.background_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.background_box .wall01 {
    animation: background01 1s infinite;
}

.background_box .wall02 {
    animation: background02 1s infinite;
}

.background_box .wall03 {
    animation: background03 1s infinite;
}

main {
    position: relative;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
    transition: .5s;
}

.freezy_body main {
    opacity: 0;
}

img,
svg {
    width: 100%;
    max-width: 100%;
}

a {
    color: var(--white);
    width: fit-content;
    display: inline-block;
    text-decoration: none;
    transition: .5s;
}

i {
    transition: .5s;
}

section {
    width: 100%;
}

h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a {
    font-family: "Maragsa";
    color: var(--white);
    font-weight: 300;
    text-shadow: .1vw .1vw .25vw #101010c0;
}

h1 span,
h2 span {
    font-family: "Maragsa";
    color: var(--yellow);
    font-weight: 300;
}

h2 {
    font-size: 2.5vw;
}

h2 span {
    font-size: 3.5vw;
}

p,
li {
    color: var(--white);
    font-size: 1vw;
    font-weight: 400;
}

span {
    color: var(--white);
}

ul {
    list-style-position: inside;
}

table * {
    color: var(--white);
}

.cursor_item {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) scale(0);
    width: .8vw;
    height: .8vw;
    background-color: var(--yellow);
    mix-blend-mode: color-dodge;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
}

body:hover .cursor_item {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.follower_item {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    border: 1px solid var(--yellow);
    mix-blend-mode: color-dodge;
    opacity: 0;
    pointer-events: none;
    transition: .5s;
    z-index: 10000;
}

body:hover .follower_item {
    opacity: 1;
}

.hovering {
    width: 1.5vw;
    height: 1.5vw;
    background: var(--yellow);
}

.main_btn {
    width: fit-content;
    position: relative;
    color: var(--yellow);
    font-size: 1vw;
    padding-top: .8vw;
}

.main_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8vw;
    height: .25vw;
    background: #F9DE7930;
}

.main_btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3vw;
    height: .25vw;
    background: #F9DE79;
    transition: .5s;
}

.main_btn:hover::after {
    width: 8vw;
}

button.main_btn {
    width: fit-content;
    border: none;
    background: none;
}

@media (max-width: 996px) {
    h2 {
        font-size: 6vw;
    }
    h2 span {
        font-size: 8vw;
    }
    p,
    li {
        font-size: 3vw;
    }
    .cursor_item,
    .follower_item {
        display: none;
    }
    .main_btn {
        position: relative;
        color: var(--yellow);
        font-size: 3.5vw;
        padding-top: 2vw;
    }
    .main_btn::before {
        width: 25vw;
        height: .5vw;
    }
    .main_btn::after {
        width: 10vw;
        height: .5vw;
    }
    .main_btn:hover::after {
        width: 25vw;
    }
}


/* ---HEADER STYLES--- */

header {
    position: relative;
    width: 100%;
    z-index: 99;
}

header::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6vw;
    background: linear-gradient(to bottom, var(--black), #10101000);
    pointer-events: none;
    z-index: 1;
}

header .logo_box {
    width: fit-content;
    position: fixed;
    top: 2vw;
    left: 2vw;
    z-index: 1;
}

header .logo_box a {
    width: 100%;
}

header .logo_box p {
    color: var(--yellow);
    font-family: "Maragsa";
    font-size: 1.3vw;
}

header .logo_box p span {
    color: var(--white);
    font-family: "Maragsa";
}

header .logo_box img {
    width: 8vw;
}

header .toggle_box {
    height: 2vw;
    position: fixed;
    top: 2vw;
    right: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
    z-index: 1;
}

header .dot_box {
    width: .5vw;
    height: .5vw;
    margin: 0 .3vw;
    border-radius: 50%;
    background: var(--yellow);
    opacity: 1;
    transition: 1s;
}

header .toggle_box:hover .dot_box {
    background: white;
}

header.action .dot_box:nth-child(1),
header.action .dot_box:nth-child(2) {
    width: 0;
    height: 0;
    opacity: 0;
}

header.action .dot_box:nth-child(3) {
    width: 3vw;
    height: .5vw;
    border-radius: .5vw;
}

header .cart_box {
    position: fixed;
    top: 2.2vw;
    right: 8vw;
    z-index: 1;
}

header .cart_box a {
    width: 100%;
}

header .cart_box i {
    color: var(--yellow);
    font-size: 1.5vw;
}

header .cart_box a:hover i {
    color: var(--white);
}

header .language_box {
    height: 2vw;
    position: fixed;
    bottom: 3vw;
    right: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    opacity: 0;
    transition: .5s;
    z-index: 1;
}

header.action .language_box {
    opacity: 1;
}

header .language_box i,
header .language_box a,
header .language_box span {
    color: white;
}

header .language_box i {
    font-size: 1.2vw;
}

header .options_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5vw;
}

header .options_box a:hover {
    color: var(--yellow);
}

header .options_box a,
header .options_box span {
    font-size: 1vw;
}

header .options_box span {
    pointer-events: none;
}

header .menu_section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100vw;
    height: 100vh;
    padding: 8vw;
    background-color: #101010cd;
    backdrop-filter: blur(.25vw);
    opacity: 0;
    transition: 1.5s;
}

header.action .menu_section {
    transform: translateY(0);
    opacity: 1;
}

header .menu_content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header .nav_box,
header .nav_items,
header .contact_box,
header .contact_items {
    display: flex;
    flex-direction: column;
    gap: .5vw;
}

header .nav_box p,
header .contact_box p {
    position: relative;
}

header .nav_box p::before,
header .contact_box p::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-200%, -50%);
    width: .5vw;
    height: .5vw;
    border-radius: 50%;
    background: var(--yellow);
}

header .nav_items a {
    font-family: "Maragsa";
    color: var(--white);
    font-size: 4vw;
    font-weight: 300;
}

header .nav_items a:hover {
    color: var(--yellow);
}

header .contact_items a {
    color: var(--white);
    font-size: .8vw;
}

header .contact_items a:hover {
    color: var(--yellow);
}

header .menu_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

header .menu_section .media_item {
    position: relative;
}

header .menu_section .print {
    width: 35vw;
    transform: rotate(2deg);
    transition: .25s;
}

header .media_item:hover .print {
    transform: rotate(-2deg);
}

header .menu_section .tape {
    width: 25%;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-35%, 30%);
    transition: .25s;
}

header .media_item:hover .tape {
    transform: translate(-35%, 30%) rotate(5deg) scale(.9);
}

header .menu_section .sticker {
    width: 20%;
    position: absolute;
    top: 1%;
    left: -1%;
    transition: .25s;
}

header .media_item:hover .sticker {
    transform: scale(1.1);
}

header .menu_section .media_box svg {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, -20%);
    width: 30%;
    mix-blend-mode: color-dodge;
    transition: .25s;
}

header .media_item:hover svg {
    transform: translate(0, -40%) scale(1.1);
}

@media (max-width: 996px) {
    header::before {
        height: 20vw;
    }
    header .logo_box {
        top: 5vw;
        left: 5vw;
    }
    header .logo_box p {
        font-size: 4vw;
    }
    header .logo_box img {
        width: 25vw;
    }
    header .toggle_box {
        height: 2vw;
        top: 6vw;
        right: 5vw;
    }
    header .dot_box {
        width: 2vw;
        height: 2vw;
        margin: 0 1vw;
    }
    header.action .dot_box:nth-child(3) {
        width: 12vw;
        height: 2vw;
        border-radius: 2vw;
    }
    header .cart_box {
        top: 4vw;
        right: 22vw;
    }
    header .cart_box i {
        font-size: 6vw;
    }
    header .language_box {
        height: 2vw;
        bottom: 5%;
        right: 50%;
        transform: translate(50%, 0);
        gap: 5vw;
    }
    header .language_box i {
        font-size: 4vw;
    }
    header .options_box {
        gap: 5vw;
    }
    header .options_box a,
    header .options_box span {
        font-size: 4vw;
    }
    header .menu_section {
        grid-template-columns: 1fr;
        padding: 30vw 10vw;
    }
    header .menu_content {
        justify-content: center;
        gap: 10vw;
        order: 2;
    }
    header .nav_box,
    header .nav_items,
    header .contact_box,
    header .contact_items {
        align-items: center;
        gap: 5vw;
    }
    header .nav_box p,
    header .contact_box p {
        font-size: 4vw;
    }
    header .nav_box p::before,
    header .contact_box p::before {
        top: 45%;
        transform: translate(-250%, -50%);
        width: 1vw;
        height: 1vw;
    }
    header .nav_items a {
        font-size: 6vw;
    }
    header .contact_items a {
        font-size: 3vw;
    }
    header .menu_section .print {
        width: 65vw;
    }
}


/* ---FOOTER SYLES--- */

.contact_section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 99;
}

.active_contact_modal {
    opacity: 1;
    pointer-events: initial;
}

.contact_section .contact_box {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    height: fit-content;
    padding: 3vw;
    background: #252525;
    z-index: 1;
}

.contact_section h2 {
    color: var(--yellow);
}

.contact_section .form_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.contact_section input {
    width: 100%;
    color: var(--yellow);
    font-size: 1vw;
    padding: 1vw;
    border: none;
    background: var(--black);
}

.contact_section textarea {
    width: 100%;
    height: 8vw;
    color: var(--yellow);
    resize: none;
    font-size: 1vw;
    padding: 1vw;
    border: none;
    background: var(--black);
}

.contact_section input:focus-visible,
.contact_section textarea:focus-visible {
    outline: none;
}

.contact_section ::placeholder {
    color: #F9DE7930;
}

.contact_section .message_box {
    font-size: .8vw;
}

.contact_section .ti-x {
    color: var(--yellow);
    position: absolute;
    top: 1vw;
    right: 1vw;
    font-size: 1.5vw;
}

.contact_section .ti-x:hover {
    color: var(--white);
}

.contact_section .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #101010cd;
    backdrop-filter: blur(.25vw);
}

footer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5vw;
    transition: .5s;
    z-index: 98;
}

.freezy_body footer {
    opacity: 0;
}

footer .nav_box {
    position: fixed;
    bottom: 2vw;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    display: flex;
    justify-content: center;
    gap: 3vw;
    background: #00000090;
    backdrop-filter: blur(1vw);
    padding: 1.2vw 3vw;
    border-radius: 3vw;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 999;
}

footer .nav_box.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

footer .nav_box a {
    font-family: "Maragsa";
    color: var(--white);
    font-size: 1.5vw;
    font-weight: 300;
}

footer .nav_box a:hover {
    color: var(--yellow);
}

footer .footer_bar {
    display: flex;
    justify-content: space-between;
    border-top: .1vw solid var(--yellow);
    padding: 1vw 5%;
}

footer .footer_bar a {
    color: var(--white);
    font-size: .8vw;
}

footer .footer_bar a:hover {
    color: var(--yellow);
}

footer .footer_bar span {
    color: var(--white);
    font-size: 1vw;
    pointer-events: none;
}

footer .legal_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}

@media (max-width: 996px) {
    .contact_section .contact_box {
        gap: 3vw;
        width: 90vw;
        padding: 10vw;
    }
    .contact_section h2 {
        font-size: 10vw;
    }
    .contact_section .form_box {
        gap: 2vw;
    }
    .contact_section input {
        font-size: 3vw;
        padding: 3vw;
    }
    .contact_section textarea {
        height: 30vw;
        font-size: 3vw;
        padding: 3vw;
    }
    .contact_section .message_box {
        font-size: 2.5vw;
    }
    .contact_section .ti-x {
        top: 3vw;
        right: 3vw;
        font-size: 5vw;
    }
    footer {
        gap: 10vw;
        padding-top: 10%;
    }
    footer .nav_box {
        position: inherit;
        bottom: 0;
        left: 0;
        transform: inherit;
        flex-direction: column;
        align-items: center;
        gap: 5vw;
        background: none;
        backdrop-filter: blur(0);
        padding: 0;
        border-radius: 0;
        opacity: 1;
        pointer-events: inherit;
    }
    footer .nav_box a {
        font-size: 6vw;
    }
    footer .nav_box a:hover {
        color: var(--yellow);
    }
    footer .footer_bar {
        flex-direction: column;
        align-items: center;
        gap: 2.5vw;
        padding: 2.5vw 0;
    }
    footer .footer_bar a {
        font-size: 2.5vw;
    }
    footer .footer_bar span {
        font-size: 2.5vw;
        pointer-events: none;
    }
    footer .legal_box {
        gap: 2.5vw;
    }
}


/* ---CONNECT STYLES ---*/

.connect_section {
    position: relative;
    padding: 15% 5% 10% 5%;
    overflow: hidden;
}

.connect_section .tape_item {
    width: 100vw;
    height: 4vw;
    position: absolute;
    top: 0;
    left: 0;
}

.connect_section .yellow_tape {
    width: 200vw;
    margin-top: 2vw;
    background-image: url("../media/svg/tapetext02.svg");
    background-color: var(--yellow);
    background-repeat: repeat-x;
    background-position: center;
    box-shadow: .5vw .5vw .5vw #10101050;
    animation: tape02 30s alternate infinite;
    z-index: 1;
}

.connect_section .white_tape {
    margin-top: 2vw;
    transform: rotate(-2deg);
    background: var(--white);
}

.connect_section .connect_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
}

.connect_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect_section .media_item {
    position: relative;
    width: 80%;
}

.connect_section .tape01 {
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -40%) rotate(45deg);
    z-index: 3;
}

.connect_section .tape02 {
    width: 20%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0, 50%) rotate(-90deg);
    z-index: 3;
}

.connect_section .sticker {
    width: 20%;
    position: absolute;
    top: 8%;
    right: 3%;
    transform: rotate(-20deg);
    transition: .5s;
    z-index: 3;
}

.connect_section .media_item:hover .sticker {
    transform: rotate(-15deg) scale(1.1);
}

.connect_section .print {
    position: relative;
    z-index: 2;
}

.connect_section .cardboard {
    width: 40%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(45%, -50%);
    transition: .5s;
    z-index: 1;
}

.connect_section .media_item:hover .cardboard {
    transform: translate(45%, -50%) rotate(5deg) scale(.9);
}

.connect_section .bubblewrap {
    width: 15%;
    position: absolute;
    bottom: 20%;
    left: 0;
    transform: translate(-50%, 50%);
    transition: .5s;
    z-index: 1;
}

.connect_section .media_item:hover .bubblewrap {
    transform: translate(-50%, 65%);
}

.connect_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.connect_section .title_box {
    position: relative;
    width: fit-content;
}

.connect_section .title_box h2 {
    position: relative;
    z-index: 1;
}

.connect_section .title_box svg {
    width: 70%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(20%, 10%);
    mix-blend-mode: color-dodge;
}

.connect_section .paragraph_box,
.connect_section .main_btn {
    margin-left: 2vw;
}

.connect_section .paragraph_box p {
    width: 75%;
}

@media (max-width: 996px) {
    .connect_section {
        padding: 35% 10% 10% 10%;
    }
    .connect_section .tape_item {
        height: 15vw;
    }
    .connect_section .connect_box {
        grid-template-columns: 1fr;
        gap: 15vw;
    }
    .connect_section .media_item {
        position: relative;
        width: 80%;
    }
    .connect_section .info_box {
        gap: 5vw;
    }
    .connect_section .title_box svg {
        width: 50%;
        transform: translate(20%, 50%);
    }
    .connect_section .paragraph_box p {
        width: 100%;
    }
}


/* ---KEYFRAMES--- */

@keyframes background01 {
    0% {
        opacity: 1;
    }
    32% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes background02 {
    0% {
        opacity: 0;
    }
    32% {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes background03 {
    0% {
        opacity: 0;
    }
    32% {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    66% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade01 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade02 {
    from {
        opacity: 0;
    }
    to {
        opacity: .75;
    }
}

@keyframes fade03 {
    from {
        opacity: 0;
    }
    to {
        opacity: .5;
    }
}

@keyframes fade04 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes rotate01 {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(3deg)
    }
}

@keyframes tape01 {
    from {
        transform: rotate(-2deg) translate(0, -2vw);
    }
    to {
        transform: rotate(-2deg) translate(-100vw, -2vw);
    }
}

@keyframes tape02 {
    from {
        transform: rotate(2deg) translate(0, 2vw);
    }
    to {
        transform: rotate(2deg) translate(-100vw, 2vw);
    }
}