/* -------------------------------------------------------------------------------- */
/* ! Base */
/* -------------------------------------------------------------------------------- */
/* Tavolozza */
:root {
  --primary: #26ff00;
  --secondary: #800080;
  --accent: #eeFF00;
  --light: #EEF8FB;
  --dark: #372F34;
}


/* Reset */

html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 1550px;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

/* Tipografia */
body {
  font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
  /* color: aqua; */
  color: var(--accent);
  mix-blend-mode: difference;
}

h4 {
  font-size: 35px;
  /* font-size: 2.5vw; */
  padding-bottom: 40px;
}

p,
ul,
a {
  font-size: 1.2em;
  /* line-height: 1.2em; */
  margin-bottom: 15px;
}

p.leading {
  font-size: 10pt;
  line-height: 1.4em;
}

p span {
  font-weight: 900;
  color: var(--primary);
}

.cta {
  display: block;
  border: 1px solid var(--primary);
  font-weight: 900;
  color: var(--primary);
  margin: 0 auto;
  padding: 12px;
  border-radius: 12px;
  width: fit-content;
  text-transform: uppercase;
}

.cta:hover {
  background: var(--primary);
  color: var(--light);
}

/* Riuso */
.res {
  width: 100%;
  max-width: 400px;
}

.clipped {
  clip-path: circle();
}

/* -------------------------------------------------------------------------------- */
/* ! Mobile first */
/* -------------------------------------------------------------------------------- */
/* Grid system */

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  /* padding: 20px; */
}

/* Navigazione */

.site-nav__menu {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 0;
  overflow: hidden;
}

.open .site-nav__menu {
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  align-items: center;
  position: fixed;
  max-height: 100%;
  width: 100%;
  height: 100vh;
  background-color: var(--light);
  z-index: 3;
  /* gap: 40px; */
}

.site-nav__menu a {
  font-family: 'Montserrat', sans-serif;
  font-size: 65pt;
  font-weight: 700;
  /* color: aqua; */
  color: var(--accent);
  mix-blend-mode: difference;
  cursor: pointer;
}

.site-nav__menu a:hover {
  color: var(--accent);
  mix-blend-mode: normal;
}

.site-nav__menu h6 {
  font-family: 'Montserrat', sans-serif;
  font-size: 65pt;
  font-weight: 700;
  color: var(--accent);
  mix-blend-mode: difference;
  cursor: pointer;
  width: 1%;
}

.site-nav__menu h6:hover {
  color: var(--accent);
  mix-blend-mode: normal;
}

.site-nav__options {
  display: block;
  grid-column: 2/9;
  margin-top: 5vh;
}

.site-nav__options a,
.site-nav__options h6 {
  font-size: 6vw;
}

.site-nav__tend,
.tend1,
.tend2,
.tend3,
.tend4,
.tendabout {
  display: block;
  grid-column: 5/9;
  align-items: start;
  visibility: hidden;
}

.site-nav__tend.active,
.tend1.active,
.tend2.active,
.tend3.active,
.tend4.active,
.tendabout.active {
  display: block;
  visibility: visible;
}

.tendworks li {
  margin-bottom: 25px;
}

.tendworks a {
  /* font-size: 23pt; */
  font-size: 2vw;
}

.site-nav__hamburger {
  position: fixed;
  cursor: pointer;
  grid-column: 8/9;
  margin-top: 10px;
  justify-self: end;
  display: block;
  margin-right: 2.5rem;
  padding: 1rem 0;
  height: 12px;
  /* width: 60px; */
  width: 4vw;
  box-sizing: content-box;
  mix-blend-mode: difference;
  z-index: 3;
}

.bar {
  width: 100%;
  height: 4px;
  /* background-color: black; */
  background-color: var(--accent);
  border-radius: 3px;
  position: relative;
  display: block;
  margin-top: 10px;
  transition: all 0.7s cubic-bezier(0.215, 0.610, 0.355, 1);
}

body {
  /* background: #bebebe; */
  background: #00f2ff;
  /* background: #ff9d47; */
}

body.open .bar:nth-child(1) {
  transform: rotate(135deg);
  translate: 0 6px;
}

body.open .bar:nth-child(2) {
  transform: rotate(-135deg);
  translate: 0 -6px;
}

/* Benvenuto */

#welcome {
  /* background: url(img/Io.png) no-repeat;
  background-size: cover; */
  height: 100vh;
}

#myphoto {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  justify-self: end;
}

.crazy {
  background: url(img/paxxo.png) no-repeat center center;
  background-size: 40vh;
  background-position-y: 30%;
  /* background-position-x: 40vw; */
  /* background-position-x: 700px; */
  /* background-position-y: 20px; */
}

/* .crazy.active {
  background: url(img/iooo.png) no-repeat center center;
  background-size: 100vh;
  background-position-y: 20px;
  background-position-x: 900px;
  transition: all 0.7s cubic-bezier(0.215, 0.610, 0.355, 1);
} */

.crazy.active {
  background: url(img/ioioio2.jpg) no-repeat center center;
  background-size: 100%;
}

