/* -------------------------------------------------------------------------------- */
/* ! BASE */
/* -------------------------------------------------------------------------------- */
/* ? TAVOLOZZA */
:root {
    --primary: #ff2090;
    --secondary: #0CF574;
    --accent: #1BE7FF;
    --light: #ffffff;
    --dark: #14080E;
}

/* ? reset */
* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: underline;
}

/* ? Tipografia */
body {
    overflow-x: hidden;
    font-family: 'Figtree';
    background-color: var(--light);
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAPCAMAAAAxmgQeAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAD5JREFUGNN1j9EKADAIAnP//9GjFq6w7iU4DNRsB06cb44TJ+UzYUcniqnqoA6ag/62JhjKIU0rxx1lKveuXJ5UAQs/G/2vAAAAAElFTkSuQmCC), auto;
}

h1,
h2 {
    font-family: 'Inter';
}

p {
    line-height: 1.2em;
}

/* ? riuso??? */
.res {
    width: 100%;
    max-width: 500px;
}

html {
    scroll-behavior: smooth;
}

/* -------------------------------------------------------------------------------- */
/* ! MOBILE FIRST INDEX */
/* -------------------------------------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    padding: 10px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --------------- */

.sitebar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--secondary);
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    border-radius: 0 0 5% 5%;
    transition: opacity 0.5s linear;
}

.sitebar.hidden {
    opacity: 0;
}

.sitebar__menu a {
    color: var(--light);
    text-decoration: none;
}

.sitebar__menu li:hover {
    font-weight: bold;
    animation: shake2 0.5s;
    animation-iteration-count: infinite;
}

.sitebar__menu a:hover {
    color: var(--primary);
}

.sitebar__menu {
    width: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    max-height: 0;
    overflow: hidden;
    text-decoration: none;
    font-family: 'Figtree';
    font-size: 20px;
}

.open .sitebar__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    max-height: 100%;
    position: fixed;
    background-color: var(--secondary);
    width: 100%;
    height: 25vh;
    border-radius: 0 0 10% 10%;
}

.hb__menu {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    margin-left: 20px;
    text-align: center;
    font-size: 2em;
    justify-self: end;
}

.sitebar__iconsdx {
    margin-right: 20px;
    text-align: center;
    font-size: 2em;
}

.fa-bars-staggered,
.fa-paper-plane,
.fa-behance {
    color: var(--light);
    cursor: pointer;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.fa-bars-staggered a,
.fa-paper-plane a,
.fa-behance a {
    width: 50px;
    height: 50px;
    text-align: center;
}

.fa-bars-staggered:hover,
.fa-paper-plane:hover,
.fa-behance:hover {
    background: white;
    color: var(--primary);
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}

.fa-bars-staggered:hover:before,
.fa-paper-plane:hover:before,
.fa-behance:hover:before {
    line-height: 20px;
}

.intro__img {
    justify-content: center;
    display: flex;
    position: relative;
    grid-column: 2/9;
    z-index: 1;
    margin: 0 auto;
}

.bordo__img {
    left: 3%;
    position: absolute;
    width: 380px;
    grid-column: 3/4;
    height: 440px;
    z-index: 1;
    border: 4px solid var(--accent);
    border-style: dashed;
}

.rotella,
.rotellina {
    display: none;
}

.fa-scissors {
    position: absolute;
    font-size: 30px;
    top: 20%;
    left: 15px;
    grid-column: 1/9;
    z-index: 2;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

/* ? INTRO */

.intro h1 {
    margin-top: 50px;
    font-family: 'Inter';
    font-size: 4em;
    color: var(--primary);
    z-index: 2;
}

.intro {
    grid-column: 1/5;
}

.intro__due {
    margin-top: 30px;
    color: var(--secondary);
    grid-column: 2/9;
    font-family: 'Inter';
    font-size: 2.5em;
    z-index: 1;
}

.logo {
    z-index: 1;
}

.matitina {
    display: none;
}

.logo:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.intro__due:hover h2 {
    color: yellow;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@keyframes shake2 {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.scrollami h1 {
    font-family: 'Pacifico';
    color: var(--accent);
}

.container__freccia {
    margin-top: 20px;
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 25%;
}

.container__freccia i {
    position: absolute;
    z-index: 1;
    inset: 0;
    border: 3px solid black;
    transition: 0.5s;
}

.container__freccia:hover i {
    border: 3px solid var(--clr);
    filter: drop-shadow(0 0 10px var(--clr));
}

.container__freccia i:nth-child(1) {
    border-radius: 38% 62% 33% 67% / 43% 44% 56% 57%;
    animation: animate 6s linear infinite;
}

.container__freccia i:nth-child(2) {
    border-radius: 65% 35% 41% 59% / 71% 35% 65% 29%;
    animation: animate 4s linear infinite;
}

.container__freccia i:nth-child(3) {
    border-radius: 56% 44% 61% 39% / 58% 55% 45% 42%;
    animation: animate2 5s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate2 {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* ? PRESENTAZIONE */

#presentazione h1 {
    text-align: center;
    margin-top: 15px;
    font-family: 'Figtree';
    font-size: 2em;
    grid-column: 1/9;
    color: var(--primary);
}

#presentazione p {
    text-align: center;
}

.intro__due a {
    text-decoration: none;
    color: var(--secondary);
}

.about__text {
    grid-column: 1/9;
}

/* ? PROGETTI */
#progetti h1 {
    text-align: center;
    color: white;
    margin-top: 15px;
    font-family: 'Figtree';
    font-size: 2em;
    grid-column: 1/9;
}

#progetti h2 {
    text-align: center;
    color: white;
    margin-top: 15px;
    font-family: 'Inter';
    font-size: 1.7em;
    grid-column: 1/9;
}

#progetti p {
    font-family: 'Figtree';
    text-align: center;
}

#progetti {
    background: var(--primary);
    margin-bottom: 20px;
}

