/* ╔══════════════════════════════════════════════╗
   ╠════════════╣ INFORMATION CENTER ╠════════════╣
   ╚══════════════════════════════════════════════╝
   This is where you will find all the important   
   information you need to know.                    */

/* [!!] IMPORTANT: Read THEME SWITCHER comments !  
   Changing --color-transition-speed will also     
   change some animations speed.                    */

/* ╔══════════════════════════════════════════════╗
   ╠══════════════╣ CONTROL CENTER ╠══════════════╣
   ╚══════════════════════════════════════════════╝
   This is where all variables can be adjusted.     */

:root {
    /*─────────────────┤GENERAL RULES├──────────────────*/
    
    color-scheme: light dark;

    /*────────────────┤STATIC VARIABLES├────────────────*/

    --font-size: 1rem;
    --font: "Comfortaa", sans-serif;
    --title-font: "Merienda", cursive;
    
    /*────────────────┤ANIMATIONS SPEED├────────────────*/

    --header-buttons-speed: 0.3s;
    --color-transition-speed: 0.3s;
    --nav-tab-speed: 0.5s;
    --svg-animation-speed: 2.5s;

    /*────────────────┤THEMED VARIABLES├────────────────*/

    --text-color: /*LIGHT*/ rgb(48, 43, 40),
                  /*DARK*/ rgb(207, 212, 215);
    --title-text-color: /*LIGHT*/ rgb(21, 21, 21),
                        /*DARK*/ rgb(234, 234, 234);
    --grid-item-svg-color: /*LIGHT*/ rgb(0, 0, 0),
                           /*DARK*/ rgb(255, 255, 255);
    --grid-item-svg-shadow-color: /*LIGHT*/ rgba(180, 180, 180, 0.5),
                                  /*DARK*/ rgba(255, 255, 255, 0.3);
    --grid-item-shadow-color: /*LIGHT*/ rgb(57, 57, 57),
                              /*DARK*/ rgb(255, 255, 255);

    /*───────────┤SMOOTH GRADIENT TRANSITION├───────────*/

    /*Gradient colors*//*▶▶▶ AI-generated: Light gradients*/
    --background-color-1: /*LIGHT*/ rgb(165, 214, 252),
                          /*DARK*/ rgb(50, 0, 140);
    --background-color-2: /*LIGHT*/ rgb(239, 246, 255),
                          /*DARK*/ rgb(0, 0, 0);
    --header-background-color-1: /*LIGHT*/ rgba(255, 255, 255, 0.65),
                                 /*DARK*/ rgba(140, 140, 140, 0.4);
    --header-background-color-2: /*LIGHT*/ rgba(255, 255, 255, 0.4),
                                 /*DARK*/ rgba(80, 80, 80, 0.4);
    --grid-item-background-color-1: /*LIGHT*/ rgba(255, 255, 255, 0.65),
                                    /*DARK*/ rgba(140, 140, 140, 0.4);
    --grid-item-background-color-2: /*LIGHT*/ rgba(255, 255, 255, 0.4),
                                    /*DARK*/ rgba(80, 80, 80, 0.4);
    
    /*DO NOT EDIT*//*Binding the gradient color to its theme color*/
    --backgroundColor1: light-dark(var(--background-color-1));
    --backgroundColor2: light-dark(var(--background-color-2));
    --headerBackgroundColor1: light-dark(var(--header-background-color-1));
    --headerBackgroundColor2: light-dark(var(--header-background-color-2));
    --gridItemBackgroundColor1: light-dark(var(--grid-item-background-color-1));
    --gridItemBackgroundColor2: light-dark(var(--grid-item-background-color-2));
    
    /*EDIT DEGREES ONLY*//*Gradients creation*/
    --background-image: linear-gradient(160deg, var(--backgroundColor1), var(--backgroundColor2));
    --header-background-image: linear-gradient(145deg, var(--headerBackgroundColor1), var(--headerBackgroundColor2));
    --grid-item-background-image: linear-gradient(145deg, var(--gridItemBackgroundColor1), var(--gridItemBackgroundColor2));
    
    /*DO NOT EDIT*//*Smoothing the transition between gradients*/
    transition: --backgroundColor1 var(--color-transition-speed) ease-in-out,
                --backgroundColor2 var(--color-transition-speed) ease-in-out,
                --headerBackgroundColor1 var(--color-transition-speed) ease-in-out,
                --headerBackgroundColor2 var(--color-transition-speed) ease-in-out,
                --gridItemBackgroundColor1 var(--color-transition-speed) ease-in-out,
                --gridItemBackgroundColor2 var(--color-transition-speed) ease-in-out;
}

