/* google fonts */

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Establishing styles */

body{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    background-color: #000009;
    height:100vh;
    margin:0;
}

img{
    aspect-ratio: 1/1;
    image-rendering:pixelated;
}

.skip-box{
	display:flex;
	align-items:center;
	justify-content:flex-end;
    position:absolute;
    bottom:0;
    right:0;
    width:30%;
    height:4%;
    font-size:14px;
    color:white;
}


/* Pre click */

a.main{
    width:20%;
    aspect-ratio: 1/1;
}

section{
    display:flex;
    width:100%;
    height:calc(100%/3);
}

section.centered{
    justify-content: center;
}

section.split{
    justify-content: space-between;
}



/* Post click */

div.heart-container{
    display:flex;
    width:38%;
    height:20%;
    justify-content: space-evenly;
    align-items: center;
}

img.header-img{
    height:6vw;
}


main{
    display:flex;
    align-items: center;
    justify-content: center;
    border:1px solid white;
    
}

div.content{
    display:flex;
    flex-direction: column;
    align-items:center;
    width:90%;
    height:90%;
    overflow: hidden;
    color:white;
}

h1{
    margin:0;
    white-space: nowrap;
    font-family:sans-serif;
}

div#underline{
    width:90%;
    height:0;
    border:1px solid white;
    margin:3px;
}

div#session{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:85%;
    height:70%;
}

section.timer{
    overflow:hidden;
    white-space:nowrap;
    justify-content:center;
    flex-direction:column;
    width:48%;
    font-size:1.4vw;
}

section.left{
    align-items: flex-start;
}
section.right{
    align-items: flex-end;
}

#anim-skip{
    height:20vw;
    width: 40%;
}

/* admin styling */

form#login-form{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width:90%;
    height:70%;
}

input.admin-inputs{
    background-color:#000022;
    border: 2px solid #000046;
    height:20%;
    width:50%;
    text-align:center;
    color:white;
}

input.admin-inputs::placeholder{
    text-align:center;
    color:gray;
}

button{
    height:15%;
    width:30%;
}

#err-msg{
    font-size:13px;
    color:#d6d6d6;
}

/* ANIMATIONS: */
/* animation classes */

#intro-expand {
    animation: expand 2s ease-in-out forwards;
}

.fade-in {
    filter:brightness(0);
    opacity:0;
    animation: brightenAnimation 1.25s ease-in-out 2s forwards;
}

.fade-in-short{
    filter:brightness(0);
    opacity:0;
    animation:brightenAnimation 1.25s ease-in-out 0s forwards;
}

.brighten {
    filter: brightness(0);
    animation: brightenAnimation 1.25s ease-in-out 1s forwards;
}

.fade {
    filter:brightness(1.75);
    opacity:1;
    animation: fadeAnimation 1s ease-in-out 0s forwards;
}
/* animation keyframes */

@keyframes expand {
    0% {
        height: 0;
        width: 0;
    }
    70% {
        height: 20vw;
        width: 0;
        
    }
    100% {
        height:20vw;
        width: 40%;
    }
}

@keyframes brightenAnimation {
    from {
        filter: brightness(0);
    }
    to {
        filter: brightness(1.75);
        opacity:1;
    }
}

@keyframes fadeAnimation{
    from {
        filter: brightness(1.75);
        opacity:1;
    }
    to {
        filter: brightness(0);
        opacity:0;
    }
}

/* media queries and adjustments for mobile support */


@media only screen and (max-width:800px){
	html, body{
        height:100%;
	}
	
    a.main{
        width:90%;
    }

    @keyframes expand {
        0% {
            height: 0;
            width: 0;
        }
        75% {
            height: 70vw;
            width: 0;
        }
        100% {
            height: 70vw;
            width: 80%;
        }
    }
    
	#anim-skip{
	 	height: 70vw;
        width: 80%;
	}
	
    div.heart-container{
        width:85%;
        height:12%
    }

    img.header-img{
        height:65%;
    }
    
    section.timer{
        overflow:hidden;
        white-space:nowrap;
        justify-content:center;
        flex-direction:column;
        width:100%;
        font-size:110%;
    }

    div#session{
        flex-direction:column;
        justify-content: center;
    }
    section.left{
        align-items: center;
    }
    section.right{
        align-items: center;
        justify-content:flex-end;
    }
}

@media only screen and (min-width:1450px){
    h1{
        font-size:3em;
    }

    div.heart-container{
        margin-bottom:2em;
    }
}