@font-face {
  font-family: Ravioli;
  src: url(fonts/Ravioli-Regular.otf);
}

@font-face {
  font-family: Reporter;
  src: url(fonts/ReporterLTStd-2.otf);
}

@font-face {
  font-family: Santo;
  src: url(fonts/santo.ttf);
}

@font-face {
  font-family: Nail;
  src: url(fonts/NailSalon-Regular.otf);
}

::selection {
  color: yellow;
  background: red;
}

html {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  overflow-x: hidden;
  line-height: 1;
  scroll-behavior: smooth;
}

body {
	background: linear-gradient(-52deg, #ee7752, #ffff00, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 6s ease infinite;
    font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  overflow-x: hidden;
  line-height: 1;
  scroll-behavior: smooth;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}






.img{
  width: 25%;
}

#ad {
    color: green;
    margin-top: 0.25rem;
    font-size: 2rem;
    font-family: Reporter;
  }

.list {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: max-content;
}

.blurred {
  filter: blur(9.5px);
}

.blurred2 {
  filter: blur(5px);
}


span:hover {
  background-color: white;
}


.mother {
  padding: 1.5rem;
  gap: 3rem;
  overflow-x: hidden;
}

.programma {
  gap: 50px;
}

.titolo {
  margin-bottom: 1.5em;
}

#directions {
    width: 20%;
    position: fixed;
    bottom: 10px;
    right: -20px;
}

#directions:hover {
  width: 25%;
transition: .4s linear;
bottom: -5px;
}

.description{
  font-size: 1em;
  font-family: Santo;
}

.ast{
    color: green;
    margin-top: 0.25rem;
    font-size: 2rem;
    font-family: Reporter;
}

a {
  color: blue !important;
}

.info {
  margin-top: 100px;
  line-height: 1.2em;
  padding: 35px;
  font-family: monospace;
  color: red;
  font-size: 0.3em;
  width: 70%;
  border: blue dotted 10px;
}

.testo {
  margin-top: 5em;
  line-height: 1.2em;
  font-family: monospace;
  color: black;
  font-size: 0.3em;
    width: 50%;
}

.testo2 {
  margin-top: 1em;
  line-height: 1.2em;
  font-family: monospace;
  color: black;
  font-size: 0.3em;
    width: 50%;
}

.legenda {
  font-family: Reporter;
  text-align: left;
  position: fixed;
  margin-top: 25px;
  margin-bottom: 25px;
  top: 1rem;
  right: 2rem;
  padding: 1em;
  line-height: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.4em;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 101010;
    border: dotted 3px black;
    rotate: 10deg;
  /* animation: soup;
animation-timing-function:ease-in-out;
animation-duration: 6s;
animation-iteration-count:infinite; */
}

.legenda2 {
  text-align: left;
  top: 1rem;
  line-height: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.4em;
}

.legenda:hover {
  scale: .5;
  transition: .4s linear;
  }

/* @keyframes soup {
0% {
transform: rotate(0);
} 50%{
transform: rotate(720deg);
} 100% {
transform: rotate(0);
}
} */


.changeLang{
  font-size: 1rem;
}
  .header{
    gap: 2rem;
    display: flex;
    align-items: baseline;
    padding: 1.5rem 0 0 1.5rem ;
  }

  .habitat{
    width: 1.5rem;
    display: block;
  }

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

@media only screen and (max-width: 1000px) {
  body {
    font-size: 1.2rem;
    line-height: 1;
  }
  .mother {
    padding: 0.5rem;
  }

  #ad {
    color: green;
    margin-top: 0.2rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: Reporter;
  }
  
  .info {
    margin-top: 100px;
    line-height: 1.5em;
    padding: 35px;
    font-family: monospace;
    color: red;
    font-size: 0.35em;
    width: 70%;
    border: blue dotted 10px;
    width: 70%;
  }

  


  .programma {
    gap: 30px;
  }




.legenda{right: 30px; top: 10%}

.testo{
  width: 90%;
  font-size: .35em;
}

.header{
  gap:
  0em;
      padding:
  1rem 0 0 .5rem;
}

}