:root{
  --radius: 0;
  --margin-1x: 10px;
  --margin-2x: 20px;
  --font-size-s: 10px;
  --font-size-m: 18px;
  --font-size-l: 30px;
  --color-white: white;
  --color-black: black;
  --color-blue: blue;
  --color-orange: #FF5F1F;
  
  
}

/* Reset CSS */
* {
   margin: 0;
   padding: 0;
   list-style: none;
   box-sizing: border-box;
   outline: none;
   /* URL and coordinates, with mandatory keyword fallback */
 }

 img {
   display: block;
   width: 100%;
   height: auto;
 }
 

 /* Global style */
 * {
   font-family: Helvetica, Arial, sans-serif;
   font-weight: 300;
   line-height: 1.05em;
 }
 
 html {
   font-size: var(--font-size-m); /*qui setto la fontsize base, poi se ingiro uso rem come unità di misura si rifà a questo*/
 }

 body{
  background-color: var(--color-white);
 }



 h1, h2, h3, h4, h5, h6{
   font-size: 1em;
 }

 a {
   text-decoration: none;
   color: black;
 }



/* Da qui scrivo io */

main{
  margin-top: 35px;
  margin-left: var(--margin-1x);
  margin-right: var(--margin-1x);
  
}

.invert{
  -webkit-text-fill-color: var(--color-white);
  color: var(--color-white);
  
}
/*cursor*/

/* .cursor{
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  transform: translate(-50%, -50%);
  transition: 0.1;
  pointer-events: none;
  z-index: 1111111;
  cursor: none;
  mix-blend-mode: difference;
  top: -3000px;
} */


/* Theme */
.theme--dark{
  background-color: var(--color-black);
  color: var(--color-white);
}

.theme--dark a{
  color: var(--color-white);
}

.theme--dark .box{
  background-color: var(--color-black);
  color: var(--color-white);
}

.theme--dark .bottom__bar{
  background-color: var(--color-black);
  color: var(--color-white);
}

.theme--dark .theme-selector{
  background-color: var(--color-white);
}

.theme--dark .top-bar{
  background-color: var(--color-black);
}




.theme--light{
  background-color: var(--color-white);
  color: var(--color-black);
}

.theme--light a{
  color: var(--color-black);
}

.theme--light .box{
  background-color: var(--color-white);
  color: var(--color-black);
}

.theme--light .bottom__bar{
  background-color: var(--color-white);
  color: var(--color-black);
}

.theme--light .theme-selector{
  background-color: var(--color-blue);
}

.theme--light .top-bar{
  background-color: var(--color-white);
  color: var(--color-black);
}





.theme--blue{
  background-color: var(--color-blue);
  color: var(--color-white);
}

.theme--blue .top-bar {
  mix-blend-mode: normal;
}

.theme--blue a{
  color: var(--color-white);
}

.theme--blue .box{
  background-color: var(--color-blue);
  color: var(--color-white);
}

.theme--blue .bottom__bar{
  background-color: var(--color-blue);
  color: var(--color-white);
}

.theme--blue .theme-selector{
  background-color: var(--color-black);
}

.theme--blue .top-bar{
  background-color: var(--color-blue);
}

/* scroll hidden*/

.hidden{
  opacity: 0.5;
  transition: all 0.5s;
  transform: translateX(-50px);
  transition-timing-function: ease;
}

.show{
  opacity: 1;
  transform: translateX(0px);
  transition-timing-function: ease;
}


@media only screen and (max-width: 768px) {
  .works__items, .exercises__items {
     grid-template-columns: repeat(1,1fr);
  }
}