/* #welcome::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  opacity: 0.5;
} */

.welcome-bi {
  position: absolute;
  /* width: 100%; */
  padding: 20px;
  height: 100%;
}

.welcome__presentation {
  grid-column: 2/4;
  z-index: 2;
  mix-blend-mode: difference;
  height: 100px;
}

.welcome__text {
  /* font-size: 16pt; */
  font-size: 1.3vw;
  margin-top: 30px;
  color: rgb(238, 255, 0);
  line-height: 1.4;
  visibility: hidden;
  font-weight: 700;
}

.welcome__text.active {
  /* font-size: 16pt; */
  font-size: 1.3vw;
  margin-top: 30px;
  color: rgb(238, 255, 0);
  line-height: 1.4;
  visibility: visible;
}

.activator-container__up {
  display: none;
}

.activator-container {
  grid-column: 2/4;
  height: 100%;
  /* text-align: center; */
}

.welcome__activator {
  /* font-size: 100pt; */
  /* font-size: 8.4em; */
  font-size: 10vw;
  /* font-size: 12vw; */
  line-height: 0.9;
  /* margin-top: 20%; */
  height: 100px;
  width: 1%;
}


/* Portfolio */
#portfolio {
  position: relative;
  background: var(--secondary) no-repeat;
  height: 100vh;
  /* background-size: 100vw; */
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  gap: 10px;
  padding: 20px;
}

/* #portfolio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark);
  opacity: 0.8;
} */

#portfolio h2 {
  position: absolute;
  z-index: 1;
  grid-column: 2;
  grid-row: 5;
  text-align: center;
  padding: 12px;
  /* font-size: 110px; */
  font-size: 15vh;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

.portfolio__projects {
  position: absolute;
  display: block;
  grid-column: 3/9;
  grid-row: 2;
}

.portfolio__projects li {
  padding-bottom: 30px;
}

.portfolio__projects a {
  /* font-size: 35px; */
  font-size: 4vh;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--accent);
  mix-blend-mode: difference;
}

/* Skills */

#skills {
  grid-template-rows: repeat(8, 1fr);
  background: blue no-repeat;
  height: 100vh;
  padding: 20px;
  /* background-size: 100vw; */
  background-size: cover;
  background-position: center;
}

#skills h2 {
  /* position: absolute; */
  grid-column: 1/6;
  /* text-align: center; */
  /* padding: 15px; */
  padding-top: 15px;
  /* font-size: 110px; */
  font-size: 7vw;
  /* transform: rotate(-90deg); */
}

#skills li {
  line-height: 3.2vh;
}

#skills h4 {
  cursor: pointer;
}

.skills__column {
  grid-column: 3/5;
  /* grid-row: 3; */
  /* margin-top: 180px; */
  margin-top: 2vw;
}

.skills__columm {
  display: block;
  grid-column: 5/7;
  /* margin-top: 300px; */
  /* margin-top: 40vh; */
  margin-top: 9vw;
}

.skills__columl {
  display: block;
  grid-column: 7/9;
  /* margin-top: 440px; */
  /* margin-top: 55vh; */
  margin-top: 16vw;
}

.skills__xcento h1 {
  visibility: hidden;
}

.skills__xcento h1.active {
  visibility: visible;
}


/* #skills li {
  grid-column: span 4;
  background: var(--light);
  padding: 12px;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin-top: 20px;
  width: 150px;
} */

.hidden {
  width: 1%;
}

.hidden:hover {
  mix-blend-mode: normal;
}


/* Footer */
#prefooter {
  /* background: rgb(95, 95, 95); */
  /* background: var(--secondary); */
  background: blue;
}

footer {
  padding: 30px 20px;
}

footer * {
  color: var(--light);
}

.credits {
  grid-column: 1/3;
  display: flex;
  /* align-items: center; */
  color: var(--light);
  font-size: 55px;
  mix-blend-mode: normal;
  margin-top: 50px;
  width: 1%;
}

.social,
.sociale {
  grid-column: 5/9;
  display: block;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  visibility: hidden;
}

.social.active {
  grid-column: 5/9;
  display: block;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  visibility: visible;
}

.sociale.active {
  grid-column: 5/9;
  display: block;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  visibility: visible;
}

