@font-face {
  font-family: 'Inter'; /*a name to be used later*/
  src: url('/fonts/Inter-ExtraBold.woff2') format('woff2'),
       url('/fonts/Inter-ExtraBold.woff') format('woff'),
       url('/fonts/Inter-ExtraBold.ttf') format('truetype');
}
@keyframes all {
  from {
    opacity: 0;
    scale: 0.2; 
  }
  to {
    opacity: 1;
    scale: 1; 
  }
}
* {
    background-color: rgb(255, 255, 255);
    font-size: 102%;
    text-align: center;
    font-family: 'Inter';
    border-radius: 10px;
    animation-name: all;
    animation-duration: 1s;
}
h1 {
    background-color: #dcdcdc;
    color: #34113f;
    font-weight: 900;
    font-size: 180%;
    margin-right: 50px;
    margin-left: 50px;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
h2 {
    background-color: #dcdcdc;
    color: #34113f;
    font-weight: 900;
    font-size: 180%;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 0;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
input[type="file"] {
    display: none;
  }
  #import {
    border: none;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    color: white;
    background-color: #0097e6;
    transition: 0.25s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  #import:hover {
    background-color: #192a56;
    color: white;
  }
  #export {
    background-color: #8c7ae6;
    border: none;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    color:white;
    font-weight: 900;
    transition: 0.25s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  #export:hover {
    background-color: #192a56;
    color: white;
  }
  label {
    color:black;
    font-weight: 900;
}
#info {
  font-weight: 900;
  font-size: 150%;
  color:#34113f;
  background-color: white;
}
#start{
    padding: 7px 12px;
    background-color: #4cd137;
    color: white;
    font-weight: 900;
    transition: 0.25s;
    border: none;
    cursor: pointer;
    font-size: 250%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#start:hover {
    background-color: #192a56;
    color: white;
}
#words{
    padding: 7px 12px;
    background-color: #487eb0;
    color: white;
    font-weight: 900;
    transition: 0.25s;
    border: none;
    cursor: pointer;
    font-size: 250%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#words:hover {
  background-color: #192a56;
  color: white;
}
#about{
  padding: 7px 12px;
  background-color: #626e88;
  color: white;
  font-weight: 900;
  transition: 0.25s;
  border: none;
  cursor: pointer;
  font-size: 220%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#about:hover {
    background-color: #192a56;
    color: white;
}
#reset{
  background-color:#e84118;
  border: none;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  color:white;
  font-weight: 900;
  transition: 0.25s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#reset:hover {
  background-color: #192a56;
  color: white;
}
.formPopup {
  width: 80%;
  height: 50%;
  margin: 0 auto;
  display: none;
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translate(-50%, 5%);
  z-index: 15;
  font-size: 100%;
  overflow-y: scroll; 
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.formContainer {
  padding: 20px;
  background-color: rgba(58, 63, 78, 0);
}
.formContainer .cancel {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  cursor: pointer;
  background-color: #e84118;
  font-weight: 900;
  font-size: 175%;
  color: white;
  transition: 0.25s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.formContainer .cancel:hover {
  background-color: #192a56;
  color: white;
}
.overlay {
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  display:none;
  background-color:#000;
  opacity:0.5;
  z-index: 5;
  animation-name: none;
}