*, :after,:before {
    box-sizing: border-box;
    transition: 0.2s ease-in-out;
    font-family: 'Courier New', Courier, monospace;
}

:root{
    --primary-color: #FAD6A5;
    --secondary-color: #CFB997;
    --primary-background: #1E3A3A;
    --secondary-background: #2E5E5E;
    --terciary-background: #85C7F2;
    --terciary-background_inverted: #560860;
    --aside-box-background: #00395f;
    --button-color: #222222;
    --button-text: #FAD6A5;
    --alt-text: #bb4c07;
    --shadow-color: #FFB0A0;
    --creative-text: #D7FFF3;
}

[tema="dark"]{
    --primary-color: #A5D6FA; /* (un tono azul oscuro) */
    --secondary-color: #97B9CF; /* (un tono azul grisáceo) */
    --primary-background: #121212; /* (un color de fondo principal oscuro) */
    --secondary-background: #1E1E1E; /* (un color de fondo secundario oscuro) */
    --terciary-background: #560860; /* (un color de fondo terciario oscuro) */
    --terciary-background_inverted: #85C7F2; /* (un color de fondo terciario oscuro) */
    --aside-box-background: #310a39; /* (un color de fondo para el aside oscuro) */
    --button-color: #F0F0F0;
    --button-text: #121212;
    --alt-text: #FFD700;
    --shadow-color: #007373;
    --creative-text: #FFEDE6;
}

html, body {
  margin: 0;
  background: var(--primary-background);
  overscroll-behavior-y: none;  /* corta el efecto “rubber-band” en iOS 16+ */
  overflow-x: hidden;           /* evita micro vaivén horizontal por 100vw */
}


body{
    min-height: 100vh;
    min-height: 100dvh;
    float: none!important;
    padding: 0;
    background-color: var(--primary-background);
    --nav_title-font: Lobster;
}

@supports (height: 100lvh) {
  body .bg-div { min-height: 100lvh; }   /* NO toca el body */
}
@supports not (height: 100lvh) {
  body .bg-div { min-height: 100dvh; }   /* fallback dinámico */
}

body .bg-div {
    width: 100%;
    overflow: visible;
}

/* CSS */
.button-85 {
  margin-top: 8dvh;
  padding: 0.6em 2em;
  font: 22px "Archivo Black", sans-serif;
  border: none;
  outline: none;
  color: rgb(228, 228, 228);
  background: var(--primary-background);
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
-webkit-filter: blur(5px); /* legacy WebKit */
  filter: blur(5px); /* fall back to blur */
  will-change: transform, filter; /* help mobile compositing */
  pointer-events: none;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #172424;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.nav-hamburger-box {
    position: relative;
    width: 6dvh;
    height: 6dvh;
    cursor: pointer;
    display: none;
}

.hamburger-line{
    height: 0.7dvh;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s ease-in-out;
}

.nav-hamburger-box .hamburger-line:nth-child(1){
    top: 25%;
}

.nav-hamburger-box .hamburger-line:nth-child(3){
    top: 75%;
}

.nav-hamburger-box.active .hamburger-line:nth-child(1){
    position: absolute;
    top: 89%;
    transform: rotate(45deg) translate(-50%, -50%);
    left: 35%;
}

.nav-hamburger-box.active .hamburger-line:nth-child(2){
    opacity: 0;
}

.nav-hamburger-box.active .hamburger-line:nth-child(3){
    position: absolute;
    top: 11%;
    transform: rotate(-45deg) translate(-50%, 50%);
    left: 35%;
}

.nav-header{
    width: 100%;
}

.nav-container
{
    position: fixed;
    width: 100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    height: 8dvh;
    background-color: var(--secondary-background);
    font-size: 1vw;
    z-index: 101;
}

.nav-container .icon-family{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    margin-left: 0.5dvw;
}

.nav-container .icon-family h1{
    font-family: var(--nav_title-font);
    text-decoration: none;
    font-size: 5.5dvh;
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: 1.4dvh;
    margin-inline-end: 1.4dvh;
    color: var(--primary-color);
}
.nav-container .icon-family a{
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 100%;
    width: 100%;
}

.nav-container .icon-family .house-icon{
    display: flex;
    height: 70%;
    aspect-ratio: 1/1;
}

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

.nav-container .icon-family .house-icon img{
    animation: spin 3s  infinite;
}

.nav-container .hamburger-menu {
    position: relative;
    display: flex;
    align-items: flex-end;

}

.nav-container .nav-links-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 3.5dvh;
    margin: 0px;
    padding-inline-start: 0px;
    list-style-type: none;
}

