* {
    margin: 0; 
    padding: 0;
    min-width: 0; 
    min-height: 0; 
    /* font-family: Arial, Helvetica, sans-serif;  */
    font-family: monospace; 
    font-size: 1.1vw; 
    color: var(--blue2); 
    box-sizing: border-box !important; 
}

:root {
    --yellow1: #f7db20; 
    --yellow2: #fffdf4; 
    --blue1: #3a53b2; 
    --blue2: #233370; 
    --blue3: #60779c; 
}

/* GENERAL */

body {
    width: 100%; 
    height: 100%; 
}

.web-login {
    width: 100%; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.web-login > div {
    display: block; 
    /* border: 1px solid red;  */
    width: 20%; 
    overflow: none; 
}

.web-login > div > form {
    width: 100%; 
    padding: 5%; 
    border: 1px solid var(--blue2); 
}

.web-login > div > p {
    text-align: center; 
    margin-bottom: 20%; 
}

.web-login > div > form > input {
    outline: none; 
    width: 100%; 
    margin-bottom: 5%; 
}

.error-message {
    display: flex; 
    justify-content: center; 
    width: 100%; 
    padding-top: 2%; 
    padding-bottom: 2%; 
    background-color: var(--blue3); 
}

.error-message > p, .error-message > p > strong {
    color: white; 
}

/* HEADER */
header {
    width: 100%; 
    height: 6vw;  
    display: flex; 
    align-items: end; 
    justify-content: flex-end; 
    background-color: #f7db20; 
}

header > img {
    position: absolute; 
    left: 2%;  
    margin-bottom: 0.5%; 
    width: 12%; 
}

.header-triangle {
    width: 3vw; 
    height: 3vw; 
    border: none; 
    background-color: #3a53b2;
    background-image: -webkit-linear-gradient(-45deg, #f7db20 50%, #3a53b2 50%);
    /* border: 1px solid red;  */
}

/* NOTE: search form can have vw measurements because it 
won't show up on mobile */

header > form {
    position: relative; 
    /* align-items: top;  */
    width: 20vw; 
    height: 3vw; 
    padding-left: 1vw; 
    background-color: #3a53b2; 
}

header > form > input {
    position: absolute; 
    bottom: 0; 
    outline: none; 
    width: 13vw; 
    height: 1.7vw; 
}

header > form > a {
    position: absolute; 
    bottom: 0; 
    left: 15vw; 
    display: inline-block; 
    width: 1.7vw; 
    height: 1.7vw; 
}

header > form > a > img {
    display: block; 
    width: 100%; 
}

/* NAV  */
nav {
    display: block;  
    align-items: center; 
    width: 100%; 
    padding-left: 3%; 
    padding-top: 0.7%; 
    padding-bottom: 0.7%; 
    background-color: #3a53b2; 
}

nav > ul { 
    width: 100%; 
    display: block; 
}

nav > ul > li {
    display: inline-block; 
    margin-right: 0.7%; 
    margin-left: 0.7%; 
}

nav > ul > li > a {
    display: block; 
    color: white; 
    text-decoration: none; 
    font-family: monospace; 
    font-size: 1.2vw; 
    font-weight: bold; 
}

nav > ul > li > a:hover {
    text-decoration: underline; 
}

/* FOOTER */
footer {
    width: 100%; 
    padding: 1.5%; 
    background-color: var(--blue1); 
    color: white; 
}

footer * {
    color: white; 
}

footer #icons, footer #icons a {
    font-size: 1vw; 
}

#bug-form {
    margin-bottom: 1.5%;
}

#bug-form > p {
    margin-bottom: 1.5%; 
}

#bug-form form {
    display: flex; 
    align-items: flex-end; 
}

#bug-form > form > div {
    display: inline-block; 
    margin-right: 2%; 
}

#bug-form > form > div.bug-msg {
    width: 40%; 
}

#bug-form textarea {
    width: 100%; 
    color: var(--blue3); 
    padding: 1%; 
}

#bug-form input {
    color: var(--blue3); 
}

#bug-form label {
    margin-bottom: 1%; 
}

#bug-form label, #bug-form input, #bug-form textarea {
    display: block; 
    outline: none; 
}

#bug-form button {
    background-color: var(--blue2); 
    padding-right: 1.5%; 
    padding-left: 1.5%; 
    padding-top: 0.7%; 
    padding-bottom: 0.7%; 
    color: white; 
    border: none; 
}

#bug-form button:hover {
    background-color: var(--yellow1);  
    color: black; 
}

