/* Weirdest thing I've ever seen */
/* I am documenting here so I can talk to a ta or something later */
/* The navbar is shifted to the right on the sign in page */
/* The header is the exact same on all the pages except for which link is active */
/* I have tried copying and pasting the header from the other pages to no avail */
/* I can fix it by chainging the body section below to be main */
/* that has its own issues. try it and see */
/* the odd thing is that commenting out the min-height doesn't fix it */
/* only moving the min-height from the body section to the main section fixes it */
/* I have no idea how to fix it */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    min-height: 50px;
}
  
.navbar-nav {
    margin-left: 3vw;
    margin-right: 3vw; 
}



.btn-primary {
    width: 100%;
}

.lock {
    text-align:center;
    padding:15px 0 20px;
    font-size:100px;
    color:#2980ef;
}


/* LOGIN FIELDS */

input {
    border: unset;
    background: unset;
    border-bottom: 2px solid #434a522c;
    /* border-bottom: 2px solid #1a73e838; */
    background: #fff;
    border-radius: 8px;
    /* border-radius: 2rem; */
    width: 100%;

    padding: 16px;
    margin-top: 20px;
    font-size: 17px;
}

label {
    all: unset;
    display: block;
    position: absolute;
    padding: 0 5px;
    width: auto;
    color: #5f6368;
    background: #fff;
    transition: all 150ms ease;
    transform: translate(12px, -41px);
    font-family: "Open Sans", Arial, sans-serif;
}

/* outlones text field blue when focused w/ no error */
input:focus:not(.error) {
    outline: none;
    padding: 15px;
    border: 2px solid #1a73e8;
}
/* moves label */
input:not(:placeholder-shown) + label, input:focus + label {
    transform: translate(8px, -68px);
    font-size: 13px;
    width: auto;
}
/* colors the label blue when no error */
input:focus:not(.error) + label {
    color: #1a73e8; 
}


/* LOGIN ERRORS */

input.error {
    background: rgba(#ee0404, 0.96);
    border-bottom: 2px solid #ee040450;
} 
input.error + label {
    background: rgba(#ee0404, 0.96);
    color: #ee0404;
    font-family: "Open Sans", Arial, sans-serif;
}
input:focus.error {
    outline: none;
    padding: 15px;
    border: 2px solid #ee0404;
}

.no-copy {
    user-select: none;
}

#missing-pass, #missing-name {
    font-size: 14px;
    color: #ee0404;
    max-height: 0;
    opacity: 0;
    padding: 0;
    transition: 150ms;
}

#missing-pass.show, #missing-name.show {
    margin-left: .5rem;
    max-height: 32px;
    opacity: 100%;
    padding: 8px 0 0 0;
    transition: 150ms;
}

.shake{
    animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes shake {
    /* 0% { margin-left: 0rem; }
    25% { margin-left: 0.5rem; }
    75% { margin-left: -0.5rem; }
    100% { margin-left: 0rem; } */
    0% { margin-left: 0.5rem; }
    25% { margin-left: 1rem; }
    75% { margin-left: 0rem; }
    100% { margin-left: .5rem; }
}




/* DarkMode */

.checkmark {
    display: none;
}
  
.active .checkmark {
    display: inline;
}
  
.invert {
    filter: invert(1);
}
  
.icon-opacity {
    opacity: 0.5;
}




/* experimental */