/* ╔══════════════════════════════════════════════╗
   ╠════════════════╣ CSS RESET ╠═════════════════╣
   ╚══════════════════════════════════════════════╝
   This is a reset to the CSS default style.        */

* {
  padding: 0; /* Delete default paddings */
  margin: 0; /* Delete default margins */
  box-sizing: border-box; /* Add paddings/borders to the width/height */
}

/*                 ╔══════════════╗
   ╔═══════════════╝ CSS PROPERTY ╚═══════════════╗
   ╠═══════════════╣ ════════════ ╠═══════════════╣
   ╚═══════════════╗ DO NOT EDIT  ╔═══════════════╝
                   ╚══════════════╝               
   These properties are used to create smooth      
   transitions for all gradients on the page.       */

/*────────────────┤HTML BACKGROUND├─────────────────*/

@property --backgroundColor1 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(255, 255, 255);
}

@property --backgroundColor2 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(0, 0, 0);
}

/*───────────────┤HEADER BACKGROUND├────────────────*/

@property --headerBackgroundColor1 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(255, 255, 255);
}

@property --headerBackgroundColor2 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(0, 0, 0);
}

/*──────────────┤GRID ITEM BACKGROUND├──────────────*/

@property --gridItemBackgroundColor1 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(255, 255, 255);
}

@property --gridItemBackgroundColor2 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(0, 0, 0);
}

/* ╔══════════════════════════════════════════════╗
   ╠════════════════╣ CSS PRESET ╠════════════════╣
   ╚══════════════════════════════════════════════╝
   These are the default settings for certain      
   elements, which provide a starting point and    
   help you visualize what you're building from the
   outset.                                          */

/*Removes default link formatting*/
a {
    color: light-dark(var(--text-color));
    text-decoration: none;
}

/*Centers important titles and gives them space*/
h1 {
    color: light-dark(var(--title-text-color));
    font-family: var(--title-font);
    text-align: center;
    align-content: center;
    padding: 1rem;
}

/*Avoids huge images as soon as they are inserted*/
svg {
    width: 5rem;
    height: 5rem;
}
    
/*                ╔════════════════╗
   ╔══════════════╝ THEME SWITCHER ╚══════════════╗
   ╠══════════════╣ ══════════════ ╠══════════════╣
   ╚══════════════╗ [!!] IMPORTANT ╔══════════════╝
                  ╚════════════════╝      
   This is the CSS that powers the theme switcher.  */
                                                    
/* [!!] IMPORTANT: Do not override these transitions
   in a component if they involve theme-defined     
   colors (e.g., "light-dark(...)" variables).      
   Doing so will desynchronize the component's      
   color animation with the global theme change.     */

/*Set the default color transition speed*/
* {
    transition: color var(--color-transition-speed) ease-in-out,
                background-color var(--color-transition-speed) ease-in-out,
                box-shadow var(--color-transition-speed) ease,
                filter var(--color-transition-speed) ease-in-out;
}

/*DO NOT EDIT*//*Checkbox hack*/
#theme-switch {
    display: none;
}

/*Superposition of the two logos*/
#moon, #sun {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: opacity var(--color-transition-speed) ease-in-out,
                transform var(--color-transition-speed) ease-in-out;
}

/*Clickable box to change theme*/
#theme-switch-label {
    width: 2rem;
    height: 2rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: filter var(--header-buttons-speed) ease-in-out;
}

/*─────────────────┤LOGO ANIMATION├─────────────────*/

#theme-switch-label:hover {
    filter: drop-shadow(0 0 0.4rem light-dark(var(--grid-item-shadow-color)))
}

/*─┤DINAMIC THEME SWITCHER + TRANSITION ANIMATION├──*/

/*SWITCH LIGHT TO DARK*/
@media (prefers-color-scheme: light) {
    #moon {opacity: 1;}
    #sun {opacity: 0;}
    :root:has(#theme-switch:checked) {
        color-scheme: dark;
        #moon {opacity: 0; transform: rotateZ(360deg);}
        #sun {opacity: 1; transform: rotateZ(360deg);}
    }
}