/* PAGE  */
.content, .left-bar, .right-bar {
    display: inline-block; 
}

.full-page {
    display: flex; 
    justify-content: center;
}

.content {
    width: 75%;
}

.upper-content {
    display: block; 
    padding-top: 1%; 
    padding-bottom: 1%; 
}

.splash {
    width: 100%; 
    text-align: center; 
}

.splash > a:link, .splash > a:visited {
    color: blue; 
}

.left-bar {
    width: 10%; 
    border-right: 0.2vw solid var(--blue1); 
}

.right-bar {
    width: 15%;
    background-color: var(--blue1); 
}

.right-bar > ul {
    margin-left: 15%; 
    margin-right: 7%; 
}

.right-bar > .links > li, .right-bar > .links > li > a {
    color: white; 
}


/* LEFT BAR */

.left-bar > img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* CONTENT */
.inner-content {
    display: flex; 
    align-items: start; 
    width: 100%; 
}

.main, .side {
    display: inline-block; 
}

.main {
    width: 75%; 
    border-right: 0.2vw solid var(--blue1); 
}

.main > div {
    width: 100%; 
    background-color: #fffdf4; 
}

.main > div > h3 {
    padding-top: 1.225%; 
    padding-bottom: 1.225%; 
    background-color: var(--blue1); 
    color: white; 
    font-size: 1.2vw; 
    text-align: center; 
}

.main > div p {
    padding: 1.75%; 

}

.main .story-item {
    display: inline-block; 
    width: 100%; 
    border-bottom: 1px solid var(--blue1); 
}

.main .story-item > p {
    display: inline-block; 
}

.main .story-item > p.title {
    width: 30%; 
    font-weight: bold; 
}

.main .story-item > p.text {
    width: 60%; 
    margin-right: 2%; 
}

.all-stories {
    height: 25vw; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

.side {
    width: 25%; 
}


/* RIGHT BAR */
.links {
    margin-left: 7.4%; 
}


/* ADMIN VIEW */
.admin-stories {
    display: block; 
    width: 100%; 
    padding-top: 2%; 
    padding-bottom: 2%; 
    border-bottom: 0.2vw solid var(--blue1); 
}

.admin-stories > .completed, .admin-stories > .active {
    display: block; 
    width: 100%; 
    overflow: none; 
    padding-top: 1%; 
    padding-bottom: 1%; 
}

.completed > h3, .active > h3 {
    padding-left: 5%; 
}

.completed > div, .active > div {
    display: grid; 
    width: 100%; 
    grid-template-columns: 5% 25% 5% 60% 5%;
    margin-top: 0.5%; 
}

.completed > div > form, .active > div > form {
    text-align: center; 
}

.completed button, .active button {
    width: 100%; 
    background-color: var(--yellow2); 
    border: none; 
}

.completed button:hover, .active form.read-more button:hover {
    text-decoration: underline;
}

.completed > div > *, .active > div > * {
    padding: 1%; 
    border: 1px solid black; 
}

.completed > div > .limit, .completed > div > .title, .active > div > .limit, .active > div > .title {
    text-align: center; 
}

.admin-view.read {
    display: flex; 
    width: 100%; 
    padding: 5%; 
    height: 20vw; 
    justify-content: center; 
    align-items: center; 
}


/* WORD OF THE DAY */
.side > .daily-vocab {
    width: 100%; 
    /* border-left: 0.2vw solid var(--blue1);  */
    border-bottom: 0.2vw solid var(--blue1); 
    padding-bottom: 8.75%; 
}

.side > .daily-vocab > h3 {
    padding-top: 3.625%; 
    padding-bottom: 3.625%; 
    background-color: var(--blue1); 
    color: white; 
    font-size: 1.2vw; 
    text-align: center; 
}

.side > .daily-vocab > div {
    width: 100%; 
    padding: 6%; 
}

.word {
    margin-bottom: 6%; 
    text-transform: uppercase; 
    font-weight: bold; 
}

.word-type {
    margin-bottom: 6%; 
    text-decoration: underline; 
}

.word-def {
    margin-bottom: 6%; 
}

.synonyms {
    margin-bottom: 6%; 
}

.synonyms, .antonyms {
    width: 100%; 
}

.synonyms > li, .antonyms > li {
    margin-left: 24%; 
}

.synonyms > li:first-child, .antonyms > li:first-child {
    list-style: none; 
    margin-left: 0; 
}

/* 1-WORD PAGE  */

#story-content {
    border: 4px solid black; 
    background-color: var(--blue3); 
}