footer a {
  /* font-size: 45px; */
  font-size: 3vw;
}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Small /
/* -------------------------------------------------------------------------------- */
@media (max-width: 444px) {
  /* TODO Mettere qui le istruzioni da 768px in poi */

  #welcome {
    /* background: url(img/Io.png) no-repeat;
    background-size: cover; */
    height: 100vh;
  }

  .site-nav__hamburger {
    margin-top: 10px;
  }

  .site-nav__menu li {
    margin-bottom: 20px;
  }

  /* .site-nav__options a {
    font-size: 40pt;
  } */

  /* .site-nav__tend a {
    font-size: 15pt;
  } */

  #myphoto {
    height: 100%;
    width: 100%;
    position: absolute;
    /* background-size: 150%; */
    z-index: -1;
  }

  .crazy {
    background: url(img/paxxo.png) no-repeat center center;
    background-size: 30vh;
  }

  .crazy.active {
    background: url(img/ioioio2.jpg) no-repeat center center;
    background-size: cover;
  }

  .welcome__text,
  .welcome__text.active {
    margin-top: 0px;
  }

  .activator-container__up {
    margin-top: 20vw;
  }

  .activator-container {
    grid-column: 1/9;
    /* text-align: center; */
  }

  /* projects */

  #portfolio {
    height: 90vh;
  }

  #portfolio h2 {
    font-size: 90px;
  }

  .portfolio__projects {
    grid-column: 4/8;
  }

  .portfolio__projects a {
    /* font-size: 3.3vh; */
    font-size: 6vw;
  }

  /* skills */

  #skills {
    height: 90vh;
  }

  #skills h2 {
    /* font-size: 55pt; */
    font-size: 20vw;
    padding: 0px;
  }

  #skills h4 {
    font-size: 5vw;
    padding-bottom: 10px;
  }

  #skills li {
    line-height: 4vh;
  }

  .skills__column {
    grid-column: 1/4;
    /* grid-row: 3; */
    height: 21vh;
    margin-top: 5vw;
  }

  .skills__columm {
    display: block;
    /* grid-column: 1/6; */
    grid-column: 5/9;
    /* margin-top: 30px; */
    height: 21vh;
    margin-top: 5vw;
  }

  .skills__columl {
    display: block;
    grid-column: 1/7;
    /* margin-top: 30px; */
    margin-top: 0vh;
  }

  .skills__xcento h1 {
    position: absolute;
    /* transform: rotate(270deg); */
    /* margin-bottom: 6vh; */
    /* margin-left: -10px; */
    margin-bottom: 10vh;
    font-size: 40vw;
  }

  .skills__xcento {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: flex-end;
    width: 1%;
    line-height: 100pt;
  }

  .credits {
    font-size: 15vw;
  }

  .social {
    margin-top: 0px;
  }

  .sociale {
    margin-top: 0px;
  }

  .social.active {
    margin-top: 0px;
  }

  .sociale.active {
    margin-top: 0px;
  }

  .social a {
    /* font-size: 1.1em; */
    font-size: 5vw;
  }

  .sociale a {
    font-size: 1.1em;
  }

}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Medium fino al 444 /
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 444px) and (max-width: 768px) {
  /* TODO Mettere qui le istruzioni da 768px in poi */

  #myphoto {
    width: 100%;
  }

  /* #welcome::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: rgb(0, 0, 0);
    opacity: 0.5;
  }

  /* projects */

  #portfolio h2 {
    grid-row: 4;
    margin-top: 100px;
  }

  /* skills */

  #skills h2 {
    margin-top: 0px;
  }

  /* #skills h4 {
    font-size: 20pt;
    padding-bottom: 10px;
  } */

  .skills__column {
    grid-column: 2/4;
    /* grid-row: 3; */
    height: 100%;
    margin-top: 10vw;
  }

  .skills__columm {
    display: block;
    /* grid-column: 1/6; */
    grid-column: 5/9;
    /* margin-top: 30px; */
    height: 100%;
    margin-top: 0vh;
    margin-top: 10vw;
  }

  .skills__columl {
    display: block;
    grid-column: 2/4;
    /* margin-top: 30px; */
    margin-top: 0vh;
  }

  .skills__xcento h1 {
    position: absolute;
    right: 0;
    margin-right: 4vw;
    margin-top: 10vw;
    /* transform: rotate(270deg); */
    /* margin-bottom: 6vh; */
    /* margin-left: -10px; */
    /* margin-bottom: 10vh; */
    font-size: 20vw;
  }

  /* .skills__column {
    grid-column: 2/4;
    margin-top: 180px;
  }

  .skills__columm {
    display: block;
    grid-column: 4/6;
  }

  .skills__columl {
    display: block;
    grid-column: 6/9;
  }

  .skills__xcento h1 {
    position: absolute;
    grid-column: 1/5;
    font-size: 20vw;
    padding-bottom: 10vh;
    padding-left: 5vh;
  } */

}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Medium fino a small /
/* -------------------------------------------------------------------------------- */
@media (max-width: 769px) {

  /* .site-nav__line {
    background: var(--accent);
    mix-blend-mode: difference;
    width: 100%;
    height: 40px;
    box-shadow: 0 5px 20px 0.1px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);

    z-index: 2;
  } */

  .site-nav__options {
    margin-top: 60px;
  }

  .site-nav__hamburger {
    /* margin-top: 20px; */
    margin-right: 2rem;
    width: 30px;
  }

  /* #portfolio h2 {
    grid-row: none;
    margin-top: 110%;
  } */

  #skills {
    background-size: cover;
  }
}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Medium fino a max /
/* -------------------------------------------------------------------------------- */
@media (min-width: 769px) {
  /* TODO Mettere qui le istruzioni da 768px in poi */

  #welcome::before {
    top: 0;
  }

  /* #welcome::before {
    content: '';
    position: absolute;
    left: 0;
    width: 33%;
    height: 100%;
    background: rgb(0, 0, 0);
    opacity: 0.5;
  } */

  .skills__xcento {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: flex-end;
    width: 1%;
    /* line-height: 250pt; */
    line-height: 40vh;
    padding-left: 5vh;
  }

  .skills__xcento h1 {
    font-size: 20vw;
    /* font-size: 320px; */
    position: absolute;
  }
}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Large fino a giù/
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 992px) {
  /* TODO Mettere qui le istruzioni da 992px in giù */

  .skills__column {
    grid-column: 2/4;
    /* grid-row: 3; */
    /* margin-top: 180px; */
  }

  .skills__columm {
    display: block;
    grid-column: 4/6;
    /* margin-top: 450px; */
    /* margin-top: 30vw; */
    margin-top: 18vh;
  }

  .skills__columl {
    display: block;
    grid-column: 6/9;
    /* margin-top: 740px; */
    /* margin-top: 60vw; */
    margin-top: 35vh;
  }

}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Large fino a giù/
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 445px) and (max-width: 992px) {
  /* TODO Mettere qui le istruzioni da 992px in giù */

  .site-nav__hamburger {
    margin-top: 4vw;
  }

  .crazy {
    background: url(img/paxxo.png) no-repeat center center;
    background-size: 30vh;
    background-position-y: 70%;
  }

  .crazy.active {
    background: url(img/ioioio2.jpg) no-repeat center center;
    background-size: cover;
  }

  .activator-container {
    grid-column: 1/9;
    text-align: center;
  }

  .activator-container__up {
    margin-top: 10vw;
  }

  .portfolio__projects li {
    /* padding-bottom: 60px; */
    padding-bottom: 10vw;
  }

  .portfolio__projects {
    grid-column: 4/8;
  }

  #skills h2 {
    font-size: 15vw;
  }

  #skills h4 {
    font-size: 3.5vw;
  }

}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Extra-Large /
/* -------------------------------------------------------------------------------- */
@media (max-width: 992px) {
  /* TODO Mettere qui le istruzioni da 992px in giù */

  .tendworks li {
    /* margin-bottom: 55px; */
    margin-bottom: 10vw;
  }

  .site-nav__hamburger {
    width: 10vw;
  }


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

  .site-nav__options a,
  .site-nav__options h6 {
    font-size: 9vw;
  }

  .tendworks a {
    font-size: 5.5vw;
  }

  .tendworks {
    display: block;
    grid-column: 2/8;
    visibility: hidden;
  }

  #welcome::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: rgb(0, 0, 0);
    opacity: 0.5;
    display: none;
  }

  .welcome__presentation {
    grid-column: 1/9;
    height: 100%;
    z-index: 2;
    mix-blend-mode: difference;
    display: flex;
    align-items: flex-end;
  }

  .welcome__text {
    /* font-size: 16pt; */
    font-size: 3.5vw;
    /* color: rgb(238, 255, 0); */
    margin-bottom: 50px;
  }

  .welcome__text.active {
    /* font-size: 16pt; */
    font-size: 3.5vw;
    color: rgb(0, 255, 153);
    /* background: #ff00f7; */
    background: purple;
    padding: 5vw;
    margin-bottom: 50px;
  }

  .activator-container__up {
    display: flex;
    grid-column: 2/8;
    margin-bottom: 0%;
    /* text-align: center; */
  }

  .activator-container {
    display: none;
  }

  .welcome__activator {
    font-size: 15vw;
    padding-bottom: 30px;
  }

  #portfolio {
    background-size: cover;
    background-position: center;
  }

  /*! CAROSELLO BACKGROUND !*/

  /* #portfolio {
    animation: progetti 30s ease-in-out infinite;
    background: transparent;
    background-size: cover;
    background-position: center;
  } */

  /* @keyframes progetti {

    0%,
    100% {
      background-image: url(img/morodercover.jpg);
    }

    25% {
      background-image: url(img/spring.png);
    }

    50% {
      background-image: url(img/korgwall.png);
    }

    75% {
      background-image: url(img/appleback1.png);
    }
  } */

  /* #moroder {
    animation-name: moroderchange;
    animation-iteration-count: infinite;
    animation-duration: 5s;
  }

  #spring {
    animation-name: springchange;
    animation-iteration-count: infinite;
    animation-duration: 5s;
  }

  #korg {
    animation-name: korgchange;
    animation-iteration-count: infinite;
    animation-duration: 5s;
  }

  #apple {
    animation-name: applechange;
    animation-iteration-count: infinite;
    animation-duration: 5s;
  } */

  @keyframes moroderchange {
    0% {
      mix-blend-mode: difference;
    }

    25% {
      mix-blend-mode: normal;
    }

    50% {
      mix-blend-mode: normal;
    }

    75% {
      mix-blend-mode: normal;
    }
  }

  @keyframes springchange {
    0% {
      mix-blend-mode: normal;
    }

    25% {
      mix-blend-mode: difference;
    }

    50% {
      mix-blend-mode: normal;
    }

    75% {
      mix-blend-mode: normal;
    }
  }

  @keyframes korgchange {
    0% {
      mix-blend-mode: normal;
    }

    25% {
      mix-blend-mode: normal;
    }

    50% {
      mix-blend-mode: difference;
    }

    75% {
      mix-blend-mode: normal;
    }
  }

  @keyframes applechange {
    0% {
      mix-blend-mode: normal;
    }

    25% {
      mix-blend-mode: normal;
    }

    50% {
      mix-blend-mode: normal;
    }

    75% {
      mix-blend-mode: difference;
    }
  }

  .credits {
    grid-column: 1/9;
  }

  .social {
    grid-column: 1/9;
  }

  .sociale {
    grid-column: 1/9;
  }

  .social.active {
    grid-column: 1/9;
  }

  .sociale.active {
    grid-column: 1/9;
  }

  .social li {
    margin-bottom: 20px;
  }

  .sociale li {
    margin-bottom: 20px;
  }

}