.product img {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    margin-top: 20px;
    display: flex;
    border-radius: 30px;
    justify-content: center;
}

.product img:hover {
    animation: shake 0.5s;
    border-radius: 65% 35% 41% 59% / 71% 35% 65% 29%;
    box-shadow: 5px 15px var(--accent);
}

.graphic img {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    margin-top: 20px;
    display: flex;
    border-radius: 30px;
}

.graphic img:hover {
    animation: shake 0.5s;
    border-radius: 38% 62% 33% 67% / 43% 44% 56% 57%;
    box-shadow: 5px 15px var(--light);
}

.loghi img {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    margin-top: 20px;
    display: flex;
    border-radius: 30px;
}

.loghi img:hover {
    animation: shake 0.5s;
    border-radius: 56% 44% 61% 39% / 58% 55% 45% 42%;
    box-shadow: 5px 15px var(--secondary);
}

.illustrazioni img {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    margin-top: 20px;
    display: flex;
    border-radius: 30px;
}

.illustrazioni img:hover {
    animation: shake 0.5s;
    border-radius: 38% 62% 51% 49% / 42% 69% 31% 58%;
    box-shadow: 5px 15px var(--dark);
}

/* ? SKILLS */

#skills h1 {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: 'Inter';
    font-size: 4em;
    grid-column: 1/9;
    color: var(--dark);
}

#skills h3 {
    font-family: 'Inter';
}

.skills__text {
    margin-top: 50px;
    grid-column: 1/9;
}

.dice {
    animation: animate 1.5s linear infinite;
}

#skills li {
    grid-column: span 4;
    text-align: center;
    background: yellow;
    padding: 12px;
    border-radius: 50% 50% 36% 64% / 62% 63% 37% 38%;
}

#skills:hover li {
    grid-column: span 4;
    text-align: center;
    padding: 12px;
}

#skills {
    text-align: center;
    padding: 12px;
}

#skills img {
    height: 80px;
}

.skills__box p {
    margin-top: 20px;
    margin-bottom: 20px;
}

.ai:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--accent);
    border-radius: 58% 42% 75% 25% / 69% 63% 37% 31%;
}

.id:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--light);
    border-radius: 29% 71% 36% 64% / 40% 63% 37% 60%;
}

.ps:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--primary);
    border-radius: 29% 71% 36% 64% / 40% 63% 37% 60%;
}

