* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2b2a43;
    --secondary-color: #02012b;
}

body {
    background-color: var(--secondary-color);
      transition: transform 1s ease, min-height 1s ease;

}
input {
    color: #fff;
}
.wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    clear: both;
}

.container {
    margin: 25px auto;
}

.white {
    color: #fff;
}

.black {
    color: #000;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}


/* FONT SIZE */
.large {
    font-size: large
}

.larger {
    font-size: larger
}

.x-large {
    font-size: x-large
}

.xx-large {
    font-size: xx-large
}

.medium {
    font-size: medium
}

.small {
    font-size: small
}

.smaller {
    font-size: smaller
}

.x-small {
    font-size: x-small
}

.xx-small {
    font-size: xx-small
}

.display-1 {
    font-size: 6em
}

.display-2 {
    font-size: 5.5em
}

.display-3 {
    font-size: 4.5em
}

.display-4 {
    font-size: 3.5em
}

/* RESPONSIVE FONT-SIZE */
.fs-14 {
    font-size: 1em
}

.fs-16 {
    font-size: 1.14em
}

.fs-18 {
    font-size: 1.28em
}

.fs-20 {
    font-size: 1.42em
}

.fs-22 {
    font-size: 1.57em
}

.fs-24 {
    font-size: 1.71em
}

.fs-26 {
    font-size: 1.85em
}

.fs-28 {
    font-size: 2em
}

.fs-30 {
    font-size: 2.14em
}

.fs-32 {
    font-size: 2.28em
}

.fs-34 {
    font-size: 2.42em
}

.fs-36 {
    font-size: 2.57em
}

.fs-38 {
    font-size: 2.71em
}

.fs-40 {
    font-size: 2.85em
}

.fs-42 {
    font-size: 3em
}

.fs-44 {
    font-size: 3.14em
}

.fs-46 {
    font-size: 3.28em
}

.fs-48 {
    font-size: 3.42em
}

.fs-50 {
    font-size: 3.57em
}

.fs-52 {
    font-size: 3.71em
}

.fs-54 {
    font-size: 3.85em
}

.fs-56 {
    font-size: 4em
}

.fs-58 {
    font-size: 4.14em
}

.fs-60 {
    font-size: 4.28em
}

.fs-62 {
    font-size: 4.42em
}

.fs-64 {
    font-size: 4.57em
}

.fs-66 {
    font-size: 4.71em
}

.fs-68 {
    font-size: 4.85em
}

.fs-70 {
    font-size: 5em
}

.fs-72 {
    font-size: 5.14em
}

.fs-74 {
    font-size: 5.28em
}

.fs-76 {
    font-size: 5.42em
}

.fs-78 {
    font-size: 5.57em
}

.fs-80 {
    font-size: 5.71em
}

.fs-82 {
    font-size: 5.85em
}

.fs-84 {
    font-size: 6em
}

.fs-86 {
    font-size: 6.14em
}

.fs-88 {
    font-size: 6.28em
}

.fs-90 {
    font-size: 6.42em
}

.fs-92 {
    font-size: 6.57em
}

.fs-94 {
    font-size: 6.71em
}

.fs-96 {
    font-size: 6.85em
}

.fs-98 {
    font-size: 7em
}

.fs-100 {
    font-size: 7.14em
}

.fs-102 {
    font-size: 7.28em
}

.fs-104 {
    font-size: 7.42em
}

.fs-106 {
    font-size: 7.57em
}

.fs-108 {
    font-size: 7.71em
}

.fs-110 {
    font-size: 7.85em
}


/* SMALL DEVICE */
@media only screen and (max-width: 576px) {

    [class*='fs-3'] {
        font-size: calc(2.14em - 0.14vw - 0.14vh);
    }

    [class*='fs-4'] {
        font-size: calc(2.85em - 0.85vw - 0.85vh);
    }

    [class*='fs-5'] {
        font-size: calc(3.57em - 0.57vw - 0.57vh);
    }

    [class*='fs-6'],
    [class*='fs-7'],
    [class*='fs-8'],
    [class*='fs-9'],
    [class*='fs-10'],
    [class*='fs-11']:not(.fs-11) {
        font-size: calc(4.28em - 0.28vw - 0.28vh);
    }
}