/* -------------------------------------------------------------------------------- */
/* !  Media queries per Extra-Large /
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  /* TODO Mettere qui le istruzioni da 1200px in poi */

  #skills h4 {
    font-size: 2.5vw;
  }
}















/* -------------------------------------------------------------------------------- */
/* ! ABOUT ME */
/* -------------------------------------------------------------------------------- */


#chisono {
  padding: 20px;
  padding-top: 70px;
  background: #00f2ff;
}

#chisono p {
  margin-top: 5px;
}

#formazione {
  grid-column: 1/3;
}

#formazione div {
  margin-top: 30px;
}

#esperienze {
  grid-column: 4/6;
}

#esperienze div {
  margin-top: 30px;
}

#lingue {
  grid-column: 7/9;
}

.lingue__tot {
  margin-top: 30px;
}

@media (max-width: 992px) {

  #formazione {
    grid-column: 2/8;
  }

  #esperienze {
    grid-column: 2/8;
    margin-top: 70px;
  }

  #lingue {
    grid-column: 2/8;
    margin-top: 70px;
  }

  .lingue__tot {
    display: block;
    gap: 70px;
  }

}









/* #projects {
  background: url(img/moroder\ cover\ album.jpg) no-repeat;
  background-size: 70vh;
  background-position-y: 95%;
  background-position-x: center;
} */