.nav-container .nav-links-box li a{
    text-decoration: none;
    padding-inline-end: 3dvw;
    color:var(--secondary-color);
}

.nav-container .dark-mode-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2dvh;
    margin-left: auto;
    margin-right: max(2dvw, env(safe-area-inset-right));
}

.nav-container .dark-mode-container p{
    margin: 0;
    color: var(--button-color);
}

.nav-container .dark-mode-container .dark-mode-box{
    height: 4dvh;
    width: 7.0588dvh;
    position: relative;
    overflow: visible;
}

.dark-mode-box .set-dark-mode{
    display: none;
}

.dark-mode-box .slider{
    position: absolute;
    cursor: pointer;
    height: 4dvh;
    width: 7.0588dvh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#FFFFFF;
    -webkit-transition: .4s;
    transition: .4s;
}

.dark-mode-box .slider:before{
    position: absolute;
    content: "";
    width: 3.0588dvh;
    height: 3.0588dvh;
    left: 0.470584dvh;
    bottom: 0.470584dvh;
    background-color:#e4b90f;
    -webkit-transition: .4s;
    transition: .4s;
}


.dark-mode-box .set-dark-mode:checked + .slider:before{
    -webkit-transform: translate(2.5588dvh, -0.5dvh);
    -ms-transform: translate(2.5588dvh, -0.5dvh);
    transform: translate(2.5588dvh, -0.5dvh);
    background-color: transparent;
    box-shadow: 0.5dvh 0.5dvh 0 0 darkgrey;
}

.dark-mode-box .set-dark-mode:not(:checked) + .slider:before{
    animation: shine 1.2s ease-in-out infinite;
}

@keyframes shine {
    0% {
        box-shadow: 0 0 1rem 0.5dvh #e4b90f;
    }
    50% {
        box-shadow: 0 0 1rem 1dvh #e4b90f;
    }
    100% {
        box-shadow: 0 0 1rem 0.5dvh #e4b90f;
    }
}

.dark-mode-box .slider.round{
    border-radius: 4dvw;
}

.dark-mode-box .slider.round:before{
    border-radius: 50%;
}


.wrapper{
    display: flex;
    flex-direction: column;
    padding-bottom: 400;
    padding-top: 8dvh;
}


.personal-info-box{
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-left: 1%;
    z-index: 100;
    transition: 0.02s;
}

.personal-info-box *{
    transition: none;
}

.personal-info-box .box-styler{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: var(--aside-box-background);
    border: 0.2em solid #000000;
    border-radius: 16px;
}

.personal-info-box .box-styler .personal-title h2{
    color: var(--alt-text);
    font-size: 2rem;
    margin: 1dvh;
    margin-bottom: 0dvh;
}

.personal-info-box .box-styler .personal-title h3{
    color: var(--alt-text);
    font-size: 1.2rem;
    margin: 1dvw;
    margin-top: 0dvh;
    margin-bottom: 3dvh;
}

.personal-info-box .box-styler .image-portrait{
    display: flex;
    justify-content: left;
}

.personal-info-box .box-styler .image-portrait img{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    border: 1px solid var(--alt-text);

}


.personal-info-box .information-grid{
    display:flex;
    flex-direction: column;
    margin-top: 3dvh;
}

.personal-info-box .box-styler .information-grid h2{
    color: var(--primary-color);
    text-align: center;
    font-size: 2rem;
    margin-top: 0dvh;
    margin-bottom: 0dvh;
}
.personal-info-box .box-styler .aboutme-info{
    margin-bottom: 2dvh;
}

.personal-info-box .box-styler .aboutme-info p{
    color: var(--alt-text);
    margin: 0rem 0.4rem 0px 0.4rem;
    font-size: 1rem;
    font-weight: 600;

}

.personal-info-box .information-grid .socialmedia-info{
    display: flex;
    flex-direction: column;
    margin: 0px;
    margin-bottom: 3dvh;
}

.personal-info-box .information-grid .socialmedia-info img{
    width: 25%;
    aspect-ratio: 1/1;
}

.personal-info-box .information-grid .socialmedia-icons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0px;
    padding-bottom: 1dvw;
}
.personal-info-box .information-grid .socialmedia-icons a{
    display: flex;
    justify-content: center;
}




.home{
    padding-top: 5dvh;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    background-color: var(--primary-background);
    box-sizing: border-box;
}

/* añade o sobreescribe donde corresponda */
.wrapper, .home {
  height: auto;
  min-height: 0;
  overflow: visible;   /* nada de overflow:auto/hidden acá */
} 

