:root {
    --dark-grey: #212121;
    --green: #0F9D58;
    --red: #DB4437;
    --yellow: #F4B400;
    --blue: #4285F4;
}
.option_button{
    margin: 5px;
    position: relative;
    top:50%;
    left: 50%;
    background-color: var(--yellow);
    transform: translate(-50%, -50%);
    height: 100px;
    width: 300px;
    outline: none;
    border: none;
    color: var(--dark-grey);
    font-size: 24px;
    transition-duration: 0.2s;
    border-radius: 3000px;
}
.option_button:hover{
    background-color: var(--dark-grey);
    color: var(--yellow);
}
.option_button:focus{
    outline: none;
}
.select_button{
    margin: 5px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 300px;
    outline: none;
    border: none;
    color: var(--dark-grey);
    font-size: 24px;
    transition-duration: 0.2s;
}
.contain {
    position: absolute;
    height: 100%;
    width: 100%;
}

.titleText{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0%);
    font-size: 50px;
}
#file_code{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*Loading animation*/
#loader {
    transform-origin: center;
    position: absolute;
    visibility: hidden;
    border: 16px solid #00000033; /* Light grey */
    border-top: 16px solid var(--green); /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    top:calc(50% - 60px);
    left:calc(50% - 60px);
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/*Homescreen Btn*/
.toPageBtn{
    position: relative;
    top:50%;
    left:50%;
    height: 80px;
    width: 150px;
    transform: translate(-100%,-50%);
    background-color: var(--yellow);
    display: inline-block;
    transition-duration: 0.3s;
    color: var(--dark-grey);
    border-radius: 3000px;
    border: 3px solid var(--dark-grey);
    line-height: 80px;
    
}
.mainMenuBtn{
    position: absolute;
    bottom: 10px;
    left:50%;
    height: 50px;
    width: 100px;
    transform: translate(-50%,-50%);
    background-color: var(--yellow);
    border: none;
    border-radius: 3000px;
    transition-duration: 0.3s;
    color: var(--dark-grey);
    border-radius: 3000px;
    border: 3px solid var(--dark-grey);
    line-height: 50px;
}
.tagline{
    position: absolute;
    top: 55px;
    font-size: 80%;
    color: rgb(1, 89, 252);
    width: 100%;
    text-align: center;
}
.btnAnimated:hover,
.btnAnimated:focus {
  background-color: var(--dark-grey);
  color: white;
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
}
.mainMenuBtn{
    position: absolute;
    bottom: 10px;
    left:50%;
    height: 50px;
    width: 100px;
    transform: translate(-50%,-50%);
    background-color: var(--yellow);
    border: none;
    border-radius: 3000px;
    transition-duration: 0.3s;
    color: var(--dark-grey);
    border-radius: 3000px;
    border: 3px solid var(--dark-grey);
    line-height: 50px;
}
a{
    text-align: center;
    line-height: 50px;
}