/* -------------------------------------------------------------------------------- */
/* ! FROM HERE TO ETERNITY page */
/* -------------------------------------------------------------------------------- */

#fhte-intro {
  /* background: url(img/morodercover.jpg) no-repeat center center; */
  background: magenta;
  background-size: cover;
  padding: 20px;
  height: 100vh;
}

/* .fhte__cover {
  background: url(img/morodercover.jpg) no-repeat center center;
  background-size: 100vw;
  width: 100%;
  height: 100%;
  position: absolute;
} */

.fhte__coveralbum {
  background: url(img/morodercoveralbum.jpg) no-repeat center center;
  background-size: 100%;
  grid-column: 5/8;
}

.fhte__coveralbum:hover {
  background: url(img/GIORGIO.jpg) no-repeat center center;
  background-size: 100%;
  grid-column: 5/8;
}

.fhte__text {
  grid-column: 1/4;
  z-index: 2;
  margin-top: 10px;
}

#fhte-intro h1 {
  font-size: 3vw;
}

#fhte-intro h2 {
  font-size: 3vw;
}

#fhte-intro h3 {
  font-size: 2.5vw;
  margin-top: 20px;
}

#fhte-intro p {
  /* font-size: 1.5vw; */
  font-size: 16pt;
  margin-top: 30px;
  color: var(--light);
}

#fhte-composition {
  padding: 20px;
  background: #372F34;
}

#fhte-composition h3 {
  margin-bottom: 20px;
}

.fhte__composizione {
  grid-column: 1/4;
}

.fhte__composizione p {
  color: var(--light);
}

.fhte__font p {
  color: var(--light);
}

.fhte__color {
  grid-column: 5/8;
}

.fhte__box {
  display: flex;
  gap: 10px;
}

.fhte__magenta {
  background: magenta;
  padding: 10px;
}

.fhte__yellow {
  background: yellow;
  padding: 10px;
}

.fhte__cyan {
  background: hsl(180, 100%, 50%);
  padding: 10px;
}

.fhte__font {
  grid-column: 1/4;
}

#fhte-content {
  background: #372F34;
  padding: 20px;
}

