body{
    
}
h1{
    font-size: 45px !important;
}
h2{
  font-size: 25px !important;
}
#countdown-form{
    display: grid !important;
}
main{
    width: 100vw !important;
}

#countdown-form .name {
    height: 10% !important;
    width: 100% !important;
  }
  #countdown-form .name label{
    height: auto !important;
    position: relative !important;
  }
  #countdown-form .name input {
    position: relative !important;
    bottom: 18px !important;
    left: 0px !important;
    height: auto !important;
    padding: 10px 5px 0px;
    border: 0;
    border-bottom: 2px solid rgba(31, 202, 122, 0.26);
    background-color: transparent;
    transition: all 0.2s ease-out;
    font-size: 1.7em !important;
    color: #333;
    width: 100% !important;
  }
  #counting{
    display: none;
  }
  .result{
    font-size: 5em !important;
  }
  #countdown-form button {
    margin-top: 15px;
    width: 100%;
  }
  #eventName{
    width: 100%;
    font-size: x-large !important;
    margin-bottom: 35px;
  }
  #end{
    width: 50%;
  }
  .toggleContent {
    font-size: small;
    bottom: -30vh;
    position: relative;
  }
  .hidden-content {
    font-size: xx-small;
    padding: 20px;
  }
  main{
    margin-top: 10vh !important;  
  }
  .main{
    width: 100vw;
  }
#datetimepicker{
  width: 100%;
  padding: 8px;
}
.history{
  font-size:  medium;
}

.history b{
  font-size:  medium;
}

.content_history{
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)) !important;
}

#hidden-content p {
  font-size:  medium !important;
}

.hidden-content.visible{
  bottom: -30vh;
  position: relative;
}