@font-face {
  font-family: "Hershey Futuram";
  src: url("fonts/Hershey-Noailles-futuram.ttf");
}

@font-face {
  font-family: "Hershey Times";
  src: url("fonts/Hershey-Noailles-times.ttf");
}

@font-face {
  font-family: "Weather";
  src: url("fonts/weather.ttf");
}

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


/* @font-face {
  font-family: "Hershey Times";
  src: url("https://backend.sheepdog.work/storage/v1/object/public/assets/6a50fa2a-3514-41f5-a3a6-18662faf4ae8/SGVyc2hleS1Ob2FpbGxlcy10aW1lc2wtMS0xLnR0Zg==");
} */



/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */
/* ———————————— THIS IS THE CSS FOR THE GLYPH PROJ ———————————— */

.white {
  background-color: white;
  background-image: none !important;
  mix-blend-mode: normal;
  opacity: 1 !important;
  transition: 3s opacity ease;
}

#caption {
  font-size: 16px;
  position: absolute;
  bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
}

#glyph-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -200px;
  /* top: 0; */
}

#glyph {
  font-family: "WeatherRotated", wingdings, dingbats;
  /* transform: rotateZ(90deg); */
  font-size: 800px;
  text-align: center;
  -webkit-text-stroke: 1px white;

  /* -webkit-text-stroke: 6px white; */
  color: transparent;
}

/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR INDEX HTML ———————————— */

#form {
  margin: auto;
  margin-top: 60px;
  text-align: center;
  width: 300px;
  display: flex;
  flex-flow: column wrap;
  text-transform: lowercase;
  font-family: "Hershey Futuram", sans-serif;

}

#instruction {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;


}


#input {
  border: 1px dotted white;
  background: black;
  height: 150px;
  width: 100%;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-family: "Hershey Futuram", sans-serif;
  transition: 0.5s ease all;
}

#input:focus {
  outline: none;
  box-shadow: 0 0 10px white;
  transition: 0.5s ease all;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 0px white;

  }

  to {
    box-shadow: 0 0 10px white;

  }

}

#submit {
  background: white;
  color: black;
  border: transparent;
  border-radius: 50%;
  padding: 15px;
  margin-top: 20px;
  width: 100%;
  font-family: "Hershey Futuram", sans-serif;
}

#submit:hover {
  border-radius: 50%;

}

/* ———————————— THIS IS THE CSS FOR ANSWERS HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR ANSWERS HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR ANSWERS HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR ANSWERS HTML ———————————— */

#answer {
  margin: 50px;
  font-size: 50px;
  width: 80%;
  text-transform: capitalize;

  font-family: "Hershey Times", serif;


}

#answer,
#symbol {
  color: hsl(0, 0%, 100%);
  text-align: center;
  user-select: none;



}



#symbol {
  font-family: "Weather", "wingdings";
  text-align: center;
  font-size: 80px;
  color: transparent;
  width: 100%;

  -webkit-text-stroke: 1px white;


  height: 60px;
  margin-top: -60px;

}

iframe {
  height: 110%;
  width: 110%;
  position: absolute;
  top: -40%;
  left: -30%;
  transform: scale(3.5);
  transform-origin: 0 0;
  opacity: 0.7;
  z-index: -1;
  transition: 0.2s all ease;
  transition-delay: 0s;

}




@keyframes blur {
  from {
    filter: blur(0.5px);
  }

  to {
    filter: blur(1px);
  }
}


/* ———————————— THIS IS THE CSS FOR PROJECTION HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML ———————————— */


#day-info {
  position: absolute;
  z-index: 1002;
  user-select: none;

  margin: 20px;
}

#next-day,
#tomorrow {
  background: #444;
  color: white;
  font-size: 10px;
  letter-spacing: 1px;
  /* border-radius: 4px; */
  outline: none !important;
  padding: 4px;
  border: transparent;
  font-family: 'Hershey Times';
  /* border-bottom: 1px solid white; */

}


#cloud-container {
  font-size: 30px;
  font-family: "Hershey Futuram", sans-serif;
  line-height: 60px;
  text-transform: lowercase;
  width: 150%;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  margin: 20px;
  color: #222;
  justify-content: left;
}


.symbol {
  font-family: "Weather";
  line-height: 60px;
  font-size: 40px;
  color: gray;
  padding-left: 40px;



}

.word {
  width: auto;
  padding-right: 40px;
  margin: 0px 0px;
  transition: 0.5s ease all;



}

