@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;1,700&display=swap');
:root{ /*light*/   
  --trasparent:#00000000;/*topnav*/
  --line-trasparent:#d1d1d13e;
  --blue:#003153;
  --blue-petrolium:#001b2e;
  --blue-indigo:#124375;
  --blue-bdazzled:#285786;
  --white-dirty:#f7f0f0;/*(topnav-desk)*/
  --white-cream: #fffffe;
  --white-im:#dedede;
  --off-white:#d1d1d1;
  --hard-grey:#101010;
  --grey:#9CAEA9;/*(text-topnav-mobile)*/
  --trasparent-grey:#2d2d2d82;
  --grey-hot:#555555;
  --light-grey:#DEEBE3;
  --green: #4bca00;
  --black:#000000;
  --blu-first:#1f316c;

  --azure:#007bff;
  --white:#ffffff;
  --font-alpha: var(--azure);
  --font-beta: var(--grey);
  --font-gamma: var(--grey-hot);
  --white-alpha: #e0e0e0; /*background */
  --white-beta: #cacaca; /*first of gradient*/
  --white-gamma: #f0f0f0; /*second of gradient*/
  --white-delta: #c5c5c5; /*up box*/
  --white-epsilon: #fbfbfb; /*down box*/

  --background-neumorphism: var(--white-alpha);
  --first-gradient: var(--white-beta);
  --second-gradient: var(--white-gamma);
  --up-box: var(--white-delta);
  --down-box: var(--white-epsilon);

  --list-icon:var(--font-alpha);/* grey-hot*/
  --list-border-bottom: var(--grey);
  --list-border-right: var(--white);
  --blur-li: 1px;/*2*/
  --topnav:var(--light-grey);
  --boxshadow-nav:#0000001a;
  --text-topnav-desk:var(--font-alpha);/* grey-hot*/
  --text-topnav-mob:var(--font-alpha);/* grey-hot*/
  --border-nav:var(--black);
  --main_color:var(--white-alpha);
  --background-main: var(--white-alpha);
  --background-first: var(--white-alpha);
  --string-highlight:var(--font-alpha);
  --initial-component:var(--font-beta);/*grey-hot*/
  --line-first-component-name:var(--font-alpha);
  --first-component-button:var(--font-beta);
  --background-middle:var(--trasparent);
  --line-middle:var(--grey);
  --border-middle:var(--line-trasparent);
  --aboutme-font:var(--font-alpha);
  --items-skills:var(--white-cream);
  --project-font:var(--font-alpha);
  --card-project: var(--white-alpha);
  --border-items-project:var(--light-grey);
  --description-card:var(--font-gamma);
  --curve: 25;
  --background-end:var(--grey);/* hard-grey*/
  --end-font:var(--font-alpha);/*off-white*//*grey-hot*/
  --line-end:var(--line-trasparent);
  --background-loading:var(--background-neumorphism);
  --console:var(--grey-alpha);
  --border-console:var(--black);
  --console-font:limegreen;
  --url-logo:url(../images/LogoAzure.svg);
  --drop-logo:#c2c2c2;
  --translateX:50px;
  --spaceX-logo: var(--black);
  --github-logo: invert();
  /** --msg:;  msg rimane cosi per essere cambiata con la funzione js*/
}
*{
  --scale-space:0.15;/*0.7*/
}
[data-theme="dark"]{ 
  --trasparent:#00000000;/*topnav*/
  --line-trasparent:#d1d1d13e;
  --blue:#003153;
  --blue-petrolium:#001b2e;
  --blue-indigo:#124375;
  --blue-bdazzled:#285786;
  --white-dirty:#f7f0f0;/*(topnav-desk)*/
  --white:#ffffff;
  --white-cream: #fffffe;
  --white-im:#dedede;
  --off-white:#d1d1d1;
  --hard-grey:#101010;
  --grey:#9CAEA9;/*(text-topnav-mobile)*/
  --trasparent-grey:#2d2d2d82;
  --grey-hot:#555555;
  --light-grey:#DEEBE3;
  --green: #32e600;/*4bca00*/
  --green2: #1e8601;/*#125901*/
  --black:#000000;

  --grey-alpha: #0f0f0f; /*background */
  --grey-beta: #0e0e0e; /*first of gradient*/
  --grey-gamma: #101010; /*second of gradient*/
  --grey-delta: #060606; /*up box*/
  --grey-epsilon: #1e860122; /*down box,181818/ 1d1d1d-1e860122*/

  --azure:#007bff;
  --white:#ffffff;
  --font-alpha: var(--green);
  --font-beta: var(--grey);
  --font-gamma: var(--grey-hot);
  --background-neumorphism: var(--grey-alpha);
  --first-gradient: var(--grey-beta);
  --second-gradient: var(--grey-gamma);
  --up-box: var(--grey-delta);
  --down-box: var(--grey-epsilon);

  --list-icon:var(--font-alpha);
  --list-border-bottom: var(--grey-hot);
  --list-border-right: var(--grey);
  --blur-li:1px;  
  --topnav:var(--trasparent);
  --boxshadow-nav:#ffffff18;
  --text-topnav-desk:var(--font-alpha);
  --text-topnav-mob:var(--font-alpha);
  
  --main_color:var(--grey-alpha);
  --background-main: var(--grey-alpha);
  --background-first: var(--grey-alpha);
  --string-highlight:var(--font-alpha);
  --initial-component:var(--font-beta);/*grey-hot*/
  --line-first-component-name:var(--font-alpha);
  --first-component-button:var(--font-beta);
  
  --border-nav:var(--black);
  --background-middle:var(--trasparent);
  --line-middle:var(--line-trasparent);
  --border-middle:var(--trasparent-grey);
  --aboutme-font:var(--green);
  --items-skills:var(--grey-alpha);
  --project-font:var(--green);
  --card-project: var(--grey-alpha);
  --border-items-project:#2d2d2d82;
  --description-card:var(--grey);
  --curve: 25;
  --background-end:var(--hard-grey);
  --end-font:var(--off-white);
  --line-end:var(--line-trasparent);
  --background-loading:var(--background-neumorphism);
  --console:#000000df;
  --border-console:var(--black);
  --console-font:limegreen;
  --url-logo:url(../images/LogoGreen.svg);
  --drop-logo:var(--white);
  --translateX:50px;
  --spaceX-logo: var(--white);
  --github-logo: initial;
  /** --msg:;  msg rimane cosi per essere cambiata con la funzione js*/
}

html, body{
  height:100vh;
  width:100vw;
  padding:0px;
  margin:0px;
  background-color: var(--background-main);
  
  scroll-behavior: auto;
}
body::-webkit-scrollbar {
  width:0px;
}
@media (prefers-color-scheme: light) {
  /* Stili per il tema chiaro */
  body {
    color: var(--green);
  }
}

@media (prefers-color-scheme: dark) {
  /* Stili per il tema scuro */
  body {
    background-color: black;
    content: var(--green); /* Aggiungi anche stili per testo leggibile */
  }
}