.fhte__photo1 {
  background: url(img/moroder01.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 1/9;
  height: 30vw;
}

.fhte__photo2 {
  background: url(img/moroder02.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 1/9;
  height: 50vw;
}

.fhte__photo3 {
  background: url(img/moroder03.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 1/9;
  height: 40vw;
}

.fhte__photo4 {
  background: url(img/moroder04.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 1/5;
  height: 30vw;
}

.fhte__photo5 {
  background: url(img/moroder05.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 5/9;
  height: 30vw;
}

.fhte__photo6 {
  background: url(img/moroder06.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 1/9;
  height: 50vw;
}

/* -------------------------------------------------------------------------------- */
/* !  Media queries /
/* -------------------------------------------------------------------------------- */

@media (max-width: 444px) {

  #fhte-intro {
    height: 120vh;
  }

  #fhte-intro h1 {
    font-size: 20pt;
  }

  .fhte__text {
    grid-column: 1/9;
    margin-top: 10px;
  }

  .fhte__coveralbum {
    grid-column: 1/9;
    height: 300px;
  }

  .fhte__coveralbum:hover {
    background-size: 100%;
    grid-column: 1/9;
  }

  .fhte__composizione {
    grid-column: 1/9;
  }

  .fhte__font {
    grid-column: 1/9;
  }

  .fhte__color {
    grid-column: 1/9;
  }

}

@media screen and (min-width: 445px) and (max-width: 992px) {

  #fhte-intro {
    height: 100%;
  }

  .fhte__text {
    grid-column: 1/8;
    height: 70%;
  }

  .fhte__coveralbum {
    grid-column: 2/8;
    background-size: 100%;
    /* height: 30em; */
    aspect-ratio: 1/1;
  }

  .fhte__coveralbum:hover {
    background-size: 100%;
    grid-column: 2/8;
  }

  .fhte__composizione {
    grid-column: 1/7;
  }

  .fhte__color {
    grid-column: 5/9;
  }

}

@media (max-width: 992px) {

  #fhte-intro h1 {
    font-size: 5vw;
  }

  #fhte-intro h2 {
    font-size: 5vw;
  }

  #fhte-intro h3 {
    font-size: 4vw;
  }

  .fhte__coveralbum {
    background: none;
  }

  .fhte__coveralbum:hover {
    background: none;
  }

  .slider {
    display: flex;
    aspect-ratio: 1/1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
  }

  .slider img {
    flex: 1 0 100%;
    scroll-snap-align: start;
  }

}

@media (min-width: 993px) {

  .fhte__coveralbum {
    margin-top: auto;
    margin-bottom: auto;
    aspect-ratio: 1/1;
  }

  .slider {
    display: none;
  }

}











/* -------------------------------------------------------------------------------- */
/* ! DOMYOS SPRING page */
/* -------------------------------------------------------------------------------- */

#domyos-intro {
  background: url(img/sultavolino.257.jpg) no-repeat center;
  background-size: cover;
  padding: 20px;
  height: 100vh;
  z-index: 2;
}

.domyos__text {
  grid-column: 1/4;
  z-index: 2;
  margin-top: 10px;
}

#domyos-intro h1 {
  /* font-size: 25pt; */
  font-size: 3vw;
  color: blue;
}

#domyos-intro h2 {
  font-size: 3vw;
  color: blue;
}

#domyos-intro p {
  /* font-size: 1.5vw; */
  font-size: 16pt;
  margin-top: 30px;
  color: var(--dark);
}

.domyos__description {
  grid-column: 1/3;
}

.domyos__description p {
  margin-top: 20px;
  color: var(--light);
}

.domyos__photo1 {
  background: url(img/leggins.png) no-repeat center center;
  background-size: cover;
  grid-column: 4/7;
  height: 40vw;
}

.domyos__photo2 {
  background: url(img/esploso.png) no-repeat center center;
  background-size: cover;
  background-color: #EEF8FB;
  grid-column: 7/9;
  height: 40vw;
}

.domyos__photo4 {
  background: url(img/Foderato2.jpg) no-repeat center center;
  background-size: cover;
  background-color: #EEF8FB;
  grid-column: 5/7;
  height: 40vw;
}

.domyos__photo5 {
  background: url(img/Unosulaltro.256.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 1/5;
  height: 40vw;
}

.domyos__photo6 {
  background: url(img/dettagliodomyos.jpg) no-repeat center center;
  background-size: cover;
  background-color: #EEF8FB;
  grid-column: 7/9;
  height: 40vw;
}

.domyos__photo7 {
  background: url(img/insalotto.jpg) no-repeat center center;
  background-size: cover;
  background-color: #EEF8FB;
  grid-column: 1/9;
  height: 50vw;
}

#prespring {
  height: 90vh;
  background: trasparent;
  cursor: pointer;
}

#iddenfooter {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: url(img/paxxo.png) no-repeat center center;
  background-size: 40vh;
  z-index: -1;
}

@media (max-width: 992px) {
  #iddenfooter {
    position: fixed;
    height: 100vh;
    width: 100%;
    background: url(img/paxxo.png) no-repeat center center;
    background-size: 30vh;
    z-index: -1;
  }
}

@media (max-width: 444px) {

  #domyos-intro {
    background: white;
    height: 100%;
  }

  .domyos__text {
    grid-column: 1/9;
    margin-top: 10px;
  }

  /* .domyos__text h1 {
    inline-size: 200px;
    overflow-wrap: break-word;
  } */

  .domyos__idden {
    background: url(img/sultavolino.257.jpg) no-repeat center;
    background-size: cover;
    grid-column: 1/9;
    height: 200px;
  }

  .domyos__description {
    grid-column: 1/9;
  }

  .domyos__photo1,
  .domyos__photo2 {
    grid-column: 1/9;
    height: 100vw;
  }

  .domyos__photo5 {
    grid-column: 1/9;
    height: 60vw;
  }

  .domyos__photo4 {
    grid-column: 1/5;
  }

  .domyos__photo6 {
    grid-column: 5/9;
  }

}