.join-game {
    display: block; 
    width: 100%; 
    text-align: center; 
    padding-top: 1%; 
    padding-bottom: 1%; 
}

.join-game > p {
    display: inline-block;
    margin-left: 1%; 
    margin-right: 1%; 
}

.join-game > p > a {
    text-decoration: none; 
}

.join-game > p > a:hover {
    text-decoration: underline; 
}

.join-form {
    display: flex; 
    width: 100%; 
    justify-content: center; 
    margin-top: 3%; 
    margin-bottom: 3%;
}

.inner-content.story-content { 
    background-color: var(--yellow2); 
}

.join-form > div {
    display: block; 
    width: 30%; 
    border: 0.2vw solid var(--blue1); 
    background-color: white; 
}

.join-form.host-form > div {
    width: 50%; 
}

.join-form > div > .outer-div {
    display: flex; 
    justify-content: center;
}

.join-form > div > div > .inner-div {
    display: block; 
    width: 70%; 
    padding-top: 5%; 
    padding-bottom: 5%; 
}

.join-form .inner-div label, .join-form .inner-div input {
    display: block; 
    width: 100%; 
}

.join-form textarea {
    display: block; 
    margin-bottom: 3%; 
    padding: 3%; 
    width: 100%; 
    height: 5vw; 
    outline: none; 
    color: var(--blue3); 
}

.join-form > div > .outer-div > .inner-div > input {
    margin-bottom: 5%; 
    outline: none; 
}

.join-form .inner-div .host-pass, .join-form .inner-div .host-pass-label {
    display: inline-block; 
    width: 60%;
}

.join-form .public-private {
    width: 35%; 
    float: right; 
}

.join-form .public-private > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.join-form .inner-div .public-private input, .join-form .inner-div .public-private input {
    display: inline-flex; 
}

.join-form .inner-div .radio-msg {
    margin-top: 10%; 
    margin-bottom: 10%; 
}

.join-form > div > .outer-div > .inner-div > label {
    margin-bottom: 1%; 
}

.join-form button {
    background-color: var(--blue1); 
    padding-right: 5%; 
    padding-left: 5%; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    float: right; 
    color: white; 
    border: none; 
}

.join-form button:hover {
    background-color: var(--blue2); 
}

.create-username {
    display: flex; 
    justify-content: center;
    background-color: var(--blue1); 
    padding-top: 5%; 
}

.create-username > div > label {
    display: block; 
    color: white; 
}

.create-username > div > input {
    display: block; 
    outline: none; 
    margin-top: 5%; 
    margin-bottom: 10%; 
}

.game-info { 
    display: grid; 
    grid-template-columns: 25% 25% 50%;
    width: 100%; 
    overflow: none; 
}

.game-info > div {
    display: inline-grid; 
    padding-top: 2%; 
    padding-bottom: 2%; 
    padding-left: 1.5%; 
    padding-right: 1.5%; 
    text-align: center; 
    border: 0.2vw solid var(--blue1);
}

.game-info > * {
    overflow: none; 
}

.game-info > .word-limit {
    grid-column-start: 1; 
    grid-column-end: 2; 
}

