/* BODY */
general html {
    font-size: 100%;
    line-height: 1.2rem;
    /* text-size adjust is to maintain the text-size even when the users rotates their phone to landscape view */
    -webkit-text-size-adjust: 100%;
    /* Firefox supports only the android version and safari supports only the ios version at the moment according to MDN (2023)*/
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    background-color: rgb(0, 0, 0); /* COLORE DI SFONDO */
    font-family: "Montserrat", Arial, sans-serif;
    margin: 0px;
}

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

/* GENERAL */
/* Fonts */
.large {
    font-weight: normal;
    line-height: normal;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 3rem;
    letter-spacing: 4px;
    font-weight: bold;
    margin: 0px;
    background-image: linear-gradient(
            135deg,
            rgb(251, 255, 0) 0%,
                /* COLORE TITOLO PRINCIPALE */ rgb(255, 0, 162) 80%
        /* COLORE TITOLO PRINCIPALE */
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
}

.medium-spacing {
    color: transparent; /* Imposta il colore del testo su trasparente */
    font-weight: normal;
    line-height: normal;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: 4px;
    margin: 0px;

    /* Aggiungi il gradiente al testo */
    background-image: linear-gradient(
            to right,
            rgb(251, 255, 0),
            rgb(255, 0, 162)
    ); /* Gradiente da rosso a verde e blu */
    -webkit-background-clip: text; /* Applica il gradiente solo al testo */
    background-clip: text; /* Per i browser non-Webkit */
    display: inline-block;
}

.medium-spacing-halfsize {
    font-weight: normal;
    line-height: normal;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: 4px;
    margin: 0px;
}

.main-title-large {
    font-weight: normal;
    line-height: normal;
    font-size: 3rem;
}

.main-title {
    font-weight: bold; /* Make the text bold */
    line-height: 1.5; /* Increase line height for more spacing */
    font-size: 2rem; /* Increase font size for emphasis */
    color: rgb(251, 255, 0); /* Keep the red color */
    text-shadow: 5px 5px 5px rgba(185, 17, 163, 0.555); /* Add a soft shadow for depth */
    letter-spacing: 1px; /* Add spacing between letters for a more playful look */
    font-family: "Comic Sans MS", cursive, sans-serif; /* Use a playful font */
}

.small {
    font-weight: normal;
    font-size: 0.7rem;
}

.quote {
    font-family: "Covered By Your Grace", cursive, sans-serif;
    font-size: 1.5em;
}

.uppercase {
    color: rgb(251, 255, 0);
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.colorful-letter {
    background-image: linear-gradient(
            135deg,
            rgb(250, 113, 283) 0%,
            rgb(255, 0, 162) 60% /* BACKGROUND IMAGE */
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Background colors */
.baby-pink {
    background-color: rgb(0, 0, 0); /* COLORE STRISCIA CENTRALE */
    margin: 20px auto; /* Top and bottom margin, auto for left/right centering */
    margin-left: 20%; /* Space on the left */
    margin-right: 20%; /* Space on the right */
    padding: 20px;
    text-align: center;
    border-radius: 20px; /* Rounded corners */
    border: 3px solid rgb(255, 0, 162); /* Border width, style, and color */
}

.baby-pink-light {
    background-color: rgba(0, 0, 0, 0.822);
    margin: 20px auto; /* Top and bottom margin, auto for left/right centering */
    margin-left: 40px; /* Space on the left */
    margin-right: 40px; /* Space on the right */
    padding: 20px;
    text-align: center;
    border-radius: 20px; /* Rounded corners */
    border: 2px solid rgb(255, 0, 221); /* Border width, style, and color */
}

/* Setting alignments and sizing */
/* for the flexbox */
.wrapper {
    max-width: 1500px;
    padding-left: 10%;
    padding-right: 10%;
    margin: auto;
    display: flex;
    gap: 25px;
}

.discord-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.discord-hover-image {
    display: none;
    position: absolute;
    top: 110%; /* Posiziona l'immagine sotto l'icona */
    left: 50%;
    transform: translateX(-60%);
    width: 400px; /* Regola la dimensione dell'immagine */
    border-radius: 10px;
}

.discord-container:hover .discord-hover-image {
    display: block;
}

/* --- Card --- */
.column {
    flex: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.column:hover {
    transform: translateY(-5px);
}

.w-900 {
    max-width: 900px;
    margin: auto;
}

/* for the grid system */
.grid-system-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-system-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* Contenitore video responsivo */
.video-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
    aspect-ratio: 16 / 9; /* Mantiene il rapporto larghezza/altezza */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
}

/* Video */
.video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    transition: filter 0.3s ease;
}

/* Overlay informazioni */
.video-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Sfondo scuro con trasparenza */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    padding: 5%;
    box-sizing: border-box;
}

/* Struttura per ogni immagine con testo */
.video-info-item {
    display: flex;
    justify-content: center; /* Centra gli elementi orizzontalmente */
    align-items: center; /* Centra gli elementi verticalmente */
    gap: 30px; /* Distanza fissa tra l'immagine e il testo */
    width: 100%;
}

/* Immagini */
.nav-image-video-info {
    width: 50px; /* Larghezza fissa per l'immagine */
    height: 50px; /* Altezza fissa per l'immagine */
    object-fit: cover; /* Mantiene il rapporto di aspetto */
    border-radius: 50%; /* Forma circolare per l'immagine */
    flex-shrink: 0; /* Mantiene la dimensione dell'immagine */
}

/* Testo */
.video-info-item p {
    font-size: 15px; /* Dimensione del font */
    margin: 0; /* Rimuove margini */
    word-wrap: break-word; /* Evita che il testo esca */
    text-align: center; /* Allinea il testo al centro */
    flex: 1; /* Permette al testo di occupare lo spazio rimanente */
}

/* Effetto hover */
.video-wrapper:hover .video-info {
    opacity: 1;
    transform: scale(1.1); /* Leggero ingrandimento */
}

/* Responsività su schermi piccoli */
@media screen and (max-width: 600px) {
    .video-info-grid {
        grid-template-columns: 1fr; /* Una sola colonna su mobile */
        gap: 15px;
    }

    .nav-image-video-info {
        width: 10px;
        height: 10px;
    }

    .video-info-item p {
        font-size: 4px;
    }
}

.video-wrapper:hover video {
    filter: brightness(50%);
}

/* Testo dentro l'overlay */
.video-info h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.video-info p {
    font-size: 16px;
    max-width: 80%;
}

/* Effetto hover: Mostra overlay e scurisce il video */
.video-wrapper:hover .video-info {
    opacity: 1;
}

.video-wrapper:hover video {
    filter: brightness(50%);
}

.user-items-list-item video {
    max-width: 100%; /* Make video responsive */
    height: auto; /* Maintain aspect ratio */
}

/* other */
.max-width {
    max-width: 450px;
}

.max-height {
    max-height: 350px;
}

.align-center {
    align-self: center;
}

.justify-content {
    justify-content: right;
}

.justify {
    text-align: justify;
    color: #ffffff; /* COLORE TUTTE SCRITTE */
}

.principalText {
    text-align: justify;
    color: #ffffff;
    font-size: 1.5rem;
}

.boldText {
    font-weight: bold;
    color: #fbff01; /* Colore desiderato per le parole in grassetto */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.secondboldText {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fbff01; /* Colore desiderato per le parole in grassetto */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.center {
    text-align: center;
}

.padding {
    padding: 20px;
}

.padding-top {
    padding-top: 20px;
}

.padding-right {
    padding-right: 20px;
}

.padding-bottom {
    padding-bottom: 20px;
    color: #ff0000;
}

.padding-left {
    padding-left: 20px;
}

.margin-auto {
    margin: auto;
}

.margin-trbl10 {
    margin: 10px;
}

/* for sticky bottom button */
.flex {
    display: flex;
    flex-direction: column;
}

.bottom {
    align-self: flex-start;
    margin-top: auto;
}

/* Stile generale per i bottoni */
.button,
.button-outline {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 30px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Bottone principale */
.button {
    background: linear-gradient(135deg, #00ff87, #0084ff);
    color: white;
    border: none;
}

/* Bottone con bordo */
.button-outline {
    border: 3px solid #ff0080;
    color: #ff0080;
    background: transparent;
}

/* Effetti hover */
.button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 255, 135, 0.5);
}

.button-outline:hover {
    background: #ff0080;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(255, 0, 128, 0.5);
}

.button:hover,
.button-outline:hover {
    animation: pulse 0.5s ease-in-out;
}

/* Centrare il bottone */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.link {
    text-decoration: none;
}

/* I had to double this code, because of the :hover and :active on link above */
.link-no-scale {
    text-decoration: none;
}

.no-padding-list-item {
    padding-left: 0;
}

.padding-list-10 {
    padding: 10px;
}

.no-bullet-list {
    list-style-type: none;
}
/* ---------------------------------- */

.link:hover,
.link:active {
    font-size: 1.2rem;
    transform: scale(1.5);
    transition: 1s ease-in-out;
    /* second solution: */
    /* font-size: 1.2rem; 
      transition: font-size 2s ease-in-out;  */
}

.progress-bar:hover,
.progress-bar:active {
    box-shadow: 6px 5px 5px rgba(31, 255, 1, 0.788);
    transition: box-shadow 1s ease;
}

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

/* NAV */
nav {
    margin-bottom: 30px;
}

.main-nav {
    background-color: rgb(17, 17, 17); /* colore bordo superiore */
    display: flex;
    list-style-type: none;
    justify-content: center;
    padding: 30px;
    margin: 0px;
    align-items: center; /* Allinea verticalmente */
}

/* Stile per gli elementi della navigazione */
.main-nav li {
    padding: 5px 15px;
}

.main-nav li a {
    color: rgb(255, 0, 162); /* COLORE SCRITTE BORDO SUPERIORE */
    text-decoration: none;
    font-size: 150%;
    transition: all 0.3s ease;
}

.main-nav li a:hover {
    color: rgb(
            251,
            255,
            0
    ); /* COLORE QUANDO PASSO SOPRA IL MOUSE BORDO SUPERIORE */
    text-decoration: none;
    font-weight: bold;
}

.sticky {
    position: sticky;
    z-index: 1000; /* Rende il menu sopra gli altri contenuti */
    top: 0;
    align-self: flex-start; /* <-- this is the fix */
}

/* Immagini della navigazione */
.nav-image {
    width: 70px; /* Larghezza dell'immagine */
    height: 70px; /* Altezza dell'immagine */
    object-fit: cover; /* Adatta l'immagine al contenitore */
    border-radius: 50%; /* Arrotonda gli angoli dell'immagine */
    transition: transform 0.3s, opacity 0.3s, filter 0.3s; /* Transizione per l'effetto hover */
}

/* Effetto hover sulle immagini */
.nav-image:hover {
    transform: scale(1.2); /* Effetto zoom al passaggio del mouse */
    /* Cambia colore dell'immagine al passaggio del mouse */
}

/* Sposta le immagini a destra con più spazio dal testo */
.nav-images-container {
    display: flex;
    gap: 10px; /* Spazio tra le immagini */
}

/* Nav-icon */
.toggle,
#drop {
    display: none;
}

#main-toggle {
    border: 1px solid #ffc400;
    float: right;
    padding: 20px;
    /* position: relative; */
    user-select: none;
}