@media (min-width: 444px) {

  .domyos__idden {
    display: none;
  }

}

@media screen and (min-width: 445px) and (max-width: 992px) {

  .domyos__text {
    grid-column: 1/7;
    z-index: 2;
    margin-top: 10px;
  }

  .domyos__description {
    grid-column: 1/7;
  }

  .domyos__photo1 {
    grid-column: 1/5;
  }

  .domyos__photo2 {
    grid-column: 5/9;
  }

}

@media (max-width: 444px) {

  #projects h1 {
    font-size: 6vw;
    inline-size: 210px;
    overflow-wrap: break-word;
  }

  #projects p {
    font-size: 4vw;
  }
}

@media (max-width: 992px) {

  #domyos-intro h1 {
    font-size: 5vw;
  }

  #domyos-intro h2 {
    /* font-size: 16pt; */
    font-size: 4vw;
  }
}




/* -------------------------------------------------------------------------------- */
/* ! KORG page */
/* -------------------------------------------------------------------------------- */

#korg-intro {
  background: url(img/korgintro.jpg) no-repeat center center;
  background-size: cover;
  padding: 20px;
  height: 100vh;
}

#korg-intro h1 {
  /* font-size: 25pt; */
  font-size: 3vw;
  color: yellow;
}

#korg-intro h3 {
  /* font-size: 16pt; */
  font-size: 2.5vw;
  margin-top: 20px;
  color: yellow;
}

#korg-video {
  background: var(--dark);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__player {
  /* position: absolute; */
  width: 60%;
  padding: 20px;
}

video {
  width: 100%;
}

video:focus {
  outline: none;
}

#korg-immages {
  background: var(--dark);
  padding: 20px;
  height: 100%;
}

#korg-immages p {
  color: var(--light);
  margin-top: 30px;
}

#frame1 {
  background: url(img/korg1.jpg) no-repeat center center;
  background-size: cover;
  height: 40vw;
  grid-column: 1/5;
}

#text1 {
  grid-column: 6/8;
  margin-top: auto;
  margin-bottom: auto;
}

#text2 {
  grid-column: 2/4;
  margin-top: auto;
  margin-bottom: auto;
}

#frame2 {
  background: url(img/korg2.jpg) no-repeat center center;
  background-size: cover;
  height: 40vw;
  grid-column: 5/9;
}

#frame3 {
  background: url(img/korg3.jpg) no-repeat center center;
  background-size: cover;
  height: 40vw;
  grid-column: 1/5;
}

#text3 {
  grid-column: 6/8;
  margin-top: auto;
  margin-bottom: auto;
}

#frame4 {
  background: url(img/korg4.jpg) no-repeat center center;
  background-size: cover;
  height: 50vw;
  grid-column: 1/9;
}

#iddentext1,
#iddentext3 {
  display: none;
}


@media (min-width: 445px) {

  .korg__idden {
    display: none;
  }

}


@media (max-width: 444px) {

  #korg-intro {
    background: var(--dark);
    height: 100%;
  }

  #korg-intro h1 {
    grid-column: 1/9;
  }

  .korg__idden {
    background: url(img/korgintro.jpg) no-repeat center;
    background-size: cover;
    grid-column: 1/9;
    height: 200px;
    z-index: 2;
  }

  .video__player {
    /* position: absolute; */
    width: 100%;
    padding: 20px;
  }

  #text1,
  #text3 {
    display: none;
  }

  #iddentext1,
  #text2,
  #iddentext3 {
    display: block;
    grid-column: 1/9;
  }

  #frame1,
  #frame2,
  #frame3 {
    grid-column: 2/8;
    height: 60vw;
  }

}


@media screen and (min-width: 445px) and (max-width: 992px) {

  #korg-intro {
    background: url(img/korgintro2.jpg) no-repeat center center;
    background-size: cover;
    padding: 20px;
    height: 80vh;
  }

  .video__player {
    width: 80%;
    padding: 20px;
  }

  #text1,
  #text3 {
    grid-column: 5/9;
  }

  #text2 {
    grid-column: 1/5;
  }

}

@media (max-width: 992px) {

  #korg-intro h1 {
    font-size: 5vw;
  }

  #korg-intro h3 {
    /* font-size: 16pt; */
    font-size: 4vw;
  }

  #korg-video {
    height: 100%;
  }
}














/* -------------------------------------------------------------------------------- */
/* ! MONARI FEDERZONI page */
/* -------------------------------------------------------------------------------- */

#apple-intro {
  background: url(img/appleback1.jpg) no-repeat center;
  background-size: cover;
  padding: 20px;
  height: 100vh;
}

.apple__text {
  grid-column: 1/4;
  z-index: 2;
  margin-top: 10px;
}

#apple-intro h1 {
  font-size: 3vw;
  color: #0000ff;
}

#apple-intro h2 {
  font-size: 3vw;
  color: blue;
}

