/* ==========================================================================
   Base Rules
   ========================================================================== */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    font-size: 16px;
    font-family: "Nunito", sans-serif;
}

body {
    background: #fde2e2;
    transition: background-color 2s cubic-bezier(1, 1, 1, 1);
    transition-delay: 0s;
    font-family: 'Lora', serif;
}

html,
body {
    height: 100%;
    color: #faf4ff;
}

h1,
h2,
h3,
h4 {
    font-family: "Nunito", sans-serif;
}

a,
ul,
ol {
    text-decoration: none;
    font-family: "Lora";
    color: #faf4ff;
}


/* ==========================================================================
   Layout Rules
   ========================================================================== */

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#gameContainer {
    min-width: 630px;
    min-height: 460px;
    max-height: 85%;
    max-width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*filter: blur(8px); */
}


/* ==========================================================================
   Module Rules
   ========================================================================== */
.audio_controls {
    display: flex;
    width: 520px;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: .1;
    background-color: #faf4ff;
    color: #000;
}

.audio_controls:hover {
    opacity: .5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.16),
    0 8px 8px rgba(0, 0, 0, 0.20);
    transform: scale(1.01);
    transition: opacity .4s cubic-bezier(0, .6, .3, 0), scale 3s;
    opacity: 1;
}

.audio_controls_control {
    opacity: .6;
    font-size: 1.5rem;
    margin-right: 20px;
    cursor: pointer;
}

.audio_controls_text {
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 20px;

}

/* overlay
   ========================================================================== */
.overlay {
    display: flex;
    flex-direction: row;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(#ffa34d, #1eb2a6) no-repeat;
    /* background-color:  rgba(0,0,0,0.6); */
    opacity: .8;
    z-index: 1;
    cursor: pointer;
    /*display: none;*/
}

/* Canvas
   ========================================================================== */
canvas {
    background-color: #ffb6b6;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}

/* Nav
   ========================================================================== */

.nav {
    background: #f67575;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    width: 25%;
}

.nav > ul {
    text-align: center;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.nav > ul li {
    margin-bottom: 2.5rem;
}

.nav a {
    display: inline-block;
    padding: 5px;
    opacity: .8;
    transition: all .2s ease-out;
    cursor: pointer;
}

.nav a:hover {
    opacity: 1;
    font-size: 1.4rem;
}

/* ==========================================================================
      Score Board
      ========================================================================== */
.score-board {
    margin: 26vh auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.score-board > .title {
    background: rgba(255, 229, 229, .1);
    padding: 6px 60px;
    margin-bottom: 1rem;
    border-radius: 2px;
    letter-spacing: 3px;
    font-style: italic;
    text-decoration: underline;
    text-shadow: 1px 1px 1px #aacfcf,
    2px 2px 2px #1eb2a6;
}

.high-scores {
    display: flex;
    align-self: flex-start;
    flex-direction: column;
}

.high-scores ol {
    padding-left: 0;

}

.high-scores li {
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    margin-left: 35px;
    color: #f4eeff;

}


/* ==========================================================================
   State Rules
   ========================================================================== */
@keyframes grow {
    from {
        visibility: hidden;
        opacity: 0;
        transform: scale(0);
    }
    to {
        visibility: visible;
        opacity: .8;
        transform: scale(1);
    }
}

@keyframes shrink {
    from {
        visibility: visible;
        opacity: .8;
        transform: scale(1);
    }
    to {
        visibility: hidden;
        opacity: 0;
        transform: scale(0);
    }
}