/* Track */
::-webkit-scrollbar-track {
  width: 0px;
  background-color: #00315300;
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 35px;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  
  border-radius: 10px;
  height: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/*- ****************************************
/*-GRID AREA
/*- **************************************-*/
body{    
  display: grid;
  grid-template-areas:
  'header'
  'main'
  'footer';
}
/*- ****************************************************
/*--------------------Style copied email--------------- 
/*- **************************************************-*/
#notification {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--font-alpha);
  padding: 35px;
  text-align: center;
  text-decoration: none;
  font-family: 'Poppins';
  font-weight: 700;
  border-radius: 25px;
  z-index: 999;
  background: linear-gradient(145deg, #ffffff03, #ffffff00);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 2px 2px 4px var(--up-box),
             -2px -2px 4px var(--down-box);
  transition: 1s;
  animation-duration: 1s;
}

/*- ****************************************************
/*-Style NAVBAR and the links inside the navigation bar 
/*- **************************************************-*/
.topnav {
  grid-area: header;
  padding: 5px 8px;
  width: 100%;  
  z-index: 999; 
  position: fixed;     
  align-items: center;
  box-sizing: border-box;
  height: 61px;
  margin-left: 50%;
  margin-right: 20px;
  transform: translateX(-50%); 
  -webkit-transform: translateX(-50%); 
  /*border-color: 1px solid var(--black);
  border-radius: 0px;
  /*font-family: 'Kanit', sans-serif;*/
  background: linear-gradient(145deg, #00000003, #d8dfe600);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/*_ div of all a*/
.topnav-a{
  float: right;
  padding:15px 15px;
  right: 0%;
}
/*_ single a*/
.topnav a{
  border-radius: 50px;
  width: max-content;
  height: max-content;  
  color: var(--text-topnav-desk);
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 550;
}
.topnav .icon {
  display: none;
}

.logonav {
  background-color: rgba(54, 115, 19, 0);
  background-size: contain;
  background-image: var(--url-logo);
  display: flex;
  height: 40px;
  width: 40px;
  margin-left: 20px;
  margin-top: 5px;
  background-repeat: no-repeat;
  text-decoration: none;
  position: fixed;
  /*background: #e0e0e0;
  box-shadow: inset 2px 2px 4px #cacaca,
            inset -2px -2px 4px #f6f6f6;*/
}
.TitleDomain{
  display: flex;
  margin-left: 60px;
  margin-top: -22px;
  background-repeat: no-repeat;
  text-decoration: none;
  position: fixed;
}
/*-----START----RESPONSIVE-----*/
/*_ When the screen is less than 600 pixels wide, hide all links, 
/*_ except for the first one ("Home"). Show the link that contains should 
/*_ open and close the topnav (.icon) */
@media screen and (max-width: 400px) {
  body::-webkit-scrollbar {
    overflow-x: hidden;
    display: none;
  }
}
@media screen and (max-width: 820px) {
  body::-webkit-scrollbar {
    overflow-x: hidden;
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .topnav  {
    height: 55px;
    position: fixed; 
    padding-right: 0px; 
    font-weight: 550;
    background: linear-gradient(145deg, #00000005, #d8dfe600);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: 1.1s;
    overflow: hidden;
  } 
  .topnav a:not(null) {
    display: none;
    transition: 1.1s;
  }
  .topnav .icon {
    position: fixed;
    right: 9px;
    display: block;
    transition: 1.1s;
    font-size: 15px;
  }
  .logonav{
    top: 2.5px;
    margin-left: 10px;
  }

}
/** The "responsive" class is added to the topnav with JavaScript when the
/** user clicks on the icon. This class makes the topnav look good on small screens
/** (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive  {
    position: fixed;
    padding-right: 0px;
    height: 100vh;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(8px);
    transition: 1.5s;
    padding-right:0px;
    /*border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;*/
    z-index: 9999991;
  }
  .topnav .icon {
    position: fixed;
    right: 9px;
    top: 5px;
    display: block;
    transition: 1.1s;
    font-size: 15px;
  }
  .topnav.responsive .icon {
    display: none;
    position: fixed;
    right: 9px;
    top: 5px;
    display: block;
    transition: 1.1s;
    font-size: 15px;
  }
  
  .topnav.responsive .topnav-a{
    float: none;
    top: 0%;
    margin-top: 50%;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    right: 0%;
  }
  .topnav.responsive .topnav-a a{
    color: var(--text-topnav-mob);
    float: none;
    display: block;
    margin-top: 30px;
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    text-align: center;
    font-size: 18px;
    
  }
  .logonav{
    top: 2.5px;
    margin-left: 10px;
  }
}
/*-----END----RESPONSIVE-----*/




/*- ****************************************************
/*-Style  LEFT FOR DARK AND LIGHT MODE
/*- **************************************************-*/
.left{
  z-index: 99999;
  position: fixed;
  bottom: 14px;
  left: 15px;
}
/*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch {
  display: inline-block;
  height: 30px;
  position: relative;
  width: 56px;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch input {
  display:none;
}
.slider {
  background-color: var(--background-neumorphism);
  box-shadow: inset 3px 3px 2px var(--up-box),
              inset -3px -3px 2px var(--down-box);

  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.7s;
}
.slider:before {
  background-color: var(--font-alpha);
  box-shadow: 2px 2px 6px var(--down-box),
            -2px -2px 2px var(--up-box);
  bottom: 6px;
  content: "";
  height: 18px;
  left: 5px;
  position: absolute;
  transition: .7s;
  width: 18px;
}
input:checked + .slider:before {
  transform: translateX(26px);
  -webkit-transform: translateX(26px);
}
.slider.round {
  border-radius: 900px;
}
.slider.round:before {
  border-radius: 50%;
}
/*- ****************************************************
/*-Style  LEFT FOR DARK AND LIGHT MODE
/*- **************************************************-*/

/*- ****************************************************
/*-Style  RIGHT FOR SOCIAL
/*- **************************************************-*/
.right{
  z-index: 999999;
  position: fixed;
  float: right;
  right: 53px;
  width: 0px;
  height: 100vh;
  padding-right: 0%;
  padding-left: 0px;
  transition: 1s;
}
.container{
  position: absolute;
  margin: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-decoration: none;
  align-items: center;
  justify-content: center;
  display: block;
  height: 300px;
}
.social-icons li{
  transition: 1s;
  margin-top: 50%;
  border-radius: 35%;
  backdrop-filter: blur(1.5px);
  background: linear-gradient(145deg, #ffffff02, #ffffff01);
  list-style: none;
}
.social-icons li a{
  transition: 1s;
  position: relative;
  display: block;
  border-radius: 35%;
  display: flex;
  width: 30px;
  height: 30px;
  padding: 1.5px;
  color: var(--font-alpha);/*555555*/
  background: #ffffff00;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  box-shadow: 0px 0px 10px rgba(243, 239, 239, 0.803);
  transform: perspective(1000px) rotate(0deg) skew(0deg) translate(0,0);
  -webkit-transform: perspective(1000px) rotate(0deg) skew(0deg) translate(0,0);
}
/*
.social-icons li a::before{
  content: "";
  position: absolute;
  bottom: -1.232px;
  left: -12.08px;
  height: 21.5px ;
  width: 14px;
  background-color: #b2b2b200;
  transition: 0.8s;
  transform: rotate(-45deg) skewX(-45deg);
  -webkit-transform: rotate(-45deg) skewX(-45deg);
}
.social-icons li a::after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: -5px;
  height: 10px;
  width: 30px;
  background: #ffffff00;
  transition: 0.8s;
  transform: rotate(0deg) skewX(-45deg);
  -webkit-transform: rotate(0deg) skewX(-45deg);
}
 */
.social-icons li a:hover{
  border-radius: 20%;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);
  -webkit-transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0,0.5);
}
.social-icons li .fa{
  color: var(--font-alpha);
}
/*.social-icons li .fa-solid{
  color: red;
  background-color: white;
}*/
.social-icons li .fa-solid{
  color: var(--font-apha);
}
.social-icons li:nth-child(1) a{
  transition: 1s;
  background-color: #3b599900;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(1) a::before{
  transition: 1s;
  background-color: #2f477a00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(1) a::after{
  transition: 1s;
  background-color: #4e69a300;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:nth-child(2) a{
  transition: 1s;
  background: #ffffff00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
  background: radial-gradient(circle at 30% 107%, #fdf49700 0%, #fdf49700 5%, #fd594900 45%,#d6249f00 60%,#285AEB00 90%);
}
.social-icons li:hover:nth-child(2) a::after{
  transition: 1s;
  background: #d6249f00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(2) a::before{
  transition: 1s;
  background: #285AEB00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter:blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:nth-child(3) a{
  transition: 1s;
  background-color: #00aeed00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(3) a::after{
  transition: 1s;
  background-color:#53b9e000;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(3) a::before{
  transition: 1s;
  background-color: #097aa500;
  backdrop-filter: var(--blur-li);
  -webkit-backdrop-filter: var(--blur-li);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:nth-child(4) a{
  transition: 1s;
  background-color: #00660000;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(4) a::after{
  transition: 1s;
  background-color:#004d0000;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:hover:nth-child(4) a::before{
  transition: 1s;
  background-color: #00330000;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
.social-icons li:nth-child(5) a{
  transition: 1s;
  background: #ffffff00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
 /*background-color: whitesmoke;*/
}
/*
.social-icons li:hover:nth-child(5) a::after{
  background: linear-gradient(to left, green 25%,yellow );
}
.social-icons li:hover:nth-child(5) a::before{
  background: linear-gradient(to top,red 25%,#285AEB);
}*/
.social-icons li:hover:nth-child(5) a::after{
  transition: 1s;
  background: #ff000000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
}
.social-icons li:hover:nth-child(5) a::before{
  transition: 1s;
  background: #285AEB00;
  backdrop-filter: blur(var(--blur-li));
  -webkit-backdrop-filter: blur(var(--blur-li));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.071);
}
/*- ******************************************************/
/*- Style  MAIN *****************************************/
/*- **************************************************-*/
.main{
  grid-area: main;
  color:var(--main_color);
  background-color: var(--background-main);
  width: 100vw;
  display: inline-block;
}
/*_ ************* WELCOME *************/
.var-highlight{
  color: var(--string-highlight);
}
.string-highlight{
  color: var(--string-highlight);
}

/*_ ********************************************/
/*_ *****FIRST component-area******************/
/*_ ******************************************/

.component-area{
  display: grid;
  grid-template-columns:  auto auto;
  height: 100vh;
  min-height: -webkit-max-available;
  width: 100%;
  place-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: all;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}

.string-highlight{
  color: var(--string-highlight);
}

.initial-component{
  top: 550px;
  color: var(--initial-component);
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  padding: 36.4px 42px;
  width: max-content;
  border-radius: 25px;
  background: linear-gradient(145deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  7px 7px 17px var(--up-box),
             -7px -7px 17px var(--down-box);
}

#hi-first-component{
  font-size: 1.2rem;
  font-weight: 900;
}
#name-first-component h1{
  margin: 0;
  padding: 0;
}
#name-first-component{
  font-size: 3.4rem;
  font-weight: 900;
  border-bottom: 1px solid var(--line-first-component-name);
  padding-bottom: 8px; 
  margin: 0;
}
#name-first-component span{
  width: min-content;
  height: min-content;
  padding: 0%;
  margin: 0;
}
#IT-first-component{
  font-size: 1.3rem;
  font-weight: 900;
  width: 572px;
  box-sizing: border-box;
  text-align: right;
  position: absolute;
  padding-top: 14px;
}
.citation{
  display: block;
  padding-top: 22px;
}