.nav-icon {
    background-color: #0011ff;
    display: block;
    height: 3px;
    width: 10px;
    position: relative;
}

.nav-icon::before,
.nav-icon::after {
    background-color: #df36854d;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
}

.nav-icon::before {
    top: 5px;
}

.nav-icon::after {
    top: -5px;
}
/* ---------------------------------- */

/* FOOTER */
footer {
    color: #000000;
    text-align: center;
    padding: 20px 0px;
}
/* ---------------------------------- */

/* INTRODUCTION */
.header-img {
    border-radius: 70%;
}
/* ---------------------------------- */

/* ARTICLE */
/* Everything here is made with general classes. Find them in the GENERAL section */
/* ---------------------------------- */

/* ABOUT ME */
/* Everything here is made with general classes. Find them in the GENERAL section */
/* ---------------------------------- */

/* SKILLS */
.skills {
    list-style: none;
    text-transform: uppercase;
    color: #ffffff;
    font-family: "Arial", sans-serif; /* Scegli una font elegante e leggibile */
    font-weight: bold; /* Rende il testo più marcato */
    font-size: 1.2rem; /* Aumenta leggermente la dimensione del testo */
    letter-spacing: 2px; /* Aggiungi spaziatura tra le lettere per un aspetto più elegante */
    margin: 20px 0; /* Spazio sopra e sotto */
    padding: 10px 0; /* Distanza tra gli elementi */
    cursor: pointer;
    text-shadow: 5px 5px 5px rgb(255, 0, 221); /* Add a soft shadow for depth */
}