.word:hover {
  margin: 0px 10px;
  transition: 0.5s ease all;
}

.cold,
.warm,
.hot,
.temperate,
.cold {
  transition: 1s ease all;

}

.cold {
  letter-spacing: -1;
  font-size: 9px;

}

.cool {
  letter-spacing: -0.5;
  font-size: 11px;


}

.temperate {
  letter-spacing: 0;
  font-size: 12.5px;


}

.warm {
  /* background: linear-gradient(to bottom,
      #000 40%,
      rgb(36, 36, 36) 100%); */
  letter-spacing: 1;
  font-size: 14px;


}

.hot {
  letter-spacing: 2;
  font-size: 18px;




}

.partly-cloudy {
  background-image: url('partlycloudy.png');
  opacity: 0.4;

}


.rainy {
  background-image: url('rainy.jpg');
  opacity: 0.25;

}

.sunny {
  background-image: url('sunny.jpg');

  opacity: 0.4;

}

.cloudy {
  background-image: url('cloudy.jpg');
  opacity: 0.25;

}

.cloudy,
.sunny,
.rainy,
.partly-cloudy {
  transition: background-image 2s ease;

}

#filter {
  width: 100%;
  height: 100%;
  background-size: cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1003;
  mix-blend-mode: screen;
  /* border-radius: 20px; */
  transition: background-image 2s ease, opacity 0.5s ease;



}


/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */
/* ———————————— THIS IS THE CSS FOR PROJECTION HTML (AND MOST THINGS) ———————————— */

body {
  background: black;
  margin: 0px;
  font-family: "Hershey Futuram", sans-serif;
  font-size: 14px;
  color: white;
  overflow: hidden;
  transition: 0.5s filter ease, 1s opacity ease;
  user-select: none;
  opacity: 1;



}

#outline {
  width: 99.5%;
  height: 99%;
  /* margin: 2% 2.5%; */
  position: absolute;
  border-radius: 50%;
  border: 2px dotted #777;
  overflow: hidden;
  transition: 1s box-shadow 1s ease-in;
  box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.3);


}

.shadow {
  transition: 0.25s box-shadow ease;
  transition-delay: 0s;


}

.hide {
  opacity: 0 !important;
  filter: blur(20px) !important;
  transition: 0.75s opacity 2s ease-in, 1s filter ease-in;



}

#sky {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;

  transition: 1s all 1.5s ease;
  filter: blur(1px);
  opacity: 1;

  user-select: none;
  pointer-events: none;


}



#answer-panel {
  width: 100%;
  height: 100%;
  background: transparent;
  margin: auto;
  text-align: center;
  display: flex;
  align-self: center;
  overflow: hidden;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 1px dotted #222;
  z-index: 1;

  filter: blur(0.5px);
  animation: blur 10s ease-in-out infinite alternate;

  opacity: 1;
  transition: 1s opacity 2.5s ease-in, 1.5s filter 2.5s ease-in;


}



#weather-info {
  position: absolute;
  margin-top: 20px;
  line-height: 1.2rem;
  z-index: 10;
  color: white;
  font-size: 12px;
  pointer-events: none;

}

#ask,
#download-btn {
  position: absolute;
  font-family: 'Hershey Times';
  letter-spacing: 1px;
  bottom: 20px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  /* border-radius: 4px; */
  /* border: 1px dotted white; */
  /* background: black; */
  color: white;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

}

#ask {
  right: 20px;

}

#ask:hover,
#tomorrow:hover,
#next-day:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.5s ease;

}

#ask,
#tomorrow,
#next-day {
  transition: background 0.5s ease;

}

#download-btn {
  left: 20px;
  width: auto;
  opacity: 0;
  transition: 1s opacity ease;


}

/* span {
  color: green;
} */

.question {
  font-family: "Hershey Futuram", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  /* font-size: 14px; */
  color: white;
  padding: 20px;
  position: absolute;
  z-index: 1001;
  text-align: center;
  white-space-collapse: collapse;
  white-space: nowrap;
  /* letter-spacing: 0; */
  user-select: none;

  cursor: pointer;
  transition: letter-spacing 0.5s ease, opacity 1s ease;


}

.question:hover {
  letter-spacing: 1.5;
  cursor: grab;

}

s #questions-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}


@keyframes blow {
  0% {
    transform: skew(0deg, 0deg) translate(0px, 0px);
  }

  50% {
    transform: skew(5deg, 0deg) translate(var(--windX, 0px), var(--windY, 0px));
  }

}