#second-component, #animation-component {
  min-height: 0;
  transform: scale(0.90);
  transition: opacity 0.1s ease;
}

#second-component.show, #animation-component.show {
  transform: scale(1); 
  transition: opacity 0.1s ease;
}


#first-component:active,#second-component.show:active, #animation-component.show,.space-checkbox:active {
  transform: scale(0.90); /* "Pressed" effect */
  transition: transform 0.1s ease;
}

#second-component{
  padding: 20px 40px;
  margin: 15px;
  max-width: 550px;
  height: max-content;
  font-size: 1.3rem;
  line-height: 1.15;
}

#second-component .button{
  text-align: right;
}
.initial-component .button a{
  color:var(--font-alpha);
  font-weight:600;
  font-size: 0.90rem;
  text-decoration:none;
  border-radius: 30px;
  padding: 9.5px;
  background-color: var(--background-neumorphism);
  box-shadow: inset 4px 4px 5px var(--up-box),
              inset -2px -2px 2px var(--down-box);
}
.middle0 {
  margin-top: 60px;
  margin-left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: 90%;
  height: fit-content;
}
#animation-component{
  will-change: opacity, transform;
  display: none;
  /*margin-top: 60px;
  margin-left: 50%;
  transform: translateX(-50%);*/
  font-size: 1.1rem;
  font-weight: 550;
  font-family: "Courier New";
  border-radius: 25px;
  align-items: center;
  height: 300px;
  width: 550px;
  margin: 20px 40px;
  padding: 15px;
  background: linear-gradient(145deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  7px 7px 17px var(--up-box),
              -7px -7px 17px var(--down-box);
}

.space-toggle {
  font-size: 1.3rem;
  text-align: center;
  padding-top: 10px;
  flex-direction: column;
  bottom: 14px;
  right: 6px;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  caret-color: transparent;
  opacity: 0;
}

.space-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow: 2px 2px 3px var(--up-box), -2px -2px 3px var(--down-box);
  border-radius: 50%;
  height: 35px;
  width: 35px;
  padding: 3px;
  cursor: pointer;
  outline: none;
  caret-color: transparent;
}


.space-checkbox:hover {
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow: 2px 2px 3px var(--up-box), -2px -2px 3px var(--down-box);
}

.space-checkbox:active {
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow: inset 2px 2px 3px var(--up-box), inset -2px -2px 3px var(--down-box);
}

.space-checkbox:hover{
  filter: blur(0px);
}

#fa-solid-fa-shuttle-space {
  background-color: none;
  color: var(--font-alpha);
  font-size: 1rem;
  transform: rotate(-90deg);
  cursor: pointer;
  outline: none;
  caret-color: transparent;
  height: 0.5rem;
  transform-origin: 15px 3px 0; /*only with image*/
  filter: 
          drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.737)) /* top */
          drop-shadow(0px 1px 2px rgb(0, 0, 0)) /* down */;
}