.skills li {
    margin-bottom: 10px; /* Spazio tra ogni elemento della lista */
    transition: all 0.3s ease; /* Transizione per un effetto più fluido */
}

.skills li:hover {
    transform: translateX(
            5px
    ); /* Aggiungi un effetto di spostamento per un tocco dinamico */
}

.progress-bar {
    background-color: #ffffff; /* BG BARRA PROGRESSIONE */
    display: block;
    height: 10px;
    border-radius: 20px;
}

.progress-bar span {
    height: 10px;
    float: left;
    background: linear-gradient(
            135deg,
            rgb(251, 255, 0) 0%,
            rgb(255, 0, 162) 50% /* COLORE BARRA PROGRESSIONE A DESTRA */
    );
    border-radius: 20px;
    -webkit-background: linear-gradient(
            135deg,
            rgb(255, 153, 0) 0%,
            rgb(23, 122, 53) 60%
    );
    -webkit-border-radius: 20px;
}

.html {
    width: 100%;
    animation: html 2s;
}

.css {
    width: 100%;
    animation: css 2s;
}

.javascript {
    width: 100%;
    animation: javascript 2s;
}

.php {
    width: 100%;
    animation: php 2s;
}

.comm-adapt {
    width: 100%;
    animation: comm-adapt 2s;
}