#apple-intro h3 {
  font-size: 2.5vw;
  margin-top: 30px;
  color: blue;
}

#apple-intro p {
  /* font-size: 1.5vw; */
  font-size: 16pt;
  margin-top: 50px;
  color: var(--dark);
}

#apple-composition {
  padding: 20px;
  background: #fff2dd;
}

.apple__composizione {
  grid-column: 1/4;
}

.apple__composizione p {
  margin-top: 20px;
}

.apple__font {
  grid-column: 1/4;
}

.apple__font p {
  margin-top: 20px;
}

.fhte__box {
  margin-top: 20px;
}

.apple__red {
  background: rgb(182, 0, 0);
  padding: 10px;
}

.apple__yellow {
  background: rgb(255, 234, 0);
  padding: 10px;
}

.apple__brown {
  background: hsl(0, 100%, 17%);
  padding: 10px;
}

.apple__pink {
  background: hsl(0, 100%, 89%);
  padding: 10px;
}

.apple__illustration {
  grid-column: 1/4;
  height: 100%;
}

.apple__costruction {
  display: flex;
  margin-top: 20px;
}

.apple__lines {
  background: url(img/applecostr1.png) no-repeat center center;
  background-size: contain;
  height: 300px;
  width: 100%;
}

.apple__line {
  background: url(img/applecostr2.png) no-repeat center center;
  background-size: contain;
  height: 100px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.apple__ill {
  grid-column: 5/8;
  background: url(img/etichettaapleee.png) no-repeat center center;
  background-size: contain;
}

#apple-content {
  background: #372F34;
  padding: 20px;
}

.apple__photo1 {
  background: url(img/appledown.png) no-repeat center center;
  background-size: cover;
  grid-column: 1/5;
  height: 50vw;
}

.apple__photo2 {
  background: url(img/appleoneapple.jpg) no-repeat center center;
  background-size: cover;
  grid-column: 5/9;
  height: 50vw;
}

.apple__photo3 {
  background: url(img/appledettaglio.png) no-repeat center center;
  background-size: 50%;
  background-color: #fff2dd;
  grid-column: 1/9;
  height: 40vw;
}

.apple__phototext {
  grid-column: 1/3;
}

.apple__phototext p {
  margin-top: 20px;
  color: var(--light);
}

.apple-slider {
  grid-column: 1/9;
  display: flex;
  height: 100%;
}

.apple__photo4 {
  background: url(img/Acetovinobianco.png) no-repeat center center;
  background-size: cover;
  background-color: #fff2dd;
  grid-column: 3/5;
  height: 40vw;
}

.apple__photo5 {
  background: url(img/Acetovinoforte.png) no-repeat center center;
  background-size: cover;
  background-color: #fff2dd;
  grid-column: 5/7;
  height: 40vw;
}

.apple__photo6 {
  background: url(img/Acetopere.png) no-repeat center center;
  background-size: cover;
  background-color: #fff2dd;
  grid-column: 7/9;
  height: 40vw;
}

@media (max-width: 444px) {

  #apple-intro {
    background: #fff2dd;
    height: 100%;
  }

  .apple__text {
    grid-column: 1/9;
    margin-top: 10px;
  }

  .apple__idden {
    background: url(img/appleback1.jpg) no-repeat center;
    background-size: cover;
    grid-column: 1/9;
    height: 200px;
  }

  .apple__composizione {
    grid-column: 1/9;
  }

  .apple__font {
    grid-column: 1/9;
  }

  .apple__phototext {
    grid-column: 1/9;
  }

  .apple__illustration {
    grid-column: 1/9;
  }

  .apple__ill {
    grid-column: 1/9;
    aspect-ratio: 1/1;
  }

  .apple__photo1,
  .apple__photo2 {
    grid-column: 1/9;
    height: 100vw;
  }

  .apple__photo4,
  .apple__photo5,
  .apple__photo6 {
    display: none;
  }

  .apple__photo7 {
    background: url(img/Acetovinobianco.png) no-repeat center center;
    background-size: cover;
    background-color: #fff2dd;
  }

  .apple__photo8 {
    background: url(img/Acetovinoforte.png) no-repeat center center;
    background-size: cover;
    background-color: #fff2dd;
  }

  .apple__photo9 {
    background: url(img/Acetopere.png) no-repeat center center;
    background-size: cover;
    background-color: #fff2dd;
  }

  .apple-slider {
    display: flex;
    aspect-ratio: 1/1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
    background: #fff2dd;
  }

  .apple-slider img {
    flex: 1 0 100%;
    scroll-snap-align: start;
  }

}

@media (min-width: 444px) {

  .apple-slider {
    display: none;
  }

}

@media screen and (min-width: 445px) and (max-width: 992px) {

  .apple__text {
    grid-column: 1/7;
  }

  .apple__composizione {
    grid-column: 1/7;
  }
}

@media (max-width: 992px) {

  #apple-intro h1,
  #apple-intro h2 {
    font-size: 5vw;
  }

  #apple-intro h3 {
    /* font-size: 16pt; */
    font-size: 4vw;
  }
}