/*
@keyframes moveUp&DownShuttle {
  0% {
    transform: rotate(270deg) translateX(0px);
    filter: drop-shadow(-5px 0px 1px orange)
            drop-shadow(-5px 0px 1px var(--azure))
            drop-shadow(-1px 0px 1px violet) 
            drop-shadow(-1px 0px 1px purple)
            drop-shadow(-25px 0px 35px rgba(255, 166, 0, 0.158)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  10% {
    transform: rotate(255deg) translateX(100px);
    filter: drop-shadow(-5px 0px 2px orange) 
            drop-shadow(-4px 0px 2px var(--azure))
            drop-shadow(-1px 0px 1px violet)    
            drop-shadow(-2px 0px 1px purple)
            drop-shadow(-5px 0px 1px var(--azure))
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  20% {
    transform: rotate(245deg) translateX(180px);
    filter: drop-shadow(-8px 0px 3px orange) 
            drop-shadow(-5px 0px 1px var(--azure))
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  30% {
    transform: rotate(235deg) translateX(280px);
    filter: drop-shadow(-5px 0px 2px orange)  
            drop-shadow(-5px 0px 4px violet) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  40% {
    transform: rotate(230deg) translateX(380px);
    filter: drop-shadow(-5px 0px 2px orange)  
            drop-shadow(-5px 0px 4px violet) 
            drop-shadow(-25px 0px 35px rgba(255, 166, 0, 0.801)) 
            drop-shadow(-35px 0px 55px rgb(255, 140, 0));
  }
  50% {
    transform: rotate(225deg) translateX(480px);
    filter: drop-shadow(-5px 0px 2px orange)
            drop-shadow(-15px 0px 6px orange) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  60% {
    transform: rotate(230deg) translateX(380px);
    filter: drop-shadow(-15px 0px 15px orange) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  70% {
    transform: rotate(235deg) translateX(280px);
    filter: drop-shadow(-15px 0px 15px orange) 
            drop-shadow(-4px 0px 2px violet)
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  80% {
    transform: rotate(245deg) translateX(180px);
    filter: drop-shadow(-5px 0px 2px orange) 
            drop-shadow(-4px 0px 2px violet)   
            drop-shadow(-5px 0px 1px var(--azure))
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  90% {
    transform: rotate(255deg) translateX(90px);
    filter: drop-shadow(-5px 0px 2px orange)  
            drop-shadow(-4px 0px 2px violet)
            drop-shadow(-5px 0px 1px var(--azure)) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  95% {
    filter:drop-shadow(-5px 0px 3px orange)  
           drop-shadow(-4px 0px 2px violet)  
           drop-shadow(-5px 0px 1px var(--azure))
           drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
           drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  100% {
    transform: rotate(270deg) translateX(0px);
    filter: drop-shadow(-5px 0px 1px orange) 
            drop-shadow(-5px 0px 10px var(--azure)) 
            drop-shadow(-25px 0px 35px rgba(255, 255, 255, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 255, 255, 0.3));
  }
}*/ 

@keyframes moveUpShuttle {
  0% {
    transform: rotate(270deg) translateX(0px);
    filter: drop-shadow(-5px 0px 1px rgba(255, 166, 0, 0.63))
            drop-shadow(-5px 0px 1px rgba(255, 0, 0, 0.541))
            drop-shadow(-1px 0px 1px rgb(238, 130, 238)) 
            drop-shadow(-1px 0px 1px purple)
            drop-shadow(-25px 0px 35px rgba(255, 166, 0, 0.158)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
            
  }
  10% {
    transform: rotate(255deg) translateX(100px);
    filter: drop-shadow(-5px 0px 2px rgba(255, 166, 0, 0.76)) 
            drop-shadow(-4px 0px 2px rgba(255, 0, 0, 0.685))
            drop-shadow(-1px 0px 1px violet)    
            drop-shadow(-2px 0px 1px purple)
            drop-shadow(-5px 0px 1px #007bff98)
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  20% {
    transform: rotate(245deg) translateX(180px);
    filter: drop-shadow(-8px 0px 3px rgba(255, 166, 0, 0.623)) 
            drop-shadow(-5px 0px 1px purple)
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  30% {
    font-size: 1rem;
    height: 0.8rem;
    transform: rotate(235deg) translateX(280px);
    filter: drop-shadow(-5px 0px 2px rgba(255, 166, 0, 0.671))  
            drop-shadow(-5px 0px 4px violet) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  40% {
    transform: rotate(230deg) translateX(380px);
    filter: drop-shadow(-5px 0px 2px rgba(255, 166, 0, 0.801))  
            drop-shadow(-5px 0px 4px violet) 
            drop-shadow(-25px 0px 35px rgba(255, 166, 0, 0.801)) 
            drop-shadow(-35px 0px 55px rgb(255, 140, 0));
  }
  95% {
    height: 0px;
    font-size: 0px;
    filter:drop-shadow(-5px 0px 3px rgba(255, 166, 0, 0.705))  
           drop-shadow(-4px 0px 2px rgba(238, 130, 238, 0.76))  
           drop-shadow(-5px 0px 1px violet)
           drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
           drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  100% {
    height: 0px;
    font-size: 0px;
    transform: rotate(225deg) translateX(450px);
    filter: drop-shadow(-5px 0px 2px rgb(255, 166, 0))
            drop-shadow(-15px 0px 6px orange) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
}

@keyframes moveDownShuttle {
  0% {
    opacity: 0;
    height: 8px;
    font-size: 8px;
    transform: rotate(225deg) translateX(445px);
    filter: drop-shadow(-5px 0px 2px orange)
            drop-shadow(-15px 0px 6px orange) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  2%{
    opacity: 1;
  }
  20% {
    height: 1rem;
    font-size: 1rem;
    transform: rotate(230deg) translateX(380px);
    filter: drop-shadow(-15px 0px 15px orange) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  30% {
    transform: rotate(235deg) translateX(280px);
    filter: drop-shadow(-15px 0px 15px orange) 
            drop-shadow(-4px 0px 2px violet)
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  40% {
    transform: rotate(245deg) translateX(180px);
    filter: drop-shadow(-5px 0px 2px orange) 
            drop-shadow(-4px 0px 2px violet)   
            drop-shadow(-5px 0px 1px var(--azure))
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  55% {
    font-size: 1.4rem;
    height: 1rem;
    transform: rotate(255deg) translateX(90px);
    filter: drop-shadow(-5px 0px 2px orange)  
            drop-shadow(-4px 0px 2px violet)
            drop-shadow(-5px 0px 1px purple) 
            drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
            drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  95% {
    filter:drop-shadow(-5px 0px 3px orange)  
           drop-shadow(-4px 0px 2px violet)  
           drop-shadow(-5px 0px 1px purple) 
           drop-shadow(-5px 0px 1px red)
           drop-shadow(-25px 0px 35px rgba(255, 165, 0, 0.6)) 
           drop-shadow(-35px 0px 55px rgba(255, 140, 0, 0.3));
  }
  100% {
    height: 0.5rem;
    font-size: 1rem;
    transform: rotate(270deg) translateX(0px);
    filter: drop-shadow(-5px 0px 1px orange) 
            drop-shadow(-5px 0px 10px violet) 
            drop-shadow(-25px 0px 35px rgba(0, 155, 245, 0.671)) 
            drop-shadow(-35px 0px 55px rgb(255, 255, 255));
  }  
}

/*  underperforming
@keyframes waterNebula {
  0% {
    filter: 
      drop-shadow(-20px 0px 10px rgba(0, 152, 240, 0.8)) 
      drop-shadow(25px 0px 15px rgba(255, 255, 255, 0.8)) 
      drop-shadow(30px 0px 110px rgba(0, 248, 227, 0.1))
  }
  60% {
    filter: 
      drop-shadow(-20px 0px 10px rgba(0, 152, 240, 0.8)) 
      drop-shadow(25px 0px 15px rgba(255, 255, 255, 0.8)) 
      drop-shadow(30px 0px 110px rgba(0, 248, 227, 0.1))
      drop-shadow(35px 0px 55px rgba(3, 120, 255, 0.6))
      drop-shadow(1px 0px 25px rgba(3, 120, 255, 0.6))
      drop-shadow(-35px 0px 155px rgba(255, 255, 255, 0.6))
      drop-shadow(30px 0px 110px rgba(255, 255, 255, 0.6))
      drop-shadow(1px 0px 125px rgba(3, 121, 255, 0.4));
  }
}
*/



/*_ ********************************************************/
/*_ ************** RESPONSIVE first-component**************/
/*_ ******************************************************/

@media only screen and (max-width: 1300px) {
  .component-area{  
    display: grid;
    grid-template-columns:  auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    margin-top: 0px;
    height: 95vh;
    min-height: -webkit-fill-available;
    width: 100%;
    overflow: hidden;
  }
  #IT-first-component{
    font-size: 0.8rem;
    font-weight: 900;
    width: 370px;
    box-sizing: border-box;
    text-align: right;
    position: absolute;
  }
  #name-first-component{
    font-size:2.2rem;
    font-weight: 900;
  }
  .initial-component{
    max-height:400px;
    padding: 30px 25px;
    color: var(--initial-component);
  }
  #first-component{
    margin-top: 50px;
    font-size: 0.9em;
    font-family: 'Poppins', sans-serif;
  }
  #second-component{
    margin-top: 15px;
    margin: 8px;
    padding: 15px 20px;
    min-height: max-content;
    max-width: 400px;
    height: max-content;
  }

  #second-component .button{
    text-align: right;
  }
  #second-component h2{
    padding-left: 0%;
    text-align: left;
    line-height: 1.1;
    font-size: 1.3rem;
  }
  #second-component p{
    padding-left: 10px;
    line-height: 1.2;
    font-size: 1rem;
  }
  #animation-component{
    margin: 15px 20px;
    margin-top: -15px;
    font-size: 1em;
    font-weight:700;
    height: 240px;
    width: 440px;
    padding: 8px;
    font-family: "Courier New";
  }
}
@media only screen and (max-width: 800px) {
  *{
    --scale-space:0.15;
  } 
  .component-area{  
    display: grid;
    grid-template-columns:  auto;
    row-gap: 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    height: 100dvh; 
    height: -webkit-max-content;
    width: 100%;
    overflow: hidden;
  }
  #IT-first-component{
    font-size: 0.8rem;
    font-weight: 900;
    width: 259px;
    box-sizing: border-box;
    text-align: right;
    position: absolute;
    padding-top:14px;
  }
  #name-first-component{
    font-size:1.552rem;
    font-weight: 900;
    max-width: 1030px;
  }
  .initial-component{
    color: var(--initial-component);
  }
  #first-component{
    font-size: 0.9em;
    font-family: 'Poppins', sans-serif;
    max-height:300px;  
    min-width: 260px;
    max-width: min-content;
  }
  #second-component{
    padding: 15px 20px;
    min-height: max-content;
    max-width: 250px;
    margin-bottom: 40px;
    height: max-content;
  }

  #second-component .button{
    text-align: right;
  }
  #second-component h2{
    padding-left: 5px;
    line-height: 1.8rem;
    font-size: 1.2rem;
  }
  #second-component p{
    padding-left: 10px;
    padding-right: 10px;
    /*text-align: justify;*/
    line-height: 1.2;
    font-size: 1rem;
  }
  #animation-component{
    margin: 13px 18px;
    font-size: 1em;
    font-weight:700;
    height: 260px;
    width: 280px;
    padding: 10px;
    margin-bottom: 40px;
    font-family: "Courier New";
  }
  a{
    cursor:none;
  }
}