.team-player {
    width: 100%;
    animation: team-player 2s;
}

.problem-solving {
    width: 100%;
    animation: problem-solving 2s;
}

.open-minded {
    width: 100%;
    animation: open-minded 2s;
}

@keyframes html {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes css {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes javascript {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes php {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes comm-adapt {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes team-player {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes problem-solving {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes open-minded {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}
/* ---------------------------------- */

/* PROJECTS */
/* I also used these card settings on other sub-pages */
.card {
    background-color: #292222b6; /* Light background for the card */
    padding: 10px; /* Increase padding inside the card */
    box-shadow: 5px 5px 5px rgb(125, 9, 202); /* Slight shadow for depth */
    width: 100%; /* Set width of the card (adjust as needed) */
    margin: 20px auto; /* Center the card with automatic margins */
}

.box {
    display: block;
    width: 60px;
}

.card h4 {
    font-weight: bold; /* Make the text bold */
    font-size: 2rem; /* Increase font size for emphasis */
    color: #fbff00; /* Keep the red color */
    text-shadow: 5px 5px 5px rgba(167, 10, 206, 0.507); /* Add a soft shadow for depth */
    letter-spacing: 1px; /* Add spacing between letters for a more playful look */
    font-family: "Comic Sans MS", cursive, sans-serif; /* Change the color of the project title to blue */
}

/* Paragraph styles */
.card p {
    color: #333; /* Change the color of the paragraph text to dark gray */
}

/* Contenitore principale */
.text-image-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Ogni elemento di testo e immagine */
.text-image-item {
    display: flex;
    align-items: center;
    gap: 100px;
    font-family: "Roboto", sans-serif; /* Font moderno */
}

/* Immagini */
.side-image {
    width: 60px; /* Aumentata la dimensione dell'immagine */
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.781); /* Aggiunta ombra per un effetto figo */
}

/* Testo */
.text-image-item p {
    font-size: 20px; /* Testo grande */
    margin: 0;
    color: #f0f0f0; /* Colore chiaro */
    font-weight: bold; /* Grassetto */
    text-transform: uppercase; /* Tutto maiuscolo */
    letter-spacing: 0.5px; /* Distanza letterale più piccola */
    text-shadow: 2px 2px 6px rgb(195, 0, 255, 0.8); /* Ombra del testo */
}

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

/* CONTACT ME */
.box-contact {
    display: block;
    width: 100%;
    text-align: center;
}

.logo {
    width: 50px;
}

/* Centrare il testo */
#contact-me {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-top: 100px;
}

/* Titolo */
.contact-title {
    font-size: 2rem;
    font-weight: bold;
}

/* Descrizione */
.contact-description {
    font-size: 1.2rem;
    max-width: 600px; /* Evita che il testo sia troppo largo */
    margin: 0 auto 20px auto; /* Centra il paragrafo */
    color: #ddd; /* Colore leggermente più tenue per lo stile */
}

/* CONTATTI */

/* Sezione Contatti */
#contatti {
    text-align: center;
    padding: 40px 20px;
    color: #ffd900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Titolo */
#contatti h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Contenitore informazioni */
.contact-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap; /* Permette la disposizione verticale su schermi piccoli */
    width: 100%;
    max-width: 900px; /* Limita la larghezza massima per evitare che diventi troppo largo su schermi grandi */
    margin: 0 auto; /* Centrato orizzontalmente */
}

/* Singolo elemento contatto */
.contact-item {
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    text-align: center; /* Centra il testo all'interno dell'elemento */
    width: 100%;
    max-width: 350px; /* Evita che gli elementi siano troppo larghi */
}

/* Effetto hover */
.contact-item:hover {
    transform: scale(1.05);
}

/* Testo evidenziato */
.email-text,
.phone-text {
    flex-wrap: wrap;
    font-weight: bold;
    color: #f8e800; /* Colore giallo acceso */
}

/* RESPONSIVE */
@media screen and (max-width: 600px) {
    .contact-info {
        flex-direction: column; /* Disposizione verticale su schermi piccoli */
        gap: 15px;
    }

    .contact-item {
        width: 80%; /* Occupa l'80% della larghezza disponibile */
        max-width: 350px; /* Limita la larghezza degli elementi */
    }
}

/* FINE CONTATTI */

#regardes {
    margin-top: 30px;
    color: #fd8700; /* Colore del testo */
}

#contatti h2 {
    text-align: center; /* Centra il titolo */
    font-size: 2vw; /* Dimensione del font scalabile */
    margin-bottom: 30px; /* Margine sotto il titolo */
}

.contact-info {
    display: flex;
    justify-content: space-between; /* Spazio tra email e telefono */
    width: 100%; /* Occupare tutta la larghezza disponibile */
}

.email,
.phone {
    flex-wrap: wrap;
    flex: 1; /* Permette di espandere le colonne */
    display: flex; /* Usa flexbox all'interno delle colonne */
    justify-content: center; /* Centra il testo orizzontalmente */
    align-items: center; /* Centra il testo verticalmente */
    margin: 0 10px; /* Margine laterale per spaziatura */
}

.email-text,
.phone-text {
    flex-wrap: wrap;
    color: #ff0062;
    font-size: 1.5rem; /* Dimensione del testo */
}

/* Footer */
footer {
    text-align: center;
    padding: 20px 0;
    color: #ffffff; /* Colore del testo del footer */
}

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

/* SPECIAL THANKS */
/* Everything here is made with general classes. Find them in the GENERAL section */
/* ---------------------------------- */

/* RESPONSIVENESS */
/* Had to pay attention for that wondow.innerWidth when calculated max-width */
@media screen and (max-width: 867px) {
    body {
        font-size: 90%;
    }

    .grid-system-2 {
        grid-template-columns: 1fr;
    }

    .large {
        font-size: 4rem;
    }

    .medium-spacing {
        font-size: 2.5rem;
    }

    .main-title-large {
        font-size: 2rem;
        text-align: center;
        margin: 0;
    }

    .main-title {
        text-align: center;
        margin: 0;
    }

    .small {
        font-size: 0.6rem;
    }

    .max-width {
        max-width: 300px;
    }

    .max-height {
        max-height: 250px;
    }

    .padding-top {
        padding-top: 10px;
    }

    .padding-right {
        padding-right: 10px;
    }

    .padding-bottom {
        padding-bottom: 10px;
    }

    .padding-left {
        padding-left: 10px;
    }

    .logo {
        width: 40px;
    }
}

/* wrapper on home page looks better with this @media */
@media screen and (max-width: 750px) {
    .wrapper {
        /*flex-direction: column;*/

        display: flex;
        flex-wrap: wrap; /* Permette la disposizione verticale su schermi piccoli */
        justify-content: center; /* Centra gli elementi */
        gap: 20px 0px; /* Distanza tra le card */
        padding: 20px;
    }

    .column {
        flex: 100%;
    }

    .box {
        margin: auto;
    }

    .thanks {
        text-align: center;
    }
}

/* media query for hamburger menu with dropdown */
@media screen and (max-width: 510px) {
    .main-nav {
        display: none;
    }

    .toggle {
        display: block;
        background-color: #ff0000;
        border: 1px solid #ff0077;
    }

    .toggle:hover {
        background-color: #ff0000;
    }

    #drop:checked + .main-nav {
        display: block;
    }

    nav {
        padding-bottom: 25px;
    }

    .max-width {
        max-width: 100%;
    }
}

/* media query for smaller screens */
/* smaller fonts were my way to go */
@media screen and (max-width: 377px) {
    body {
        line-height: 1.5rem;
    }

    .large {
        font-size: 3rem;
    }

    .medium-spacing {
        font-size: 1.5rem;
    }

    .medium-spacing-halfsize {
        font-size: 1.5rem;
    }

    .main-title {
        font-size: 1rem;
    }

    .main-title-large {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 600px) {
    .video-info-item {
        flex-direction: column; /* Allinea gli elementi verticalmente su schermi piccoli */
        gap: 10px; /* Riduce il gap tra immagine e testo su schermi piccoli */
    }

    .nav-image-video-info {
        width: clamp(
                30px,
                20vw,
                60px
        ); /* Immagini più piccole su schermi piccoli */
        height: clamp(30px, 20vw, 60px);
    }

    .video-info-item p {
        font-size: clamp(
                12px,
                5vw,
                18px
        ); /* Testo più piccolo su schermi piccoli */
    }
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
    body {
        background-color: rgba(45, 45, 45, 1);
        color: white;
    }

    .baby-pink {
        background-color: rgb(243, 162, 200);
    }

    .baby-pink-light {
        background-color: rgba(45, 45, 45, 1);
        border: 2px solid rgb(243, 162, 200);
    }

    .main-nav {
        background-color: rgba(45, 45, 45, 1);
    }

    .main-nav li a {
        color: white;
    }

    .main-nav li a:hover {
        color: rgb(254, 175, 210);
    }

    #main-toggle {
        border: 1px solid rgba(255, 255, 255, 0.6);
        background-color: rgba(45, 45, 45, 1);
    }

    .nav-icon {
        background-color: rgba(255, 255, 255, 0.6);
    }

    .nav-icon::before,
    .nav-icon::after {
        background-color: rgba(255, 255, 255, 0.6);
    }

    .card {
        box-shadow: 0 0px 0px;
        border: 2px solid rgb(0, 0, 0);
    }

    .logo {
        background-color: white;
        padding: 2px;
        border-radius: 4px;
    }

    .hobbies {
        background-color: white;
        border-radius: 100%;
        padding: 10px;
    }

    footer {
        color: white;
    }

    @media screen and (max-width: 929px) {
        .baby-pink-light {
            margin-left: 10px;
            margin-right: 10px;
        }
    }
}



.discord-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.discord-hover-image {
    display: none;
    position: absolute;
    top: 110%; /* Posiziona l'immagine sotto l'icona */
    left: -200%;
    transform: translateX(-60%);
    width: 400px; /* Regola la dimensione dell'immagine */
    border-radius: 10px;
}

.discord-container:hover .discord-hover-image {
    display: block;
}


.video-container {
    margin-top: 300px; /* Utilizza la variabile per il margine superiore */
    padding: 20px; /* Spaziatura attorno al video */
    border-radius: 10px; /* Angoli arrotondati */
    text-align: center; /* Allinea il video al centro */
    width: 100%; /* Occupa tutta la larghezza disponibile */
    max-width: 1200px; /* Imposta una larghezza massima per il contenitore del video */
    margin-left: auto; /* Centra il contenitore orizzontalmente */
    margin-right: auto; /* Centra il contenitore orizzontalmente */
}

video {
    width: 80%; /* Larghezza del video */
    height: auto; /* Altezza automatica */
    border-radius: 10px; /* Angoli arrotondati */
    background-color: #000000;
}

.video-title {
    font-size: 2vw; /* Dimensione del titolo scalabile */
    margin-bottom: 10px;
    color: #ffffff; /* Margine inferiore per separare il titolo dal video */
}

.navigation {
    text-align: left; /* Allinea a sinistra */
    padding: 10px 20px; /* Padding attorno */
}

.back-button {
    color: #ff0000; /* Colore del link */
    font-size: 18px; /* Dimensione del font */
}

.titles {
    text-align: center; /* Allinea al centro */
    margin: 20px 0; /* Margini superiori e inferiori */
}

.titles h2 {
    font-size: 24px; /* Dimensione del titolo */
}

.container {
    margin-left: 100px; /* Margine sinistro */
    margin-right: 100px; /* Margine destro */
    margin-top: 0px; /* Margine superiore */
    margin-bottom: 0px; /* Margine inferiore */
    display: flex;
    height: auto;
    justify-content: space-between; /* Spaziatura tra i box */
    gap:100px; /* Spazio tra i due box */
    overflow: hidden; /* Nasconde qualsiasi overflow */
}

.box {
    background-color:  #ffffff; /* Colore di sfondo */
    border-radius: 100px; /* Raggio del bordo */
    height: auto;
    padding: 100px; /* Padding interno */
    width: 100px; /* Larghezza del box */
    box-shadow: 0px 0px 40px #ffffff; /* Ombra */
}

.description-title {
    font-size: 2pc; /* Dimensione del titolo scalabile */
    margin-bottom: 10px; /* Margine inferiore */
    color: #ffffff;
}

.description-box {
    border: #ffffff;/* Bordo della descrizione */
    padding: 100px; /* Padding interno */
    border-radius: 20px; /* Angoli arrotondati */
    background-color: #ffffff;/* Sfondo semi-trasparente */
    margin-top: 0px; /* Margine superiore */
}


/* descrizione progetto*/
.image-description {
    width: 100%; /* Occupa tutta la larghezza del contenitore */
    max-width: 1200px; /* Larghezza massima per il contenitore */
    margin: 20px auto; /* Centra il contenitore con margine superiore */
    text-align: center; /* Allinea il testo al centro */
    padding: 20px; /* Padding interno */
}

.image-title {
    font-size: 2.5vw; /* Dimensione scalabile per il titolo */
    margin-bottom: 20px; /* Margine inferiore */
    color: #ffffff; /* Colore del titolo */
}

.project-image {
    width: 700%; /* Larghezza dell'immagine */
    height: auto; /* Mantiene l'aspetto dell'immagine */
    border-radius: 10px; /* Angoli arrotondati per l'immagine */
    margin-bottom: 10px; /* Margine inferiore */

}

.image-description-text {
    font-size: 1.5vw; /* Dimensione scalabile per il testo descrittivo */
    color: #ffffff; /* Colore del testo della descrizione */
    max-width: 100%; /* Limita la larghezza del testo descrittivo */
    margin: 0 auto; /* Centra il testo */
}



/* Ogni elemento di testo e immagine */
.text-image-item-project {
    display: flex;
    align-items: center;
    font-family: "Poppins", sans-serif; /* Font moderno e informale */
}

/* Testo */
.text-image-item-project p {
    font-size: 18px; /* Testo più leggibile */
    margin: 0;
    color: #f5f5f5; /* Colore chiaro per contrasto */
    font-weight: 400; /* Peso normale per un look più rilassato */
    text-transform: none; /* No maiuscolo forzato per naturalezza */
    letter-spacing: 0.3px; /* Distanza più equilibrata tra le lettere */
    line-height: 1.4; /* Migliora la leggibilità */
}

.image-container {
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.responsive {
    max-width: 100%; /* Ensures the image width doesn't exceed the container's width */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Removes any unwanted space below the image */
}