.pr:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--secondary);
    border-radius: 58% 42% 75% 25% / 69% 63% 37% 31%;
}

.blender:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--accent);
    border-radius: 58% 42% 75% 25% / 69% 63% 37% 31%;
}

.vsc:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--light);
    border-radius: 29% 71% 36% 64% / 40% 63% 37% 60%;
}

.js:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--primary);
    border-radius: 29% 71% 36% 64% / 40% 63% 37% 60%;
}

.css:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC), auto;
    background: var(--secondary);
    border-radius: 58% 42% 75% 25% / 69% 63% 37% 31%;
}

/* ? Footer */

.fa-phone-volume {
    position: absolute;
    right: 25px;
    bottom: 70px;
    font-size: 2.6em;
    z-index: 2;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
    color: var(--dark);
}

#prefooter {
    position: relative;
    bottom: -100px;
    left: 0;
    height: 100px;
    width: 100%;
    background-color: var(--secondary);
    border-radius: 10% 10% 0 0;
    transition: transform 0.3s ease;
    z-index: 1;
}

#prefooter.visible {
    transform: translateY(-100px);
}

footer {
    transition: opacity 0.5s linear;
    padding: 50px 0;
}

footer * {
    color: var(--light);
}

.credits {
    grid-column: 1/5;
    display: flex;
    align-items: flex-end;
    font-family: 'Pacifico';
    font-size: 30px;
}