@supports (height: 100lvh) {
  .home{ min-height: 100lvh; }
}
@supports not (height: 100lvh) {
  .home{ min-height: 100dvh; } /* fallback dinámico */
}

.home-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    color:var(--primary-color);
    width: 70%;
    animation: neon 3s infinite;
}
.home-container h1{
    margin-top: 1.1dvh;
    width: 75%;
    text-transform: uppercase;
    font-size: 3dvw;
    font-family: "Archivo Black", "Archivo", sans-serif;
    text-align: center;
}

.home-container .subtitle{
    margin-top: 0dvh;
}

.bubbles-container{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-around;
    width: auto;
    height: auto;
    z-index: -1;
    overflow: hidden;
}

.bubbles-container span{
    position: relative;
    width: 25px;
    min-width: 25px;
    height: 25px;
    min-height: 25px;
    overflow: hidden;
    background: aqua;
    margin: 0 6px;
    border-radius: 50%;
    box-shadow: 0 0 9px 9px #A5D6FA,
    0 0 40px #6ac9f2, 0 0 100px #6ac9f2;
    animation: animate 15s linear infinite;
    animation-duration: calc(120s / var(--i));
    z-index: 2;
}

.bubbles-container span:nth-child(even){
    background: #560860;
    box-shadow: 0 0 9px 9px #57822f,
    0 0 30px #18c950, 0 0 80px #18c950;
}


.portfolio{
    background-color: var(--primary-background);
    padding-bottom: 0.8rem;
}

#portfolio-target{
    height: 6dvh;
}

.portfolio .portfolio-container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio .portfolio-container h1{
    text-align: center;
    font-size: 5dvw;
    color: var(--primary-color);
    margin: 20px;
    margin-bottom: 4dvh;
}

.portfolio article{
    border: 2px solid var(--secondary-color);
    background-color: var(--secondary-background);
    box-shadow: var(--secondary-background) 5px 5px 10px 6px;
    border-radius: 15px;
    margin: 20px;
    width: 85%;
    min-height: 250px;
}

.portfolio article a{
    text-decoration: none;
}

.portfolio article h2{
    margin-left: 5rem;
    margin-bottom: 0px;
    color: var(--primary-color);
}

.portfolio article h3{
    font-size: 1.5rem;
    margin: 2dvh 2dvw 2dvh 2dvw;
    color: var(--secondary-color);
}

.portfolio article h4{
    font-size: 2rem;
    margin: 2dvh 2dvw 2dvh 2dvw;
    color: var(--secondary-color);
}

.portfolio article h6{
    margin-left: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: var(--secondary-color);
    font-size: 2rem;
}

.portfolio article ul{
    margin: 4dvh 2dvw 8dvh 2dvw;
}

.portfolio article ul li{
    font-size: 2rem;
    font-weight: 550;
    color: var(--secondary-color);
}

.portfolio article p{
    margin: 2dvh 2dvw 2dvh 2dvw;
    color: var(--secondary-color);
    font-size: 1.5rem;
    text-align: center;
}

.portfolio .button-see-more-article-1{
    display: flex;
    margin-left: 2dvw;
    margin-right: 2dvw;
    margin-bottom: 2dvh;
    width: fit-content;
}

.portfolio .button-see-more-article-2{
    display: flex;
    margin-left: 2dvw;
    margin-right: 2dvw;
    margin-bottom: 2dvh;
    width: fit-content;
}

.portfolio .button-see-more-article-3{
    display: flex;
    margin-left: 2dvw;
    margin-right: 2dvw;
    margin-bottom: 2dvh;
    width: fit-content;
}

.portfolio .button-see-more-article-1 p{
    font-size: 3dvh;
    cursor: pointer;
    width: auto;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
}

.portfolio .button-see-more-article-2 p{
    font-size: 3dvh;
    cursor: pointer;
    width: auto;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
}

.portfolio .button-see-more-article-3 p{
    font-size: 3dvh;
    cursor: pointer;
    width: auto;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
}

.portfolio .see-more-article-1{
    display: none;
}

.portfolio .see-more-article-2{
    display: none;
}

.portfolio .see-more-article-3{
    display: none;
}

.portfolio .see-more-article-1.active{
    display: block;
    background-color: var(--primary-background);
    border: 2px solid var(--secondary-color);
    margin: 5dvh 5dvw 5dvh 5dvw;
    border-radius: 2vh;
}

.portfolio .see-more-article-2.active{
    display: block;
    background-color: var(--primary-background);
    border: 2px solid var(--secondary-color);
    margin: 5dvh 5dvw 5dvh 5dvw;
    border-radius: 2vh;
}

