:root{
    --mainColor: #f2efed;
    --bgColor: #1c1b1d;
    --accentColor: #deaf9d;
    --highlightColor: #4e3e3e;
    --errColor: #bf616a;
    --altBgColor:#262223;

    --mainFont: 'Inter', sans-serif;
    --secondFont: 'Roboto Mono', monospace;
}

.hideClass{
    display:none;
}
/* hiding init forms | init -> standby animation */
.transitionEvent0{
    animation: transitionEvent0;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.transitionEvent0Rev{
    animation: transitionEvent0;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-direction: reverse;
}


@keyframes transitionEvent0 {
    0% {
        opacity: 100%;
    }
    100%{
        opacity: 0%;
    }
}

/* moving bar | init -> standby animation */

.transitionEvent1{
    animation: transitionEvent1;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
}

@keyframes transitionEvent1 {
    0% {
        transform: translateY(0vh)
    }
    100%{
        transform: translateY(60vh)
    }
}

/* standby animation | blinking text */

.standbyAnim{
    animation: standbyAnim;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

@keyframes standbyAnim {

    0%{
        opacity: 100%;
    }
    50%{
        opacity: 55%;
    }
    100%{
        opacity: 100%;
    }
    
}

/* flash animation | notify user of state change */

.flashAnim{
    animation: flashAnim;
    animation-duration: 0.2s;
    animation-direction: forwards;
}

@keyframes flashAnim {
    
    0%{
        opacity: 100%;
    }
    100%{
        opacity: 0%;
    }

}

/* click animation | notify user of box click */

.clickAnim{
    animation: clickAnim;
    animation-duration: 0.2s;
    animation-direction: forwards;
}

@keyframes clickAnim{
    0%{
        background-color: var(--accentColor);
    }
    100%{
        background-color: var(--highlightColor);
    }
}

/* switch animation | end screen */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input {display:none;}
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--highlightColor);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--mainColor);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--accentColor);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--accentColor);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;}
    
/* notes ok i pull up to the afterparty | main page */
    .notesAnim{
        animation: notesAnim;
        animation-duration: 0.15s;
        animation-fill-mode: forwards;
    }

    @keyframes notesAnim {
    
        0%{
            height: 45vh;
            width: 45vw;
        }
        100%{
            height: 50vh;
            width: 50vw;
        }
    
    }

    .notesPageAnim{
        animation: notesPageAnim;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }

    @keyframes notesPageAnim {
    
        0%{
            transform: translateY(0vh);
            opacity: 0%;
        }
        1%{
            transform: translateY(-100vh);
            opacity: 1%;
        }
        100%{
            opacity: 100%;
            transform: translateY(-100vh);
        }
    
    }
    .notesPageAnimR{
    animation: notesPageAnimR;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    }

    @keyframes notesPageAnimR {
    
    0%{
        
        opacity: 100%;
        transform: translateY(-100vh);
    }
    99%{
        transform: translateY(-100vh);
        opacity: 1%;
    }
    100%{
        transform: translateY(0vh);
        opacity: 0%;
    }
}

.notesAnimR{
    animation: notesAnimR;
    animation-duration: 0.15s;
    animation-fill-mode: forwards;
}

@keyframes notesAnimR {

    
    0%{
        height: 50vh;
        width: 50vw;
    }
    100%{
        height: 45vh;
        width: 45vw;
    }

}
/* The Modal Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}