.socials {
    font-size: 2em;
    grid-column: 6/9;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.fa-instagram,
.fa-facebook-f,
.fa-twitter {
    color: var(--light);
    cursor: pointer;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.fa-instagram a,
.fa-facebook-f a,
.fa-twitter a {
    font-size: 2em;
    width: 50px;
    height: 50px;
    text-align: center;
}

.fa-instagram:hover,
.fa-facebook-f:hover,
.fa-twitter:hover {
    background: white;
    color: var(--primary);
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}

.fa-instagram:hover:before,
.fa-facebook-f:hover:before,
.fa-twitter:hover:before {
    line-height: 20px;
}

.nerd {
    display: none;
}

.ledger {
    display: none;
}

@media(min-width:768px) {
    .intro__img {
        display: flex;
        position: relative;
        grid-column: 1/9;
        z-index: 1;
    }

    .bordo__img {
        position: absolute;
        width: 600px;
        grid-column: 1/9;
        height: 480px;
        z-index: 1;
        border: 4px solid var(--accent);
        border-style: dashed;
    }

    .intro h1 {
        position: relative;
        left: 20px;
        margin-top: 50px;
        grid-column: 1/2;
        font-family: 'Inter';
        font-size: 6em;
        color: var(--primary);
        z-index: 2;
    }

    .fa-scissors {
        position: absolute;
        font-size: 30px;
        top: 202px;
        left: 15px;
        grid-column: 1/2;
        z-index: 2;
        animation: shake 0.5s;
        animation-iteration-count: infinite;
    }

    .matitina {
        display: none;
    }

    .rotella {
        display: flex;
        position: absolute;
        width: 180px;
        left: 560px;
        top: 130px;
        z-index: 2;
        animation: animate 4s linear infinite;
    }

    .rotellina {
        display: flex;
        position: absolute;
        left: 660px;
        top: 290px;
        width: 70px;
        z-index: 2;
        animation: animate2 3s linear infinite;
    }

    .intro__due {
        text-align: center;
        color: var(--secondary);
        grid-column: 1/9;
        font-family: 'Figtree';
        font-size: 3em;
        z-index: 1;
    }

    .container__freccia {
        position: relative;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 284px;
    }

    .product img {
        padding-top: 20px;
        margin: auto;
        border-radius: 30px;
    }

    .graphic img {
        padding-top: 20px;
        margin: auto;
        border-radius: 30px;
    }

    .loghi img {
        padding-top: 20px;
        margin: auto;
        border-radius: 30px;
    }

    .illustrazioni img {
        padding-top: 20px;
        margin: auto;
        border-radius: 30px;
    }

    .product,
    .graphic,
    .loghi,
    .illustrazioni {
        justify-content: center;
    }

    #skills h1 {
        text-align: center;
        font-family: 'Inter';
        font-size: 4em;
        grid-column: 1/9;
        color: var(--dark);
    }

    .credits {
        grid-column: 1/5;
        display: flex;
        font-family: 'Pacifico';
        font-size: 30px;
        margin-top: 40px;
    }

    .nerd {
        display: none;
    }

    .ledger {
        display: none;
    }
}

@media(min-width:992px) {
    .intro h1 {
        left: 60px;
        font-family: 'Inter';
        color: var(--primary);
        z-index: 2;
    }

    .intro__img {
        display: flex;
        position: relative;
        grid-column: 1/9;
        z-index: 1;
    }

    .bordo__img {
        position: absolute;
        left: 50px;
        width: 600px;
        grid-column: 1/9;
        height: 480px;
        z-index: 1;
        border: 4px solid var(--accent);
        border-style: dashed;
    }

    .matitina {
        display: none;
    }

    .bordo__img2 {
        position: absolute;
        top: 280px;
        left: 180px;
        width: 600px;
        height: 500px;
        z-index: 1;
        border: 4px solid var(--primary);
        border-style: dashed;
    }

    .rotella {
        position: absolute;
        width: 180px;
        left: 760px;
        top: 130px;
        z-index: 2;
        animation: animate 4s linear infinite;
    }

    .rotellina {
        position: absolute;
        left: 860px;
        top: 290px;
        width: 70px;
        z-index: 2;
        animation: animate2 3s linear infinite;
    }

    .fa-scissors {
        position: absolute;
        font-size: 30px;
        top: 200px;
        left: 70px;
        z-index: 2;
        animation: shake 0.5s;
        animation-iteration-count: infinite;
    }

    .container__freccia {
        position: relative;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 400px;
    }

    .nerd {
        display: none;
    }

    .ledger {
        display: none;
    }
}

@media(min-width:1200px) {
    .intro h1 {
        position: relative;
        margin-top: 50px;
        font-family: 'Inter';
        font-size: 9em;
        color: var(--primary);
        z-index: 2;
    }

    .intro__due {
        margin: auto;
        position: relative;
        grid-column: 2/9;
        color: var(--secondary);
        font-family: 'Inter';
        font-size: 5em;
        z-index: 1;
    }

    .intro__img {
        display: flex;
        position: relative;
        grid-column: 1/9;
        z-index: 1;
    }

    .bordo__img {
        position: absolute;
        left: 500px;
        width: 600px;
        grid-column: 1/9;
        height: 480px;
        z-index: 1;
        border: 4px solid var(--accent);
        border-style: dashed;
    }

    .bordo__img2 {
        position: absolute;
        top: 280px;
        left: 350px;
        width: 600px;
        height: 500px;
        z-index: 1;
        border: 4px solid var(--primary);
        border-style: dashed;
    }

    .rotella {
        position: absolute;
        width: 200px;
        left: 1050px;
        top: 130px;
        z-index: 2;
        animation: animate 4s linear infinite;
    }

    .rotellina {
        position: absolute;
        left: 1150px;
        top: 310px;
        width: 100px;
        z-index: 2;
        animation: animate2 3s linear infinite;
    }

    .fa-scissors {
        position: absolute;
        font-size: 50px;
        top: 260px;
        left: 320px;
        z-index: 2;
        animation: shake 0.5s;
        animation-iteration-count: infinite;
    }

    .container__freccia {
        position: relative;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 670px;
    }

    #progetti {
        background: var(--primary);
        width: 1000px;
        border-radius: 5%;
    }

    .matitina {
        position: absolute;
        display: flex;
        width: 200px;
        z-index: 1;
        top: 1600px;
        left: 200px;
    }

    .nerd {
        position: absolute;
        display: flex;
        z-index: 1;
        top: 2100px;
        width: 200px;
        rotate: 20deg;
        left: 1120px;
    }

    .ledger {
        position: absolute;
        display: flex;
        z-index: 1;
        top: 2520px;
        width: 200px;
        rotate: -20deg;
        left: 140px;
    }
}