/*SWITCH DARK TO LIGHT*/
@media (prefers-color-scheme: dark) {
    #moon {opacity: 0;}
    #sun {opacity: 1;}
    :root:has(#theme-switch:checked) {
        color-scheme: light;
        #moon {opacity: 1; transform: rotateZ(360deg);}
        #sun {opacity: 0; transform: rotateZ(360deg);}
    }
}

/* ╔══════════════════════════════════════════════╗
   ╠══════════════╣ NAVIGATION TAB ╠══════════════╣
   ╚══════════════════════════════════════════════╝
   This is the CSS that powers the navigation tab.  */

/*DO NOT EDIT*//*Checkbox hack*/
#nav-bar {
    display: none;
}

/*Default value for all three dashes*/
#up-dash, #middle-dash, #down-dash {
    width: 100%;
    height: 100%;
    transition: transform var(--header-buttons-speed) ease-in-out;
}

/*Clickable box to open the navigation tab*/
#nav-bar-label {
    width: 1.7rem;
    height: 1.7rem;
    flex-direction: column;
    margin-left: 0.5rem;
    cursor: pointer;
    transition: transform var(--header-buttons-speed) ease-in-out;
}

/*─────────────────┤LOGO ANIMATION├─────────────────*/

#nav-bar-label:hover {
    #up-dash {transform: rotateZ(-33deg) translateX(-18%);}
    #down-dash {transform: rotateZ(33deg) translateX(-18%);}
    transform: rotateZ(-90deg)
}

header:has(#nav-bar:checked) #nav-bar-label:hover {
    #up-dash {transform: rotateZ(33deg) translateX(18%);}
    #down-dash {transform: rotateZ(-33deg) translateX(18%);}
    transform: rotateZ(-90deg)
}

/*──────────────┤NAVIGATION TAB BODY├───────────────*/

#nav-tab {
    z-index: 1;
    width: fit-content;
    height: 0;
    position: absolute;
    right: 0.5rem;
    top: 5rem;
    padding: 1rem;
    overflow-y: auto;
    opacity: 0;
    border-radius: 0.5rem;
    backdrop-filter: blur(20px);
    background-image: var(--header-background-image);
    transition: height var(--nav-tab-speed) ease-in-out, 
                opacity var(--nav-tab-speed) ease-in-out;
}

:root:has(#nav-bar:checked) #nav-tab {
    width: fit-content;
    height: calc(100% - 9rem);
    opacity: 1;
}

/*─────────────┤NAVIGATION TAB CONTENT├─────────────*/

#links-nav-tab {
    display: flex;
    flex-direction: column;
}

#links-nav-tab > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3rem 0.6rem 0.3rem 0.6rem;
    margin: 0.25rem;
    border-radius: 0.5rem;
    background-image: var(--header-background-image);
}

#links-nav-tab > *:hover {
    filter: drop-shadow(0 0 0.5rem light-dark(var(--grid-item-svg-shadow-color)));
    box-shadow: 0 0 0.5rem light-dark(var(--grid-item-svg-shadow-color));
}

#links-nav-tab-logo {
    width: 1rem !important;
    height: 1rem !important;
    position: relative;
    margin-right: 0.5rem;
}

/*────────────────┤BLUR BACKGROUND├─────────────────*/

#blur-layer {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    backdrop-filter: blur(0);
    transition: backdrop-filter var(--nav-tab-speed) ease-in-out;
}

/*Blur animation*/
:root:has(#nav-bar:checked) #blur-layer {
    backdrop-filter: blur(5px);
}

/*──────────────┤MISCLICK PROTECTION├───────────────*/

#misclick-protection {
    z-index: -1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

:root:has(#nav-bar:checked) #misclick-protection {
    z-index: 1;
}

/* ╔══════════════════════════════════════════════╗
   ╠════════════════╣ FULL PAGE ╠═════════════════╣
   ╚══════════════════════════════════════════════╝
   This CSS applies to the whole page.              */

html {
    font-size: var(--font-size);
    color: light-dark(var(--text-color));
    font-family: var(--font);
    min-height: 100vh;
    background-image: var(--background-image);
}

/* ╔══════════════════════════════════════════════╗
   ╠═══════════════════╣ BODY ╠═══════════════════╣
   ╚══════════════════════════════════════════════╝
   This CSS applies to the whole body.              */

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0.5rem;
}

/* ╔══════════════════════════════════════════════╗
   ╠══════════════════╣ HEADER ╠══════════════════╣
   ╚══════════════════════════════════════════════╝
   This CSS applies to the whole header.            */