.portfolio .see-more-article-3.active{
    display: block;
    background-color: var(--primary-background);
    border: 2px solid var(--secondary-color);
    margin: 5dvh 5dvw 5dvh 5dvw;
    border-radius: 2vh;
}

.portfolio .links-article{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 4dvh 2dvw 8dvh 2dvw;

}

.portfolio .links-article a{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.portfolio .links-article img{
    height: auto;
    width: 75%;
    aspect-ratio: 1/1;
    margin: 2dvh 2dvw 2dvh 2dvw;
}

.portfolio .links-article .repository-link{
    display: flex;
    width: 40%;
    max-width: 300px;
    align-items: center;
    justify-content: center;
    border: var(--secondary-color) 0.2dvw solid;
    border-radius: 3dvw;
}

.portfolio .links-article .repository-link a p{
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 2.5dvw;
}

.portfolio .links-article .web-link a p{
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 2.5dvw;
}

.portfolio .links-article .web-link{
    display: flex;
    width: 40%;
    max-width: 300px;
    align-items: center;
    justify-content: center;
    border: var(--secondary-color) 0.2dvw solid;
    border-radius: 3dvw;
}

.footer-box{
    display:flex;
    flex-direction: row;
    align-items: center;
    height: fit-content;
    background-color: #756e76;
    margin: 0px;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
}

.footer-box .copyright-text{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0px;
}

.footer-box .footer-button-box{
    position: static;
    left: 25px;
    margin-right: 2dvw;
    
}

.footer-box .footer-button-box a{
    display: flex;
    text-decoration: none;
}

.footer-box .footer-button-box .footer-button{
    height: auto;
    color: var(--button-text);
    background-color: var(--button-color);
    border-radius: 10px;
    cursor: pointer;
    margin-right: max(env(safe-area-inset-right));
}

.section-separator{
    transition: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.section-separator *{
    transition: none;
}

.section-separator .section-separator-line {
    display: relative;
    width: 100%;
    height: 0.5em;
    background-color: var(--terciary-background);
}

.section-separator .section-scroll-progress {
    display: relative;
    width: 0%;
    height: 0.5em;
    background-color: var(--terciary-background_inverted);
}

@keyframes animate {
    0%
    {
        transform: translateY(100dvh) scale(0);
    }
    100%
    {
        transform: translateY(-5dvh) scale(1);
    }
}


.home-container h1{
    animation:text-shadow-pop-br 3s infinite alternate backwards
}

@keyframes text-shadow-pop-br{
    0%{text-shadow:0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555;
        transform:translateX(0) translateY(0)}100%{
            text-shadow:1px 1px #555,2px 2px #555,3px 3px #555,4px 4px #555,5px 5px #555,6px 6px #555,7px 7px #555,8px 8px #555;
            transform:translateX(-10px) translateY(-10px)
        }
}

.tech-grid {
    display: grid;
    width: 90%;
    margin-left: 5%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
.left { 
    grid-area: 1 / 1 / 2 / 2; 
    width: 100%;
    overflow: hidden;
}
.right { 
    grid-area: 1 / 2 / 2 / 3; 
    width: 100%;
    overflow: hidden;
}

.tech-grid .left p{
    width: 100%;
    font-size: 2.7rem; 
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin: 0px;
}
.tech-grid .right p{
    width: 100%;
    font-size: 2.7rem; 
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin: 0px;
}

@media (max-aspect-ratio: 4/5){

    /* CSS DEL HAMBURGER MENU */
    
    .nav-container .nav-hamburger-box{
        display: block;
    }

    .nav-container .nav-links-box li a{
        padding-inline-end: 0px;
    }
    
    .nav-container .hamburger-menu.active{
        position: absolute;
        display: block;
        top: 8dvh;
        left: 45dvw;
        background-color: var(--primary-background);
        border: var(--button-color) 3px solid;
        border-radius: 10px;
        z-index: 100;
    }
    
    .nav-container .hamburger-menu.active .nav-links-box{
        display: flex;
        flex-direction: column;
        font-size: 4.2dvh;
    }
    
    .nav-container .hamburger-menu.active .nav-links-box li{
        margin: 1dvh;
    }
    
    .nav-container .hamburger-menu .nav-links-box{
        display: none;
    }
    
    .nav-container .nav-link-box.active{
        display: flex;
        flex-direction: column;
        align-items: left;
        list-style-type: none;
        margin: 0px;
        padding-inline-start: 0px;
    }

}

/* media query for wide dispositives less than 700px of width */

@media (max-width: 930px){

    .tech-grid .left p{
        font-size: 5.5dvw; 
    }
    .tech-grid .right p{
        font-size: 5.5dvw; 
    }
    
    /* CSS DEL HAMBURGER MENU */
    
    .nav-container .nav-hamburger-box{
        display: block;
        width: 6dvh;
        height: 6dvh;
    }

    .nav-container .hamburger-line{
        height: 0.7dvh;
    }

    .nav-container .nav-links-box li a{
    padding-inline-end: 2.5dvw;
}
    
    .nav-container .hamburger-menu.active{
        position: absolute;
        display: block;
        top: 8dvh;
        left: 30dvh;
        background-color: var(--primary-background);
        border: var(--button-color) 3px solid;
        border-radius: 10px;
        z-index: 100;
    }
    
    .nav-container .hamburger-menu.active .nav-links-box{
        display: flex;
        flex-direction: column;
        font-size: 4.2dvh;
    }
    
    .nav-container .hamburger-menu.active .nav-links-box li{
        margin: 1dvh;
    }
    
    .nav-container .hamburger-menu .nav-links-box{
        display: none;
    }
    
    .nav-container .nav-link-box.active{
        display: flex;
        flex-direction: column;
        align-items: left;
        list-style-type: none;
        margin: 0px;
        padding-inline-start: 0px;
    }

    /* CSS DEL NAVBAR */

    .nav-container .icon-family .house-icon{
        height: 60%;
    }

    .personal-info-box{
        width: 40%;
    }

    .home-container {
        width: 55%;
        margin-left: 2%;
    }

    .button-85{
        font-size: 18px;
    }

    .portfolio .portfolio-container h1{
        font-size: 9dvw;
    }
}

/* media query for stretch dispositives less than 460px of width */

@media (max-width: 460px){

    /* CSS DEL NAVBAR */

    .wrapper{
        padding-top: 7dvh;
    }

    .nav-container{
        height: 7dvh;
    }

    .nav-container .icon-family h1{
        font-size: 4dvh;
    }

    .nav-container .hamburger-menu.active{
        top: 7dvh;
        left: 23dvh;
    }

    .nav-container .hamburger-menu.active .nav-links-box{
        font-size: 3dvh;
    }

    .personal-info-box{
        width: 50%;
    }

    .home-container {
        width: 40%;
        margin-left: 4.5%;
    }

    .button-85{
        font-size: 16px;
    }

    .home-container h1{
        font-size: 2dvh;
    }

    .nav-container .dark-mode-container .dark-mode-box{
        height: 3dvh;
        width: 5.2941dvh;
        position: relative;
    }
    
    .dark-mode-box .slider{
        position: absolute;
        cursor: pointer;
        height: 3dvh;
        width: 5.2941dvh;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:#FFFFFF;
        -webkit-transition: .4s;
        transition: .4s;
    }
    
    .dark-mode-box .slider:before{
        position: absolute;
        content: "";
        width: 2.2941dvh;
        height: 2.2941dvh;
        left: 0.352938dvh;
        bottom: 0.352938dvh;
        background-color:#e4b90f;
        -webkit-transition: .4s;
        transition: .4s;
    }
    
    .dark-mode-box .set-dark-mode:checked + .slider:before{
        -webkit-transform: translate(1.9191dvh, -0.375dvh);
        -ms-transform: translate(1.9191dvh, -0.375dvh);
        transform: translate(1.9191dvh, -0.375dvh);
        background-color: transparent;
        box-shadow: 0.375dvh 0.375dvh 0 0 darkgrey;
    }
    
    .dark-mode-box .set-dark-mode:not(:checked) + .slider:before{
        animation: shine 1.2s ease-in-out infinite;
    }
    
    @keyframes shine {
        0% {
            box-shadow: 0 0 1rem 0.375dvh #e4b90f;
        }
        50% {
            box-shadow: 0 0 1rem 0.75dvh #e4b90f;
        }
        100% {
            box-shadow: 0 0 1rem 0.375dvh #e4b90f;
        }
    }
    
    .dark-mode-box .slider.round{
        border-radius: 3dvw;
    }
    


}

/* media query for stretch dispositives less than 360px of width */

@media (max-width: 360px){

    /* CSS DEL NAVBAR */

    .nav-container .icon-family h1{
        font-size: 3dvh;
    }

    .home-container h1{
        font-size: 1.8dvh;
    }

    .nav-container .hamburger-menu.active{
        left: 18dvh;
    }
}

/* media query for low length and ultra wide dispositives */
    @media (min-aspect-ratio: 2/1) {
        .nav-container .nav-hamburger-box {
            display: none;
        }

        .nav-container .hamburger-menu .nav-links-box {
            display: flex;
        }
    }