@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');

*{
  padding: 0;
  margin: 0;
      box-sizing: border-box;
}

body {
    background: linear-gradient(0.75turn, #2e2e2e, #797c83, black);
    overflow-y: hidden;
    font-family: 'Comfortaa', cursive;
}

main{ 
  width: 1280px;
  margin: auto;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

::-webkit-input-placeholder {
   font-style: italic;
}
:-moz-placeholder {
   font-style: italic;  
}
::-moz-placeholder {
   font-style: italic;  
}
:-ms-input-placeholder {  
   font-style: italic; 
}

#weather-img{width: 200px;}

#weather-img img{width: 100%;}

#weather-details{
  display: flex;
  justify-content: space-between;
  width: fit-content;
  color: white;
  user-select: none;
}

#weather-details h1{
  font-size: 4rem;
  padding: 0 10px;
}

#weather-details p{
  display: none;
  color: white;
}

#img{opacity: 0;}

#degrees{opacity: 0;}

#bar{
  display: block;
  opacity: 0;
  color: rgba(255, 255, 255, 0.6);
}

#city-name{opacity: 0;}

#description{opacity: 0;}

#toggle {
    position: absolute;
    top: 14px;
    border: 1px solid lightgray;
    padding: 7px;
    cursor: pointer;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: lightgray;
    left: 14px;
}

#slider {
    position: absolute;
    width: 375px;
    height: 38vh;
    color: white;
    background: rgb(64 101 126);
    text-align: center;
    padding-top: 25px;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    display: flex;
    flex-direction: column;
    gap: 29px;
    padding: 30px 20px;
    top: 70px;
    border-radius: 10px;
}

section {
    position: absolute;
    top: 527px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#slider input, #slider select, #slider option{
  padding: 8px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid white;
  outline: none;
}

#slider select, #slider option{
   font-style: italic;
 }

#slider button{
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  color: #66c2ff;
  background-color: white;
  transition: 0.3s ease-out;
  outline: none;
}

#slider button:hover{
  background-color: black;
}

#slider h3{font-size: 1.2rem;}

.slide-in {
  -webkit-animation: slide-in 0.5s forwards;
  animation: slide-in 0.5s forwards; 
}

.slide-out {
  -webkit-animation: slide-out 0.5s forwards;
  animation: slide-out 0.5s forwards;  
}
    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

/* @-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
} */
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

/* @-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
} */

.animatee {
  opacity: 1 !important;
  transition: opacity 1.6s ease 0s;
}

@media(max-width:1280px){
  main{ width: 95%; }
}

@media(max-width: 768px){
  main{
    text-align: center;
    flex-direction: column;
  }

  #weather-img{height: 150px;}

  #weather-details{
    width: 100%;
    flex-direction: column;
    margin-top: 5px;
  }

  #weather-details h1{
    font-size: 7.5vw;
    margin: 5px;
  }

  #weather-details p{
    display: block;
    margin: 8px;
  }

  #bar{display: none;}

}

@media(max-width:480px){
  #slider {width: 300px;}

  #slider h3{font-size: 1rem;}
}

@media(max-width:320px){
  #slider {width: 225px;}

  #slider h3{font-size: 1rem;}
}