*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  height: 100vh;
  width: 100vw;
  display:flex;
  justify-content: left;
  
}
body {
 background-color: rgba(26, 17, 7, 0.9);
 background-image: url("apollo17earthrise.jpg");
 background-size:100%;
 background-repeat: no-repeat;
 background-position: left top;
 background-attachment: fixed;
}
#titolo{
  position:relative;
  font-family:Rowdies; 
  float:left; 
  color: rgb(242, 254, 239); 
  font-size:clamp(1.8rem, 5vh, 4rem);
  text-shadow: 0 0 5px rgb(228, 238, 209); 
  padding: 1vh 0 0 2vw; 
}
#email{
  position:relative;
  font-family: monospace;
  float:right; 
  color: rgb(242, 254, 239); 
  font-size:clamp(0.8rem, 1rem, 5vh);
  text-shadow: 0 0 5px rgb(228, 238, 209); 
  padding: 1vh 3vw 0 0; 
}
.gatto{
  background: radial-gradient(rgba(118, 201, 167, 0.7),rgba(67, 137, 187, 0.4), rgba(103, 135, 193, 0.01));
 }
.gatto :hover{
  background: radial-gradient(rgba(250, 250, 67, 0.9),rgba(178, 246, 83, 0.572), rgba(103, 135, 193, 0.063));
  color: rgb(90, 90, 242);
}
.container{
  min-width: 550px;
}
.sec {
  display: grid;
  grid-template-columns: 60% 40%;
  column-gap: 50px;
  row-gap: 10px;
  padding: 25vh 100px 10px 10px;
  float:right;
}

/*parte del codice per togliere il blur sul cursore mouse*/
#blur-intorno {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  width: 200vw;
  height: 200vh;
  left: -100vw;
  top: -100vh;
  z-index: -1;/*FONDAMENTALE PER EFFETTO SFUOCATO PER SOLO LO SFONDO*/
  transform-origin: center;
  -webkit-backdrop-filter: blur(15px);
  background-color: rgba(53, 112, 213, 0.443);
  backdrop-filter: blur(15px);  /*qui è il blur */
}

@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-intorno {
    background-color: rgba(194, 237, 254, 0.8);
  }
}

.content p {
  font-size: clamp(2vh, 1.2rem, 3.5vh);/*blocca un valore medio all'interno 
  di un intervallo di valori tra un limite minimo definito e un limite massimo. 
  La funzione prende tre parametri: un valore minimo, un valore preferito 
  e un valore massimo consentito*/
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode'; 
  font-style: oblique;
  font-weight: 300;
  line-height: 1.6;
  padding-top: 40px;
  color: #fff;
  text-align: right;
  float: right;
  text-shadow: 3px 3px 3px #13113b;
  z-index: 0;
}

/* SLIDER */
.anno{
  position: absolute;
  color:white;
  padding:3vh 0 0 2vw;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(1rem,3rem,10vh);
  text-shadow: 0px 0px 12px rgb(255, 255, 255);
}

.cubo { /*parte superiore della slide*/
  position: relative;
  padding: 10px 30px 0 10px;
  width: clamp(300px, 30vw, 400px);
  height: clamp(250px, 45vh, 400px);
}

.swiper-slide {
  background: linear-gradient(150deg,rgba(174, 180, 177, 0.6)0%, rgba(62, 62, 62, 0.3)100%);
  position: relative;
  border: 1.5px solid rgba(46, 56, 57, 0.8);
  user-select: none;
  border-radius: 20px;
  backdrop-filter: blur(3px); 
  -webkit-backdrop-filter: blur(3px);
}

.tematica { /*bollino in alto a destra, tema*/
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(46, 46, 46, 0.88);
  border-radius: 5px;
  padding: 4px 5px;
  color: #fff;
  font-size:clamp(0.5rem, 2.2vh, 1rem);
}
.spiegaz h1 {
  padding:0;
  margin:0;
}
.spiegaz h1 a {
  font-size: clamp(0.7rem,2.5vh, 1.5rem);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding:.3em;
  margin:0px;
  background-color:  #86babad9;
  border: #c6c6c3 solid 0.5px;
  border-radius: 5px;
}
.spiegaz {
  position:absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content:start;
  width: 100%;
  height:70%;
  padding: 2px 10px;
  background: linear-gradient(140deg,rgba(185, 185, 185, 0.8)0%, rgba(109, 109, 109, 0.65)100%);
  border-top: 1.5px solid rgba(38, 38, 38, 0.9);
  color: #fff;
  border-radius: 0 0 20px 20px;
}

a:link, a:visited {
  color:rgba(38, 38, 38, 0.9);
  text-decoration: none; /*toglie  la sottolinatura e il colore tipico del link*/
  display: inline-block;
  padding:0;
  margin:0;
}
.spiegaz h1 a:hover, a:active {
  background-color:  #94f0f0ee;
  border: #f9fdbe solid 1.4px;
}
.spiegaz p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.8rem, 1vw,3vw);
  padding-top:2px;
  color:rgb(255, 251, 251);
}
.grande{
  font-size: 1.5em;
  font-weight: 300;
}

@media only screen and (orientation:portrait) {
  body{
  background-image: url("apollo17earthriseMob.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
 }
 #titolo{
  font-size: 2.4vh;
  padding: 1vh 0 0 2vw; 
 }
 #email{
  font-size:clamp(1.5rem, 2.5vw, 2.6rem);
  padding: 1vh 1vw 0 0; 
}
 .anno{
  font-size:clamp(5rem,10vw,8rem);
  padding:3vh 0 0 5vw;
 }
  .sec{
    display:flex;
    flex-direction: column;
    padding-top: 120px;
  }
  .cubo {
    grid-area: slider;
    height:40vh;
    width:80vw;
    padding-left: 15vw;
    height: clamp(220px, 35vh, 600px);
  }
  .swiper-slide {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px); 
  }
  .tematica{
    font-size: 2vh;
  }
 
  .spiegaz h1 a{
    font-size: clamp(1.8rem, 1.6vh,2.6rem) ;
    background-color:  #86babad9;
    border: #c6c6c3 solid 0.5px;
  }

  .spiegaz p{
      font-size: clamp(1.6rem, 1.6vh,2.6rem);
      padding:1vh 0 0 1vw;
    }
  
  .content {
    grid-area: content;
    text-align: center;
    padding-top:2vh;
  }
  .content p{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:clamp(2vh,1.2rem,3rem);
    padding:5px 10px 0 10px;
  }
  
}  

/*@media only screen and (max-width:768px) and (orientation:landscape) {
 
  .content p{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding:10px 0 0 20px;
  }
  .sec{
    display:flex;
    flex-direction: column;
    padding-top: 0;
  }
  .swiper-slide {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); 
  }
  #titolo{
      padding: 25px 0 0 25px; 
      font-size: 1.7vw;
   }
}