.game-info > .word-limit > div, .game-info > .room-key > div {
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.game-info > .users-connected {
    grid-column-start: 3; 
    grid-column-end: 4; 
    text-align: left; 
    padding-left: 2%; 
    padding-right: 2%; 
    padding-top: 1.5%; 
    padding-bottom: 1.5%; 
}

.game-info > .room-key {
    /* width: 25%;  */
    grid-column-start: 2; 
    grid-column-end: 3; 
}

.game-info > h3 {
    /* display: block;  */
    display: inline-grid; 
    grid-column-start: 1; 
    grid-column-end: 4; 
    width: 100%; 
    background-color: var(--blue1); 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    font-size: 1.2vw; 
    padding-top: 1%; 
    padding-bottom: 1%; 
}

.game-instruct {
    display: block; 
    background-color: var(--yellow2); 
    width: 100%; 
}

.game-instruct p {
    padding: 2%; 
}

.game-instruct > p:first-child {
    display: block; 
    background-color: var(--blue3); 
    text-align: center; 
    border-bottom: 0.2vw solid var(--blue1); 
    color: white; 
    width: 100%; 
}

.game-instruct > p:first-child > strong {
    color: white; 
}

.game-instruct > .wrapper-1 {
    display: flex; 
    width: 100%; 
    align-items: center; 
}

.game-instruct > .wrapper-1 > p {
    display: inline-block; 
    width: 35%; 
    padding: 5%; 
}

.game-instruct > .wrapper-1 > .wrapper-2 {
    display: inline-block; 
    width: 65%; 
    border-left: 0.2vw solid var(--blue1);
    padding: 2%; 
    background-color: white; 
}

.game-instruct .wrapper-2 > p:nth-child(2) { 
    line-height: 1.3;
}

.game-instruct .wrapper-2 > p:nth-child(2) > * {
    margin-left: 2%; 
}

.game-instruct strong.player-1 {
    color: #0062ff; 
}

.game-instruct strong.player-2 {
    color: #0f1940; 
}

.game-instruct strong.player-3 {
    color: #af21cf;  
}

.story-says {
    margin: 3%; 
    width: 100%; 
}

.story-says > form {
    width: 100%; 
}

.story-says > form > textarea {
    display: block; 
    padding: 1%; 
    margin-top: 1%; 
    margin-bottom: 1%; 
    width: 100%; 
    height: 15vw; 
    outline: none; 
    color: var(--blue3); 
}

.story-says > form > button {
    background-color: var(--blue1); 
    padding-right: 2.5%; 
    padding-left: 2.5%; 
    padding-top: 1%; 
    padding-bottom: 1%; 
    margin-left: 1%; 
    float: right; 
    color: white; 
    border: none; 
}

.story-says > form > .leave-button {
    float: left; 
    margin: 0; 
}

.story-says > form > button:hover {
    background-color: var(--blue2); 
}

.story-wait { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
}

.story-wait > form {
    display: block; 
    width: 30%; 
    margin-top: 2%; 
    margin-bottom: 2%; 
}

.story-wait > form > div {
    display: flex; 
    width: 100%; 
    justify-content: center; 
}

.story-wait > form > img {
    width: 100%; 
    margin-bottom: 10%; 
}

.story-wait > form > div > button {
    background-color: var(--blue1); 
    padding-right: 5%; 
    padding-left: 5%; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    color: white; 
    border: none; 
}

.story-wait > form > div > button:hover {
    background-color: var(--blue2);
}

.waiting-turn { 
    display: flex; 
    width: 100%; 
    justify-content: center; 
    align-items: center; 
    padding-top: 5%; 
    padding-bottom: 5%; 
}

.waiting-turn > div {
    display: block; 
    width: 50%; 
}

.waiting-turn > div > .wait-box {
    display: block; 
    padding: 5%; 
    border: 0.2vw solid var(--blue2); 
    background-color: var(--yellow2); 
    text-align: center; 
}

.waiting-turn > div > .wait-box > img {
    width: 60%;
    margin-top: 5%;  
}

#wait-game-form, #wait-turn-form, #wait-host-form {
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-top: 5%; 
}

#wait-host-form > button.start-button {
    margin-right: 3%; 
}

#wait-game-form > button, #wait-turn-form > button, #wait-host-form > button {
    background-color: var(--blue1); 
    padding-right: 5%; 
    padding-left: 5%; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    color: white; 
    border: none; 
}

#wait-game-form > button:hover, #wait-turn-form > button:hover, #wait-host-form > button:hover {
    background-color: var(--blue2);
}

.story-complete {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    min-height: 20vw; 
}

.story-complete > div {
    display: block; 
    width: 70%; 
    margin-top: 5%; 
    margin-bottom: 5%; 
}

.story-complete h3 {
    width: 100%; 
    background-color: var(--blue1); 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    font-size: 1.2vw; 
    padding: 1%; 
    overflow: hidden; 
}

.story-complete > div > div {
    background-color: white; 
    padding: 2%; 
    border: 1px solid black; 
    border-top: none; 
}

.story-complete form {
    display: flex; 
    width: 100%; 
}

.story-complete .wrapper > p {
    margin-bottom: 4%; 
    max-height: 20vw; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

.story-complete form > p {
    display: inline-block; 
    width: 60%; 
    margin-left: 2%; 
    padding-left: 4%; 
    border-left: 1px solid black; 
}

.story-complete button, .story-complete a {
    padding-right: 3%; 
    padding-left: 3%; 
    padding-top: 1.5%; 
    padding-bottom: 1.5%; 
    margin-right: 2%; 
    background-color: var(--blue1); 
    color: white; 
    border: none; 
    text-decoration: none; 
}

.story-complete button:hover, .story-complete a:hover {
    background-color: var(--blue2);
}