/* -------------------------------------------------------------------------------- */
/* ! COSTRUZIONE SECTIONS */
/* -------------------------------------------------------------------------------- */

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ? COVERS DELLE SECTION */
.cover {
    background: url(img/product.jpg) no-repeat center;
    height: 80vh;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover2 {
    background: url(img/graphic.jpg) no-repeat center;
    height: 80vh;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover3 {
    background: url(img/logos.jpg) no-repeat center;
    height: 80vh;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover4 {
    background: url(img/illustrazioni.jpg) no-repeat center;
    height: 80vh;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover::before,
.cover2::before,
.cover3::before,
.cover4::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--dark);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 2;
}

.cover__content,
.cover__content2,
.cover__content3,
.cover4__content {
    position: relative;
    font-family: 'Inter';
    font-size: 2em;
    color: white;
    z-index: 2;
    text-align: center;
    justify-content: center;
    animation: blinker 2s linear infinite;
}

/* ?  FINE COVERS DELLE SECTION */

/* ? MARQUEES DELLE SECTION */

.marquee,
.marquee2,
.marquee3,
.marquee4 {
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 50px;
    overflow-x: hidden;
}

.track,
.track2,
.track3,
.track4 {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 14s linear infinite;
}

.content,
.content2,
.content3,
.content4 {
    font-family: 'DM Mono';
    font-size: 30px;
}

/* ?  FINE MARQUEES DELLE SECTION */

.product__intro,
.graphic__intro,
.loghi__intro,
.illustrazioni__intro {
    font-size: 20px;
    padding: 10px;
    text-align: left;
    grid-column: 1/9;
}

/* -------------------------------------------------------------------------------- */
/* ! PRODUCT SECTION */
/* -------------------------------------------------------------------------------- */

.product__container {
    margin-top: 100px;
    background: rgba(27, 231, 255, 0.6);
    width: 100%;
    height: 100%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.fa-compass-drafting {
    position: relative;
    font-size: 3em;
    left: 45%;
    top: 30px;
    animation: animate 2s linear infinite;
}

/* !! DAISY */
.Daisy a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.Daisy h1 {
    padding: 20px;
}


.Daisy p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card1,
.card2,
.card3,
.card4 {
    display: flex;
    justify-content: center;
}

.card1 img,
.card2 img,
.card3 img,
.card4 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

/* !! MINIPIEGA */

.product__container2 {
    margin-top: 70px;
}

.text-box {
    border-radius: 3.4em;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    background-color: #3b75e2;
    margin-bottom: 70px;
}

.text-box p {
    color: var(--light);
    font-weight: bold;
    font-family: 'Inter';
}

.minipiega a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.minipiega h1 {
    padding: 20px;
}


.minipiega p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card5,
.card6,
.card7,
.card8 {
    display: flex;
    justify-content: center;
}

.card5 img,
.card6 img,
.card7 img,
.card8 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

/* !! SMART DESK */

.product__container3 {
    margin-top: 100px;
    background: rgba(27, 231, 255, 0.6);
    width: 100%;
    height: 100%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.smartdesk a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.smartdesk h1 {
    padding: 20px;
}


.smartdesk p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card9,
.card10,
.card11,
.card12 {
    display: flex;
    justify-content: center;
}

.card9 img,
.card10 img,
.card11 img,
.card12 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

/* !! BUGGY AND GO */

.quote {
    margin-top: 30px;
}

.quote h1 {
    line-height: 1.2em;
    font-family: 'Inter';
    text-align: center;
    font-size: 5em;
}

.plane {
    animation: animate 3s linear infinite;
}

.product__container4 {
    margin-top: 50px;
}

.buggyandgo a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.buggyandgo h1 {
    padding: 20px;
}


.buggyandgo p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card13,
.card14,
.card15,
.card16 {
    display: flex;
    justify-content: center;
}

.card13 img,
.card14 img,
.card15 img,
.card16 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

@media(min-width:768px) {
    .product__intro {
        font-size: 20px;
        padding: 10px;
        text-align: center;
        grid-column: 1/9;
    }

    .fa-compass-drafting {
        position: absolute;
        font-size: 3em;
        left: 50%;
        top: 118%;
        animation: animate 2s linear infinite;
    }

    .text-box {
        width: 90%;
        height: 30%;
        border-radius: 3.4em;
        margin-left: 20px;
        margin-right: 10px;
        padding: 20px;
        background-color: #3b75e2;
        margin-bottom: 70px;
    }

    .text-box p {
        color: var(--light);
        font-weight: bold;
        font-family: 'Inter';
    }
}

@media(min-width:992px) {
    .fa-compass-drafting {
        position: absolute;
        font-size: 3em;
        left: 470px;
        top: 850px;
        animation: animate 2s linear infinite;
    }

    .daisy__cards,
    .minipiega__cards,
    .smartdesk__cards,
    .buggyandgo__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .product__container {
        margin-top: 100px;
        background: rgba(27, 231, 255, 0.6);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .product__container3 {
        margin-top: 100px;
        background: rgba(27, 231, 255, 0.6);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .text-box {
        height: 30%;
    }
}

@media(min-width:1200px) {
    .fa-compass-drafting {
        position: absolute;
        font-size: 3em;
        left: 750px;
        top: 840px;
        animation: animate 2s linear infinite;
    }

    .text-box {
        width: 95%;
        height: 70%;
        border-radius: 3.4em;
        padding: 20px;
        background-color: #3b75e2;
        margin-bottom: 70px;
    }

    .text-box p {
        color: var(--light);
        font-weight: bold;
        font-family: 'Inter';
    }

    .product__container {
        margin-top: 100px;
        background: rgba(27, 231, 255, 0.6);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .product__container3 {
        margin-top: 100px;
        background: rgba(27, 231, 255, 0.6);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }
}

/* -------------------------------------------------------------------------------- */
/* ! SEZIONE GRAPHIC */
/* -------------------------------------------------------------------------------- */
.graphic__container {
    margin-top: 100px;
    background: var(--primary);
    width: 100%;
    height: 100%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.fa-wand-magic-sparkles {
    position: relative;
    font-size: 3em;
    left: 45%;
    top: 30px;
    animation: shake 2s linear infinite;
}

/* !! BOB NOORDA */

.bobnoorda a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.bobnoorda h1 {
    padding: 20px;
}


.bobnoorda p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card17,
.card18,
.card19,
.card20 {
    display: flex;
    justify-content: center;
}

.card17 img,
.card18 img,
.card19 img,
.card20 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

/* !! INGREDIENTS OF MY DESIGN */

.graphic__container2 {
    margin-top: 70px;
}

.text-box2 {
    border-radius: 3.4em;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    background-color: #3b75e2;
    margin-bottom: 70px;
}

.text-box2 p {
    color: var(--light);
    font-weight: bold;
    font-family: 'Inter';
}

.ingredients a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.ingredients h1 {
    padding: 20px;
}


.ingredients p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card21,
.card22,
.card23,
.card24 {
    display: flex;
    justify-content: center;
}

.card21 img,
.card22 img,
.card23 img,
.card24 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

/* !! POP UP TO WAKE UP */

.graphic__container3 {
    margin-top: 100px;
    background: var(--primary);
    width: 100%;
    height: 100%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.popup a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.popup h1 {
    padding: 20px;
}


.popup p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card25,
.card26,
.card27,
.card28 {
    display: flex;
    justify-content: center;
}

.card25 img,
.card26 img,
.card27 img,
.card28 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

.quote2 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.quote2 h1 {
    line-height: 1.2em;
    font-family: 'Inter';
    text-align: center;
    font-size: 5em;
}

.fa-lightbulb {
    padding: 5px;
    animation: shake2 2s linear infinite;
}

.fa-lightbulb:hover {
    cursor: pointer;
    color: yellow;
    text-shadow:
        0 0 7px rgb(187, 187, 187),
        0 0 10px rgb(255, 255, 255),
        0 0 21px rgb(255, 255, 255),
        0 0 42px rgb(234, 255, 0),
        0 0 82px rgb(207, 246, 51),
        0 0 92px rgb(207, 246, 51),
        0 0 102px rgb(207, 246, 51),
        0 0 151px rgb(234, 255, 0);
}

@media(min-width:768px) {

    .graphic__intro {
        font-size: 20px;
        padding: 10px;
        text-align: center;
        grid-column: 1/9;
    }

    .fa-wand-magic-sparkles {
        position: absolute;
        font-size: 3em;
        left: 50%;
        top: 850px;
        animation: shake 2s linear infinite;
    }

    .text-box2 {
        width: 90%;
        height: 40%;
        border-radius: 3.4em;
        margin-left: 20px;
        margin-right: 10px;
        padding: 20px;
        background-color: #3b75e2;
        margin-bottom: 70px;
    }

    .text-box2 p {
        color: var(--light);
        font-weight: bold;
        font-family: 'Inter';
    }
}

@media(min-width:992px) {
    .fa-wand-magic-sparkles {
        position: absolute;
        font-size: 3em;
        left: 450px;
        top: 830px;
        animation: shake 2s linear infinite;
    }

    .bobnoorda__cards,
    .ingredients__cards,
    .popup__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .graphic__container {
        margin-top: 100px;
        background: var(--primary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .graphic__container3 {
        margin-top: 100px;
        background: var(--primary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }
}

@media(min-width:1200px) {
    .fa-wand-magic-sparkles {
        position: absolute;
        font-size: 3em;
        left: 750px;
        top: 840px;
        animation: shake 2s linear infinite;
    }

    .text-box2 {
        width: 95%;
        height: 70%;
        border-radius: 3.4em;
        padding: 20px;
        background-color: #3b75e2;
        margin-bottom: 70px;
    }

    .text-box2 p {
        color: var(--light);
        font-weight: bold;
        font-family: 'Inter';
    }

    .graphic__container {
        margin-top: 100px;
        background: var(--primary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .graphic__container3 {
        margin-top: 100px;
        background: var(--primary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }
}

/* -------------------------------------------------------------------------------- */
/* ! SEZIONE LOGHI */
/* -------------------------------------------------------------------------------- */
.loghi__intro {
    font-size: 20px;
    padding: 10px;
    text-align: left;
    grid-column: 1/9;
}

.loghi__container {
    margin-top: 100px;
    background: var(--secondary);
    width: 100%;
    height: 100%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.fa-font-awesome {
    position: relative;
    font-size: 3em;
    left: 45%;
    top: 30px;
    animation: shake 2s linear infinite;
}

/* !! CREANDOMANIA */

.creandomania a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.creandomania h1 {
    padding: 20px;
}


.creandomania p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card29,
.card30,
.card31,
.card32 {
    display: flex;
    justify-content: center;
}

.card29 img,
.card30 img,
.card31 img,
.card32 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

/* !! PIXEL */

.loghi__container2 {
    margin-top: 70px;
}

.text-boxx {
    border-radius: 3.4em;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    background-color: #3b75e2;
    margin-bottom: 70px;
}

.text-boxx p {
    color: var(--light);
    font-weight: bold;
    font-family: 'Inter';
}

.pixel a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.pixel h1 {
    padding: 20px;
}


.pixel p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card33,
.card34,
.card35,
.card36 {
    display: flex;
    justify-content: center;
}

.card33 img,
.card34 img,
.card35 img,
.card36 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

.quote3 {
    margin-top: 60px;
    margin-bottom: 30px;
}

.quote3 h1 {
    line-height: 1.2em;
    font-weight: 200;
    font-family: 'Figtree';
    text-align: center;
    font-size: 5em;
    animation: pulsate 0.11s ease-in-out infinite alternate;

    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #f09,
        0 0 82px #f09,
        0 0 92px #f09,
        0 0 102px #f09,
        0 0 151px #f09;
}

@keyframes pulsate {

    100% {
        text-shadow:
            0 0 4px #fff,
            0 0 11px #fff,
            0 0 19px #fff,
            0 0 40px #f09,
            0 0 80px #f09,
            0 0 90px #f09,
            0 0 100px #f09,
            0 0 150px #f09;

    }

    0% {
        text-shadow:
            0 0 4px #fff,
            0 0 10px #fff,
            0 0 18px #fff,
            0 0 38px #f09,
            0 0 73px #f09,
            0 0 80px #f09,
            0 0 94px #f09,
            0 0 140px #f09;

    }
}

@media(min-width:768px) {
    .loghi__intro {
        font-size: 20px;
        padding: 10px;
        text-align: center;
        grid-column: 1/9;
    }

    .fa-font-awesome {
        position: absolute;
        font-size: 3em;
        left: 50%;
        top: 118%;
        animation: shake 2s linear infinite;
    }

    .text-box3 {
        width: 380px;
        height: 140px;
        border-radius: 3.4em;
        margin-left: 20px;
        margin-right: 10px;
        padding: 20px;
        background-color: #3b75e2;
        margin-bottom: 70px;
    }

    .text-box3 p {
        color: var(--light);
        font-weight: bold;
        font-family: 'Inter';
    }
}

@media(min-width:992px) {
    .fa-font-awesome {
        position: absolute;
        font-size: 3em;
        left: 50%;
        top: 850px;
        animation: shake 2s linear infinite;
    }

    .creandomania__cards,
    .pixel__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .loghi__container {
        margin-top: 100px;
        background: var(--secondary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }
}

@media(min-width:1200px) {
    .fa-font-awesome {
        position: absolute;
        font-size: 3em;
        left: 750px;
        top: 840px;
        animation: shake 2s linear infinite;
    }

    .text-box3 {
        width: 600px;
        height: 140px;
        border-radius: 3.4em;
        padding: 20px;
        background-color: #3b75e2;
        margin-bottom: 70px;
    }

    .text-box3 p {
        color: var(--light);
        font-weight: bold;
        font-family: 'Inter';
    }

    .graphic__container {
        margin-top: 100px;
        background: var(--primary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .graphic__container3 {
        margin-top: 100px;
        background: var(--primary);
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }
}

/* -------------------------------------------------------------------------------- */
/* ! ILLUSTRAZIONI PART */
/* -------------------------------------------------------------------------------- */

.illustrazioni__intro {
    font-size: 20px;
    padding: 10px;
    text-align: left;
    grid-column: 1/9;
}

.illustrazioni__container {
    margin-top: 100px;
    background: yellow;
    width: 100%;
    height: 100%;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.fa-paintbrush {
    position: relative;
    font-size: 3em;
    left: 45%;
    top: 30px;
    animation: animate 2s linear infinite;
}

/* !! qualche disegno */

.illustrazioni a {
    color: var(--dark);
    font-family: 'Inter';
    text-align: left;
}

.illustrazioni h1 {
    padding: 20px;
}


.illustrazioni p {
    padding: 20px;
    color: var(--dark);
    font-family: 'Figtree';
    text-align: left;
}

.card37,
.card38,
.card39,
.card40 {
    display: flex;
    justify-content: center;
}

.card37 img,
.card38 img,
.card39 img,
.card40 img {
    width: 300px;
    padding: 20px;
    border-radius: 20%;
}

.blockquote2 {
    margin-top: 50px;
}

.text-boxxx {
    border-radius: 3.4em;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    background-color: #3b75e2;
    margin-bottom: 70px;
}

.text-boxxx p {
    color: var(--light);
    font-weight: bold;
    font-family: 'Inter';
}


@media(min-width:768px) {
    .illustrazioni__intro {
        font-size: 20px;
        padding: 10px;
        text-align: center;
        grid-column: 1/9;
    }

    .fa-paintbrush {
        position: absolute;
        font-size: 3em;
        left: 50%;
        top: 115%;
        animation: animate 2s linear infinite;
    }
}

@media(min-width:992px) {
    .fa-paintbrush {
        position: absolute;
        font-size: 3em;
        left: 450px;
        top: 850px;
        animation: animate 2s linear infinite;
    }

    .illustrazioni__container {
        margin-top: 100px;
        background: yellow;
        width: 100%;
        height: 100%;
        border-radius: 3%;
    }

    .illustrazioni__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
}

@media(min-width:1200px) {
    .fa-paintbrush {
        position: absolute;
        font-size: 3em;
        left: 730px;
        top: 108%;
        animation: animate 2s linear infinite;
    }
}