header {
    z-index: 2;
    font-family: var(--title-font);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(1rem);
    background-image: var(--header-background-image);
}

/*Vertically aligns all header content*/
header * {
    color: light-dark(var(--title-text-color));
    display: flex;
    align-items: center;
}

/* ╔══════════════════════════════════════════════╗
   ╠═══════════════════╣ MAIN ╠═══════════════════╣
   ╚══════════════════════════════════════════════╝
   This CSS applies to the whole main.              */

main{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ╔══════════════════════════════════════════════╗
   ╠══════════════════╣ FOOTER ╠══════════════════╣
   ╚══════════════════════════════════════════════╝
   This CSS applies to the whole footer.            */

footer {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin-top: 1rem;
}

/* ╔══════════════════════════════════════════════╗
   ╠═════════════╣ GENERIC CLASSES ╠══════════════╣
   ╚══════════════════════════════════════════════╝
   These are generic classes that can be used      
   anywhere.                                        */

.i-am-clickable {
    cursor: pointer;
}

/* ╔╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╗
   ╠╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╩╩╩╩╩╩╩╩╩╩╩╩╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╣
   ╠╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╣ Index.html ╠╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╣
   ╠╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╦╦╦╦╦╦╦╦╦╦╦╦╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╣
   ╚╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╝ */

/* ╔══════════════════════════════════════════════╗
   ╠═══════════════════╣ GRID ╠═══════════════════╣
   ╚══════════════════════════════════════════════╝
   This is the CSS for grids.                       */

.grid-3-2{
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-rows: repeat(2, auto);
    margin: 0.5rem;
}

/*───────────────────┤GRID ITEMS├───────────────────*/

.grid-item{
    align-content: start;
    text-align: center;
    padding: 1rem;
    margin: 0.8rem;
    overflow-y: auto;
    border-radius: 1rem;
    backdrop-filter: blur(1rem);
    background-image: var(--grid-item-background-image);
}

.grid-item:hover {
    box-shadow: 0 0 0.5rem light-dark(var(--grid-item-shadow-color));
}

.grid-item.full-width {
    grid-column: 1 / -1;
}

/*────────────────┤RESPONSIVE GRID├─────────────────*/

@media (max-width: 800px) {
    .grid-3-2 {
        /* background-color: black; */
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .grid-item.full-width {
        grid-column: auto;
    }
}

/*─────────────────┤GRID ITEMS SVG├─────────────────*/

.grid-item-svg {
    color: light-dark(var(--grid-item-svg-color));
    filter: drop-shadow(0 0 0.5rem light-dark(var(--grid-item-svg-shadow-color)));
}

.grid-item:hover .grid-item-svg.swing {
    animation: swing var(--svg-animation-speed) linear infinite;
}

.grid-item:hover .grid-item-svg.pulse {
    animation: pulse var(--svg-animation-speed) linear infinite;
}

.grid-item:hover .grid-item-svg.float {
    animation: float var(--svg-animation-speed) linear infinite;
}

.grid-item:hover .grid-item-svg.horizontal-stretch {
    animation: horizontal-stretch var(--svg-animation-speed) linear infinite;
}

/*───────────────┤GRID ITEMS CONTENT├───────────────*/

.grid-item-title {
    color: light-dark(var(--title-text-color));
    text-decoration: underline;
    font-family: var(--title-font);
    margin: 0.3rem;
}

.grid-item-description {
    width: fit-content;
    text-align: left;
    padding: 0.2rem;
    margin: auto;
}

/* ╔══════════════════════════════════════════════╗
   ╠════════════════╣ ANIMATIONS ╠════════════════╣
   ╚══════════════════════════════════════════════╝
   This is the CSS that powers animations.          */

@keyframes swing {
    0% {
        transform: rotateZ(0);
    }
    10% {
        transform: rotateZ(10deg);
    }
    90% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    16.66% {
        transform: scale(1.2);
    }
    33.33% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    66.66% {
        transform: scale(1);
    }
    83.33% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    14% {
        transform: translateY(-0.35rem);
    }
    28% {
        transform: translateY(0);
    }
    46.5% {
        transform: translateY(-0.3rem);
    }
    60.5% {
        transform: translateY(0);
    }
    84.5% {
        transform: translateY(-0.2rem);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes horizontal-stretch {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1.3, 0.8);
    }
    50% {
        transform: scale(1.5, 0.7);
    }
    60% {
        transform: scale(0.8, 1.2);
    }
    70% {
        transform: scale(1, 1);
    }
}