/*_ *************************************/
/*_ *****END TYPEWRITER******************/
/*_ *************************************/

.first{
  /*position: fixed;*/
  background-color: var(--background-first);
  background-size: cover;
  height: 100dvh;
  width: 100vw;
  min-height: -webkit-max-content;
  top: 0%;
  left: 0%;
  -webkit-transform: -webkit-translate(0%, 0%);
  -ms-transform: translate(0%,0%);
  transform: translate(0%,0%);
}
.first.light-theme{
  /*position: fixed;*/
  /*position: -webkit-sticky;*/
  background-color: var(--background-first);
  background-size: cover;
  width:100%;
  min-height: -webkit-max-content;
  top: 0%;
  left: 0%;
  -webkit-transform: -webkit-translate(0%, 0%);
  -ms-transform: translate(0%,0%);
  transform: translate(0%,0%);
}

/*! It does NOT work on iPhone, problems displaying the entire first div
@media screen and (max-width: 800px) {
  .first{
    min-height: -webkit-fill-available;
  }
  .first.light-theme{
    min-height: -webkit-fill-available;
  }
}
  */

.earth-demo{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.test{
  position: relative;
  
}
.sky {
  pointer-events:none;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  z-index: 0;
  width: 100%;
  background-color: #000;
  overflow: hidden;
  border-radius: 25px;
  box-shadow: inset 5px 5px 10px var(--up-box),
    inset -5px -5px 10px var(--down-box);
}
.space {
  pointer-events: none;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 1s;
  scale: var( --scale-space);
  animation: spin 60.24s linear infinite;
  transform-style: preserve-3d;
  animation: moveForwardSpace 20s ease-in-out infinite alternate-reverse; 
}

@keyframes moveForwardSpace {
  0% {
    transform: translateZ(-1000px) scale(0.5); /* start small and far away */
  }
  50% {
    transform: translateZ(0px) scale(1); /* to approach, maximum approach point */
  }
  75%{
    transform: translateZ(5000px) scale(0.5); /* Walks away */
  }
  100% {
    transform: translateZ(10000px) scale(0.25); /* Walks away */
  }
}
.stars {
  z-index: 0;
  position: relative;
  perspective: 2000px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-image: url(../images/sky.png);
  background-size: cover;
}

.star {
  pointer-events:none;
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 0;
  background-color: #ffffff5d;
  border-radius: 50%;
  /*-webkit-filter: drop-shadow(0px 0px 5px #ffffff);*/
  filter: drop-shadow(0px 0px 5px #ffffff);
  animation: moveForward 60s linear infinite; /* put longer duration for slower and smoother movement */
}

@keyframes moveForward {
  0% {
    transform: translateZ(-1000px) scale(1.2); /* It gets closer and grows */
  }
  100% {
    transform: translateZ(1000px) scale(0.5); /* Start far and small */
  }
}

.star2 {
  pointer-events:none;
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 0;
  background-color: #fff;
  border-radius: 50%;
  -webkit-filter: drop-shadow(0px 0px 5px #fbff00);
  filter: drop-shadow(0px 0px 5px #fbff00);
  animation-name: move;
  animation-iteration-count: infinite;
}
@keyframes move {
  0% {
    top: -100px;
  }
  50% {
    top: 600px;
  }
  100% {
    top: 800px;
  }
}

#animation-component :hover{
  transition: 1s;
  --scale-space: 0.15;
}

.sole {
  pointer-events:none;
  position: absolute;
  top: calc(50% - 110px);
  left: calc(50% - 125px);
  border-radius: 100%;
  box-shadow: 0 0 12em 1em #b66011;
}
.sole img{
  z-index: 99;
  height: 240px;
  width: 240px;
  position: absolute;
  top: 0;
  left:0;
  /*clip-path: circle(150%);/** to delete the black border into the gif*/
  transform: rotate(-23.27deg);
}
.sole img{
  z-index: 99;
  pointer-events:none;
  height: 240px;
  position: absolute;
  top: 0;
  left:0;
  width: 240px;
  border-radius: 50%;
  -webkit-filter: drop-shadow(0px 0px 6px #b661118f);
  filter: drop-shadow(0px 0px 6px #b661118f);
  box-shadow: 0 0 12em 1em #b661118f;
}
.earth-zone{
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}
.earth-container {
  animation: spin  31.536s linear infinite;
  }
.earth{
  background: none;
  height: 0px;
  width: 0px;
  transform-origin: 25px;
  border-radius: 100%;
  pointer-events:none;
}
.earth img{
  height: 120px;
  pointer-events:none;
  transform-origin: 25px;
  transform: translateX(-440px) translateY(-440px) rotate(210.27deg);
  width: 120px;
  -webkit-filter: drop-shadow(-20px 0px 45px #349cd8);
  filter: drop-shadow(-20px 0px 45px #349cd8);
  /*clip-path: circle(%);/** to delete the black border into the gif*/
}
.moon-container {
  position: absolute;
  top: calc(50% - 400px);
  left: calc(50% - 450px);
  }
.moon{
  animation: spin 5s linear infinite;/*dovrebbe essere 2.36s*/
  background: none;
  height: 0px;
  width: 0px;
  transform-origin: 0px;
  border-radius: 100%;
  pointer-events:none;
}
.moon img{
  height: 40px;
  pointer-events:none;
  transform-origin: 25px;
  transform: translateX(-75px) translateY(-150px);
  width: 40px;
  -webkit-filter: drop-shadow(0px 0px 5px #ffffff);
  filter: drop-shadow(0px 0px 5px #ffffff);
}
.mercurio-container {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  animation: spin 7.6032s linear infinite;
  }
.mercurio{
  background: none;
  height: 0px;
  width: 0px;
  transform-origin: 25px;
  border-radius: 100%;
  pointer-events:none;
}
.mercurio img{
  height: 50px;
  pointer-events:none;
  transform-origin: 25px;
  transform: translateX(-220px) translateY(-200px) rotate(210.27deg);
  width: 50px;
  -webkit-filter: drop-shadow(0px 0px 55px #ffa600);
  filter: drop-shadow(0px 0px 55px #ffa600);
}
.venere-container {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  animation: spin 19.3536s linear infinite;
  }
.venere{
  background: none;
  height: 0px;
  width: 0px;
  transform-origin: 25px;
  border-radius: 100%;
  pointer-events:none;
}
.venere img{
  height: 110px;
  pointer-events:none;
  transform-origin: 25px;
  transform: translateX(-290px) translateY(-290px) rotate(210.27deg);
  width: 110px;
  -webkit-filter: drop-shadow(-15px 0px 55px #ffa600db);
  filter: drop-shadow(-15px 0px 55px #ffa600db);
}
.marte-container {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  animation: spin 59.3548s linear infinite;
  }
.marte{
  background: none;
  height: 0px;
  width: 0px;
  transform-origin: 25px;
  border-radius: 100%;
  pointer-events:none;
}
.marte img{
  height: 70px;
  pointer-events:none;
  transform-origin: 25px;
  transform: translateX(-600px) translateY(-480px) rotate(210.27deg);
  width: 70px;
  -webkit-filter: drop-shadow( -15px 0px 55px #ff0000db);
  filter: drop-shadow(-15px 0px 55px #ff0000db);
}


@keyframes spin{
  to{
    transform: rotateZ(-360deg);
    -webkit-transform: rotateZ(-360deg);
  }
}
@keyframes  rotate{
  to{
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
  }
}


/*_  MIDDLE*/

.middle1{
  margin-left: 50%;
  transform: translateX(-50%); 
  -webkit-transform: translateX(-50%); 
  width: 95%;
  border-radius: 30px;
  /*border: 0.1px solid var(--border-middle);*/
  height: max-content;
  padding: 50px 0px;
  overflow: hidden;
}
.aboutme{
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  column-gap:50px;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  font-weight: 100;
  padding: 20px;
  margin-top: 30px;
  height: max-content;
  width: 90%;
  font-family: 'Poppins', sans-serif;
  font-weight:100;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  border-top: 0.1px solid var(--line-middle);
}
.mypresentation{ 
  margin-top: 20px;
  margin-bottom: 50px;
  padding: 40px 50px;
  color: var(--grey);/*cbcbcb*/
  font-size: 20px;
  max-width: 50%;
  border-radius: 35px;
  background: var(--background-neumorphism);
  box-shadow: inset 10px 10px 10px var(--up-box),
            inset -10px -10px 10px var(--down-box);
 }
.aboutme p{
  margin-left: 15px;
}

.aboutme h2{
  font-size: 30px;
  color:var(--aboutme-font);
  width: max-content;
  padding: 5px 15px;
  border-radius: 50px;
  background: linear-gradient(145deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  4px 4px 8px var(--up-box),
               -4px -4px 8px var(--down-box);
 }

 .aboutme h3{
  font-size: 20px;
  color:var(--aboutme-font);
  width: min-content;
  padding: 5px 15px;
  border-radius: 50px;
  background: linear-gradient(145deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  4px 4px 8px var(--up-box),
               -4px -4px 8px var(--down-box);
 }

 .education{
  font-size: 15px;
  justify-content: justify;
  width: 80%;
 }
 .education p{
  padding: 0%;
  color: var(--font-alpha);
  margin-left: 10px;
 }
 .education li{
  margin-left: 15px;
 }
 .hobbies{
  font-weight: 100;
  font-size:14px;
  display: grid;
  height: min-content;
  grid-template-columns: auto auto auto ;
  width: 50%;
  gap: 1rem;
 }
.skills{
  margin-top: 70px;
  padding: 40px 50px;
  height: max-content;
  min-width: max-content;
  border-radius: 35px;
  background: var(--background-neumorphism);
  box-shadow: inset 8px 8px 8px var(--up-box),
            inset -8px -8px 8px var(--down-box);
}
.skills h1{
  color:var(--aboutme-font);
  width: min-content;
  padding: 5px 15px;
  border-radius: 86px;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  5px 5px 8px var(--up-box),
             -5px -5px 8px var(--down-box);
 }
.skills-intern{
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  width: max-content;
  height: min-content;
  grid-template-columns: auto auto auto auto ;
  gap: 3rem;
  column-gap: 5rem;
}
.skills-intern img:hover {
  z-index: 9999;
  transition: 0s;
  transform: scale(0.98); 
  box-shadow: inset 2px 2px 5px var(--up-box),
             inset -2px -2px 5px var(--down-box);
}
.skills-intern img{
  padding: 6px;
  width: 45px;
  border-radius: 15px;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  2px 2px 6px var(--up-box),
             -2px -2px 6px var(--down-box);
}/*
.skills-intern img:hover {
  transform: scale(1.5);
}*/
.items-skills{
  color:var(--project-font);
  font-weight:750;
  width: max-content;
  padding: 4px 10px;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  4px 4px 7px var(--up-box),
               -4px -4px 7px var(--down-box);
}
@media only screen and (max-width: 1100px) {
  .mypresentation{
    margin-left: 50%;
    transform: translateX(-50%);
    min-width: 90%;
  }
  .skills{
    margin-left: 50%;
    transform: translateX(-50%);
    min-width: 90%;
  }
  .skills-intern{
    grid-template-columns: auto auto auto auto;
  }
}
@media screen and (max-width: 800px){
  .middle1{
    width: 95%;
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    padding: 50px 0px;
  }
  .aboutme{
    width: 90%;
    display: flex;
    flex-direction: column;
    margin-left: 50%;
    -webkit-text-size-adjust: 100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    overflow: hidden;
  }
  .education p{
    padding: 0%;
    color: var(--font-alpha);
    margin-left: 10px;
   }
  .aboutme h1, h2{
    font-size: 30px;
  }
  .mypresentation{
    padding-left: 40px;
    margin-left: 50%;
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%);
    overflow: hidden;
    font-size: 1rem;
    font-weight: 100;
    min-width: 80%;
   }
   .skills{
    max-width: 80%;
    min-width: 50%;
    margin-left: 50%;
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%);
   }
   .skills-intern{
    grid-template-columns: auto auto auto;
  }
  .hobbies{
    font-weight: 100;
    font-size:14px;
    display: grid;
    height: min-content;
    grid-template-columns: auto auto ;
    width: 50%;
    gap: 1rem;
    padding: 10px 0px;
   }
}

/*_ ******************************/
/*_ BLOG *********************/
/*_ ****************************/

.middleBlog {
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 95%;
  border-radius: 30px;
  /*border: 0.1px solid var(--border-middle);*/
  height: max-content;
  padding: 50px 0px;
  backdrop-filter: blur(10px);
  background-color: var(--background-middle);
  /*box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);*/
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.middleBlog button{
  color:var(--font-alpha);
  font-weight:600;
  font-size: 0.90rem;
  border-radius: 25px;
  padding: 10px 10px;
  margin-left: 25px;
  text-decoration: none;
  border: none;
  background-color: var(--background-neumorphism);
  box-shadow: 4px 4px 5px var(--up-box),
              -2px -2px 2px var(--down-box);
}
.blog-button{
  height: min-content;
  width: max-content;
  margin-top: 15px;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
#prevBtn:active, #toggleBtn:active, #nextBtn:active {
  transform: scale(0.90); /* "Pressed" effect */
  transition: transform 0.1s ease;
}

.blog {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  padding: 20px;
  margin-top: 30px;
  height: 100%;
  width: 90%;
  /*border-top: 0.1px solid var(--line-middle);*/
  border-radius: 35px;
  background: var(--background-neumorphism);
  box-shadow: inset 10px 10px 10px var(--up-box),
            inset -10px -10px 10px var(--down-box);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.blog h2{
  font-size: 30px;
  margin-left: 20px;
  color: var(--project-font);
  width: min-content;
  border-radius: 86px;
  padding: 5px 15px;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow: 5px 5px 8px var(--up-box),
              -5px -5px 8px var(--down-box);
}

.blog h3{
  font-size: 0.95rem;
  color: var(--font-alpha);
}

.posts {
  width: 90%;
  align-items: center;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  margin: 30px auto; 
  display: flex; 
}

.post {
  font-size: 0.8rem;
  color: var(--font-beta);
  display: inline-block;
  box-sizing: border-box;
  margin: 10px 10px;
  padding: 20px;
  width: min-content;
  min-width: 450px;
  height: max-content;
  text-wrap: wrap;
  background: linear-gradient(145deg, #00ff6608, #1b1c1d03);
  border-radius: 25px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: transform 0.3s, box-shadow 0.3s;
}

.post:hover {
  z-index: 9999;
  margin-top: 30px;
  margin-bottom: 20px;
  transform: scale(1.2); 
  align-items: center;
  align-self: center;
}
.post-content {
  text-align: left;
  padding: 20px;
}


@media only screen and (max-width: 600px) {
  .post h3{
    font-size: 12px;
  }
  .post {
    font-size: 0.6rem;
    padding: 10px;
    min-width: 250px;
  }
  .post:hover {
    z-index: 9999;
    margin-top: 30px;
    margin-bottom: 20px;
    transform: scale(1.1); 
    align-items: center;
    align-self: center;
  }
}


/*_ ******************************/
/*_ MIDLLE 2*********************/
/*_ ****************************/

.middle2{
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 95%;
  border-radius: 30px;
  /*border: 0.1px solid var(--border-middle);*/
  height: max-content;
  padding: 50px 0px;
  backdrop-filter: blur(10px);
  background-color: var(--background-middle);
  /*box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);*/
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.projects{
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  padding: 20px;
  margin-top: 30px;
  height: 100%;
  width: 90%;
  /*border-top: 0.1px solid var(--line-middle);*/
  border-radius: 35px;
  background: var(--background-neumorphism);
  box-shadow: inset 10px 10px 10px var(--up-box),
            inset -10px -10px 10px var(--down-box);
}
.projects h2{
  font-size: 30px;
  margin-left: 20px;
  color:var(--project-font);
  width:min-content;
  border-radius: 86px;
  padding: 5px 15px;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  5px 5px 8px var(--up-box),
               -5px -5px 8px var(--down-box);
 } 
 .cards{
  box-sizing: border-box;
}

.cards {
  min-width: min-content;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 4rem 5vw;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  list-style-type: none;
}

.card {
  font-family: 'Poppins', sans-serif;
  position: relative;
  display: block;
  height: 90%;  
  width: 90%;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  border-radius: calc(var(--curve) * 1px);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 7px 7px 10px var(--up-box),
             -7px -7px 10px var(--down-box);
}

.card__image {      
  width: 100%;
  height: auto;
  border-bottom: 48px solid var(--background-neumorphism);
  pointer-events: none;
}

.card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;      
  border-radius: calc(var(--curve) * 1px);    
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  background-color: var(--card-project);
  transition: 1.2s ease-in-out;
}

.card__overlay.responsive {
  border-radius: calc(var(--curve) * 1px);    
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

.card__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 2em;
  margin-bottom: -10.918px;
  border-radius: calc(var(--curve) * 1px) 0 calc(var(--curve) * 1px) calc(var(--curve) * 1px);    
  background-color: var(--card-project);
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transition: 0.8s ease-in-out;
}

.card__arc {
  width: 80px;
  height: 80px;
  margin-bottom : -0.796px;
  position: absolute;
  bottom: 100%;
  right: 0;      
  z-index: 1;
}

.card__arc path {
  fill: var(--card-project);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(20px);
  d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}       

.card__header.responsive {
  margin-bottom: -1.918px;
  border-radius: calc(var(--curve) * 1px) 0 0 0;    
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
}
.card__thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;      
  border-radius: 50%;      
}

.card__title {
  font-size: 1em;
  margin: 0 0 .3em;
  color:var(--project-font);
}
.card a{
  text-decoration: none;
}
.card__status {
  font-size: .8em;
  color: var(--description-card);
}

.card__description {
  font-size: 14px;
  padding: 0 2em 2em;
  margin: 0;
  color: var(--description-card);
  display: -webkit-box;
  background-color:var(--card-project);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}  
/*_ MIDDLE3 */

.middle3{
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 95%;
  border-radius: 30px;
  margin-bottom: 20px;
  height: max-content;
  padding: 50px 0px;
  backdrop-filter: blur(10px);
  background-color: var(--background-middle);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.contacts{
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  padding: 20px 50px;
  margin-top: 30px;
  height: 100%;
  width: 87%;
  color: var(--font-beta);
  border-radius: 35px;
  background: var(--background-neumorphism);
  box-shadow: inset 10px 10px 10px var(--up-box),
            inset -10px -10px 10px var(--down-box);
}
.intern-contacts{
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 2rem;
  row-gap: 1rem;
  width: min-content;
}
@media screen and (max-width: 800px) {
  .contacts{
    width: 75%;
  }
  .intern-contacts{
    display: grid;
    grid-template-columns: auto auto;
  }
}
.contacts h2{
  font-size: 25px;
  color:var(--project-font);
  width:min-content;
  border-radius: 86px;
  padding: 15px 15px;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  5px 5px 8px var(--up-box),
               -5px -5px 8px var(--down-box);
 } 
 .contacts h3{
  font-size: 18px;
  color:var(--project-font);
  width:max-content;
  border-radius: 86px;
  padding: 10px 10px;
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow:  5px 5px 8px var(--up-box),
               -5px -5px 8px var(--down-box);
 } 
 .contacts .contact-name{
    font-size: 15px;
    line-height: 2;
    color: var(--font-alpha);
    margin-left: 15px;
    font-weight: 550;
 }

  .contacts a :hover{
    box-shadow: 0 5px 0 0 currentColor;
    border-bottom: 5px solid var(--font-alpha);
  }
  .contacts .email{
    color: var(--font-beta); 
    margin-left: 15px;
    font-size: 16px;
    line-height: normal;
  }
 .contacts p{
    color: var(--font-beta); 
    margin-left: 10px;
    font-size: 20px;
 }


/*_ END */

.end{
  position: sticky;
  grid-area: footer;
  width: 100%;
  height: min-content;
  padding: 15px 0px;
  font-size: 12px;
  line-height: 22px;
  font-weight: 100;
  font-family: 'Poppins', sans-serif;
  font-size: smaller;
  text-align: center;
  /*background: linear-gradient(140deg, var(--first-gradient), var(--second-gradient));*/
  background-color: var(--background-neumorphism);
  box-shadow: -6px -6px 8px var(--down-box);
}
.gridend{
  color: var(--end-font);
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto auto;
  text-align: center;
}
.intern-end{
  border-top: 1px solid var(--line-end);
  box-sizing: content-box;
  margin-top: 0px;
  color: var(--end-font);;
  font-size: 9px;
  line-height: 1px;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 100%;
  text-align: center;
}
.gridend h3{
  font-size: 14px;
}
.return-up{
  font-size: 1.3rem;
  text-align: center;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
.return-up a{
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow: 5px 5px 5px var(--up-box),
              -2px -2px 3px var(--down-box);
  border-radius: 100%;
  padding: 10px 10px;
  height: 20px;
  width: 20px;
  margin-left: 25px;
}
.return-up a:active {
  transform: scale(0.90); /* "Pressed" effect */
  transition: transform 0.1s ease;
}
.return-up a:hover{
  background: linear-gradient(45deg, var(--first-gradient), var(--second-gradient));
  box-shadow: inset 5px 5px 5px var(--up-box),
              inset -2px -2px 3px var(--down-box);
  border-radius: 100%;
  height: 20px;
  width: 20px;
}
.credits{
  text-align: center;
  display: flex;
  flex-direction: column;
}
/*.powered{
  
}*/

.intern-end p{
  margin-bottom: 0px;
}

.spaceXLogo {
  margin-left: 50%;
  transform: translateX(-40%);
  width:130px; 
  height: fit-content;
  padding: 5px;
  border-radius:5px;
  font-weight: 700;
  margin-bottom: 5px;
  font-style: normal;
  text-decoration: none;
  filter: drop-shadow( 0px 0px 1px var(--spaceX-logo)) ;
}

.fill-spaceX-logo{
  fill: var(--spaceX-logo);
}
.fill-opnesea-logo{
  fill: var(--spaceX-logo);
}
.find-hester-egg {
  margin-top: -10px; 
  margin-bottom: -12px;
  font-size: 8px;
  margin-left: 12px ;
  color:  var(--spaceX-logo);
  font-family: monospace;
  filter: drop-shadow( 0px 0px 1px var(--spaceX-logo)) ;
}
.github-logo{
  width:60px; 
  padding: 2px; 
  border-radius:5px; 
  filter: var(--github-logo);
}
/*- LOADER-*/

.loading{
  margin: 0;
  position: fixed;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 999;
  height: 100%;
  touch-action: pan-down;
  width: 100%;
  z-index: 9999999;
  background-color: var(--background-loading);
}
.logoloader{
  position: absolute ;
  background-color: var(--background-loading);
  background-image: var(--url-logo);
  height: 45px;
  width: 45px;
  top: 65%;
  margin-left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  background-repeat: no-repeat;
  border-color: var(--trasparent);
  text-decoration: none;
}

.loader-container{
  position: fixed;
  width: 120px;
  height: 120px; 
  border-radius: 100%;
  top:65%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  /*background: var(--background-neumorphism);
  box-shadow: inset 4px 4px 4px var(--up-box),
             inset -5px -5px 8px var(--down-box);*/
}

.loader{
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader::before{
    content: '';
    width: 65px;
    height: 65px; 
    border: 2px solid #ffffff;
    z-index: 1;
    border-radius:100%;
    border-top-color: transparent;
    border-bottom-color: transparent;
    /* border-bottom-color: transparent; */
    animation: loader linear infinite 0.75s;
}

.loader::after{
    content:'';
    width: 55px;
    height: 55px;
    padding: 20px;
    border: 3px solid var(--font-alpha);
    z-index: -1;
    position: absolute;
    border-radius:100%;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: inverted-loader linear infinite 1.5s;
    transform: rotate(00deg);
    -webkit-transform: rotate(00deg);
    /*display: none; /* -- rimuovere per mostrare seconda barra di caricamento -- */
}

@keyframes loader {
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@keyframes inverted-loader {
    100%{
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

#console{
  border-color: 1px solid var(--border-console);
  padding: 20px;
  margin-top: 20vh;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  height: 200px;
  width: 350px;
  background-color: var(--console);
  box-shadow: 0px 0px 0px rgba(12, 12, 12, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 15px solid var(--background-loading);
  box-shadow: -7px -7px 10px var(--up-box),
               7px 7px 10px var(--down-box);
}
#console p {
  font-family: monospace;
  margin: 0;
  padding: 0;
  font-size: smaller;
  line-height: 0.85;
  color: var(--console-font);
  text-shadow: 0px 0px 10px var(--console-font);
}

.msg {
  box-sizing: border-box;
  z-index: 9999999;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2vh;
  padding-top: 2vh;
  background: #ff000000;
  box-shadow: inset 8px 8px 5px var(--up-box),
              inset -1px -1px 5px #ff0000;
  text-shadow: 0 0 60px rgb(255, 0, 0);
  color: #ff0000;
  padding : 20px;
  backdrop-filter: blur(20px);
  position: absolute;
  left: 50%;
  border-radius: 50px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 80%;
  margin-top: -2vh;
  text-align: center;
  min-width: 100px;
  animation-name: blink;
  /*animation-duration: 1.9;*/
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 800px) {
  .loading-container{
    height: 80%;
    width: 100%;
    scale: 0.7;
    top: 0%;
  }
  #console{
    margin-top: 3dvh;
  }
  .loader-container{
    margin-top: 5dvh;
  }
  .logoloader{
    margin-top: 5dvh;
  }
  .msg{
    margin-top: 20dvh;
  }
}