* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'kingsthings';
  src: url(./fonts/Kingthings-Lickorishe.ttf) format('truetype');
}

@font-face {
  font-family: 'Kalam';
  src: url(./fonts/Kalam-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'PatrickHand';
  src: url(./fonts/PatrickHand.ttf) format('truetype');
}

@font-face {
  font-family: 'RusticStory';
  src: url(./fonts/rustic-story/RusticStory-R9vKM.ttf) format('truetype');
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/*   This gets rid of background for autofill     */
input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white;
  box-shadow: inset 0 0 0px 9999px white;
  border: 1px solid black;
}

::-webkit-scrollbar-thumb {
  background: rgb(184, 184, 184);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: var(--bkBlack);
}

span.no-break {
  white-space: nowrap;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: grey;
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  --text-color: black;
  --form-btn-bkgrnd: rgb(197, 197, 197);
  --input-borders: rgba(0, 0, 0, .2);
  --input-border-focus: hsl(197, 71%, 33%);
  --placeholder-color: #888;
  --label-color: black;
  --bluish-label: hsl(193, 43%, 35%);
  --input-text: black;
  --scrollbar-thumb: hsl(203, 52%, 42%);
  --bkgrnd-linear-grad: linear-gradient(to bottom, #275C7C, #4E86B3);
  --error-span: hsla(0, 100%, 60%, .6);
  --error-border: hsla(0, 100%, 60%, .6);
  --err-msg-color: hsl(197, 55%, 55%);
  --right-bkgrnd: whitesmoke;
  --nav1-hover: rgb(195, 62, 62);
  --background-color: white;
  --input-error: rgb(255, 151, 151);


  /*  Both light and dark mode  */
  --left-bkgrnd: hsl(34, 44%, 80%);


  /*      SIZES      */
  --nav1-height: 35px;
  --nav2-height: 15px;
  --navbar-height: 60px;

  justify-content: space-evenly;
  /* Safari */
  -webkit-user-select: none;
  /* IE 10 and IE 11 */
  -ms-user-select: none;
  /* Standard syntax */
  user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
}

body.dark {
  --text-color: white;
  --form-btn-bkgrnd: rgb(50, 50, 50);
  --input-borders: rgba(255, 255, 255, .2);
  --input-border-focus: skyblue;
  --placeholder-color: #999;
  --label-color: rgba(255, 255, 255, .7);
  --bluish-label: hsl(193, 43%, 65%);
  --input-text: rgb(255, 255, 239);
  --scrollbar-thumb: hsl(207, 50%, 80%);
  --bkgrnd-linear-grad: linear-gradient(to bottom, hsl(207, 79%, 20%), hsl(207, 40%, 40%));
  --error-span: hsla(0, 100%, 60%, .6);
  --error-border: hsla(0, 100%, 60%, .6);
  --err-msg-color: #88c0d0;
  --right-bkgrnd: black;
  --nav1-hover: hsl(25, 76%, 60%);
  --background-color: black;
}

/* Universal */

.blink {
  animation: blink 1.5s linear;
  transition: opacity 0s !important;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  19% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  39% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  59% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  79% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.nav-btn {
  /* Safari */
  -webkit-user-select: none;
  /* IE 10 and IE 11 */
  -ms-user-select: none;
  /* Standard syntax */
  user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
}

main {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.leftSide,
.rightSide {
  min-width: 49vw;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/*  
            Left Side
*/

.leftClickGuard {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
}

.leftSide {
  position: relative;
  min-width: 49vw;
  background-color: var(--left-bkgrnd);
  padding: 20px;
}

.leftSide .title {
  margin-top: 10px;
  font-family: kingsthings;
  font-size: 50px;
  text-align: center;
}

.leftSide .subTitle {
  margin-top: 10px;
  font-family: kurale;
  font-style: italic;
  font-size: 30px;
  text-align: center;
}

.leftSide p.introText {
  max-width: 600px;
  margin: auto;
}

/*
          Buttons for extra material
*/

/* Buttons */
.leftSide #extraResourceBtns {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 500px;
  margin: auto;
  justify-content: space-evenly;
  /* Safari */
  -webkit-user-select: none;
  /* IE 10 and IE 11 */
  -ms-user-select: none;
  /* Standard syntax */
  user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
}

.leftSide #extraResourceBtns.disable {
  pointer-events: none;
}

.leftSide #extraResourceBtns button {
  padding: 5px 0px;
  outline: none;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 1px hsla(0, 0%, 0%, .5);
  cursor: pointer;
  font-size: 16px;
  width: 120px;
  font-weight: 700;
}

.leftSide #extraResourceBtns button:active {
  box-shadow: 1px 1px 1px .5px hsla(0, 0%, 0%, .5);
  transform: scale(.99);
}

/* Dropdown div */
#extraResourceContainer {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .4s .2s;
  z-index: -10;
}

#extraResourceContainer.hideResources {
  opacity: 0 !important;
  animation-delay: zDelay .5s;
}

@keyframes zDelay {
  0% {
    z-index: 1;
  }

  99% {
    z-index: 1;
  }

  100% {
    z-index: 0;
  }
}

#extraResourceContainer.active {
  opacity: 1;
  transition: opacity 0.4s linear;
  transition-delay: z-index 0.4s;
  z-index: 100;
}

#extraResourceContainer .extraResources {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  max-width: min(400px, 50%);
  padding: 20px;
  height: fit-content;
  min-height: 400px;
  background-color: var(--left-bkgrnd);
  opacity: 0;
  pointer-events: none;
  filter: brightness(1.2);
  font-family: Arial, Helvetica, sans-serif !important;
  transition: opacity .4s 0s, top .4s 0s;
  box-shadow: 5px 5px 15px 3px hsl(0, 0%, 10%);
  border-radius: 10px;
}

#extraResourceContainer .extraResources.clearCache {
  filter: brightness(2);
  font-weight: 700;
}

#extraResourceContainer .extraResources.clearCache p {
  font-family: 'RusticStory' !important;
  font-size: 16px;
}

#extraResourceContainer .extraResources.visible {
  top: 50px;
  opacity: 1;
  pointer-events: all;
  transition: opacity .4s .1s, top .4s .1s;
}

#extraResourceContainer .extraResources .resourceTitle {
  text-align: center;
  margin: 10px 0 25px;
  text-decoration: underline;
  font-size: 28px;
}

#extraResourceContainer .extraResources .exit {
  position: absolute;
  top: 8px;
  right: 22px;
  font-size: 27px;
  font-weight: 900;
  cursor: pointer;
  /* Safari */
  -webkit-user-select: none;
  /* IE 10 and IE 11 */
  -ms-user-select: none;
  /* Standard syntax */
  user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
}

#extraResourceContainer .extraResources ul {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: min-content;
  list-style: none;
}

#extraResourceContainer .extraResources a {
  color: black;
  text-decoration: none;
}

#extraResourceContainer .extraResources a:visited {
  color: darkblue;
}

#extraResourceContainer .extraResources li {
  white-space: nowrap;
  margin: 10px 0;
  cursor: pointer;
  font-size: 20px;
}

#extraResourceContainer .extraResources li:hover {
  transform: scale(1.03);
  font-weight: 700;
}




/*  
                Right Side
*/

.rightSide {
  position: relative;
  background-color: var(--right-bkgrnd);
  min-width: 250px;
  max-width: 500px;
}

#main-navbar,
#chat-navbar,
#account-navbar,
#actions-navbar {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  height: var(--nav1-height);
  padding-top: 3px;
  font-size: 16px;
  list-style: none;
  font-weight: 700;
  z-index: 10;
}

#chat-navbar,
#account-navbar,
#actions-navbar {
  height: var(--nav2-height);
  width: 90%;
  margin: auto;
}

#chat-navbar li,
#main-navbar li,
#account-navbar li,
#actions-navbar li {
  cursor: pointer;
  color: hsl(25, 76%, 50%);
  transition: color .2s, text-decoration .2s;
}

#chat-navbar li:hover,
#main-navbar li:hover,
#account-navbar li:hover,
#actions-navbar li:hover {
  color: var(--nav1-hover)
}

#chat-navbar li.highlight,
#main-navbar li.highlight,
#account-navbar li.highlight,
#actions-navbar li.highlight {
  text-decoration: underline;
  color: hsl(25, 76%, 15%);
}

.dark #chat-navbar li.highlight,
.dark #main-navbar li.highlight,
.dark #account-navbar li.highlight,
.dark #actions-navbar li.highlight {
  text-decoration: underline;
  color: hsl(25, 76%, 90%);
}

/* Replace login-btn with account-btn when logged-in */
#main-navbar #account-btn {
  display: none;
}

#main-navbar.logged-in #login-btn {
  display: none
}

#main-navbar.logged-in #account-btn {
  display: block
}

/*  
          Sections
*/

#main-sections {
  height: calc(99vh - var(--nav1-height));
}

#action-sections section {
  overflow-x: hidden;
  overflow-y: auto;
}

/* tmf_new_inputs.js */

.sectionEl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: var(--nav1-height);
  left: 0;
  width: 100%;
  height: fit-content;
  padding-bottom: 50%;
  color: var(--text-color);
  background-color: var(--background-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  transition-delay: 0s;
}

.sectionEl.active {
  opacity: 1;
  pointer-events: all;
}

.sectionEl.hide * {
  opacity: 0 !important;
  pointer-events: none !important;
}


/*  
          Form Elements
*/

.section-title {
  text-align: center;
  margin-bottom: 10px;
}

.formMsg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 500;
  height: 60px;
  background-color: #222;
}

/*  
          Chat Page
*/

#homeDiv,
#loginDiv,
#aboutDiv {
  padding: 20px 10px 50% !important;
}

#homeDiv,
#chatDiv,
#actionsDiv,
#aboutDiv,
#profileDiv,
#searchDiv,
#uploadDiv,
#recordDiv,
#messageDiv,
#loginDiv {
  display: flex;
  flex-direction: column;
}

#profileDiv h3,
#loginDiv h3,
#chatDiv h3,
#chatDiv h3+p {
  margin: 20px 0;
  text-align: center;
}









#pickHand a {
  text-decoration: none;
  color: black;
}

#pickHand {
  margin: 30px auto;
  width: 300px;
  height: 400px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, .2);
  max-width: 70%;
  padding: 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

#pickHand img {
  margin-top: 5%;
  max-width: 50%;
  margin-bottom: 3%;
  max-height: 50%;
}

#pickHand h2 {
  margin: 0 0 5px;
}

#pickHand h2 span {
  white-space: nowrap;
}

#pickHand h2 span:last-of-type {
  color: red
}


















@media screen and (max-width: 1000px) {
  ::-webkit-scrollbar {
    width: .4vw;
    height: .4vw;
  }

  body {
    /*      SIZES      */
    --nav1-height: 3.5vw;
    --nav2-height: 1.5vw;
    --navbar-height: 6.0vw;
  }

  /*  
              Left Side
  */

  .leftSide {
    padding: 2.0vw;
  }

  .leftSide .title {
    margin-top: 1.0vw;
    font-size: 5.0vw;
  }

  .leftSide .subTitle {
    margin-top: 1.0vw;
    font-size: 3.0vw;
  }


  /*
            Buttons for extra material
  */

  /* Buttons */
  .leftSide #extraResourceBtns {
    max-width: 50vw;
  }

  .leftSide #extraResourceBtns button {
    padding: .5vw 0;
    border: .1vw solid black;
    border-radius: .5vw;
    box-shadow: .3vw .3vw .3vw .1vw hsla(0, 0%, 0%, .5);
    font-size: 1.6vw;
    width: 12.0vw;
  }

  .leftSide #extraResourceBtns button:active {
    box-shadow: .1vw .1vw .1vw .05vw hsla(0, 0%, 0%, .5);
  }

  #extraResourceContainer .extraResources {

    max-width: min(40vw, 50%);
    padding: 2vw;
    min-height: 40vw;
    box-shadow: .5vw .5vw 1.5vw .3vw hsl(0, 0%, 10%);
    border-radius: 1vw;
  }

  #extraResourceContainer .extraResources.clearCache p {
    font-size: 1.6vw;
  }

  #extraResourceContainer .extraResources.visible {
    top: 5vw;
  }

  #extraResourceContainer .extraResources .resourceTitle {
    margin: 1vw 0 2.5vw;
    font-size: 2.8vw;
  }

  #extraResourceContainer .extraResources .exit {
    top: .8vw;
    right: 2.2vw;
    font-size: 2.7vw;
  }

  #extraResourceContainer .extraResources li {
    margin: 1vw 0;
    font-size: 2vw;
  }

  /*  
                  Right Side
  */

  .rightSide {
    max-width: 50vw;
  }

  #chat-navbar,
  #main-navbar,
  #account-navbar,
  #actions-navbar {
    padding-top: .3vw;
    font-size: 1.6vw;
  }

  /*  
            Form Elements
  */

  .section-title {
    margin-bottom: 1vw;
  }

  .formMsg {
    font-size: 1.5vw;
    margin-bottom: 4vw;
    height: 6vw;
  }

  /*  
            Chat Page
  */

  #homeDiv,
  #loginDiv,
  #aboutDiv {
    padding: 2vw 1vw 50% !important;
  }

  #profileDiv h3,
  #loginDiv h3,
  #chatDiv h3,
  #chatDiv h3+p {
    margin: 2vw 0;
  }

  #pickHand {
    margin: 3vw auto;
    width: 30vw;
    height: 40vw;
    border-radius: .5vw;
    box-shadow: 1vw 1vw 1vw .5vw rgba(0, 0, 0, .2);
    max-width: 70%;
    padding: 2vw;
    font-size: 1.4vw;
  }

  #pickHand h2 {
    margin: 0 0 .5vw;
  }

}

































@media screen and (max-width: 500px) {
  #pickHand {
    margin: 6vw auto;
    width: 60vw;
    height: 80vw;
    border-radius: 1vw;
    box-shadow: 2vw 2vw 2vw 1vw rgba(0, 0, 0, .2);
    padding: 4vw;
    font-size: 2.8vw;
  }

  #pickHand h2 {
    margin: 0 0 1vw;
  }

  /* Dropdown div */

  #extraResourceContainer .extraResources {
    max-width: 80%;
    padding: 2vw;
    min-height: 40vw;
    box-shadow: .5vw .5vw 1.5vw .3vw hsl(0, 0%, 10%);
    border-radius: 1vw;
  }

  #extraResourceContainer .extraResources.clearCache p {
    font-size: 1.6vw;
  }


  #extraResourceContainer .extraResources .resourceTitle {
    margin: 1vw 0 2.5vw;
    font-size: 2.8vw;
  }

  #extraResourceContainer .extraResources .exit {
    top: .8vw;
    right: 2.2vw;
    font-size: 2.7vw;
  }

  #extraResourceContainer .extraResources li {
    margin: 2vw 0;
    font-size: 4vw;
  }

}









@media screen and (max-width: 899px) {

  body {
    --nav1-height: 4vw;
    --nav2-height: 1.875vw;
    font-size: 1.778vw;
  }

  .leftSide {
    padding: 1vw;
  }

  .leftSide .title {
    margin-top: 1.111vw;
    font-size: 4vw;
  }

  .leftSide .subTitle {
    margin-top: 1vw;
    font-size: 2vw;
  }

  /*
            Extra material
  */

  /* Buttons */

  .leftSide #extraResourceBtns button {
    padding: .556vw 0;
    border: .111vw solid black;
    border-radius: .556vw;
    box-shadow: .333vw .333vw .333vw .111vw hsla(0, 0%, 0%, .5);
    font-size: 1.778vw;
    width: 13.333vw;
  }

  .leftSide #extraResourceBtns button:active {
    box-shadow: .111vw .111vw .111vw .556vw hsla(0, 0%, 0%, .5);
  }

  /* Dropdown div */

  .leftSide .extraResources {
    padding: 2.222vw;
    min-height: 44.444vw;
    box-shadow: .556vw .556vw 1.667vw .333vw hsl(0, 0%, 10%);
    border-radius: 1.111vw;
    font-size: 1.778vw;
  }

  .leftSide .extraResources.visible {
    top: 11.111vw;
  }

  .leftSide .extraResources .resourceTitle {
    margin: 1.111vw 0 2.778vw;
    font-size: 3.111vw;
  }

  .leftSide .extraResources .exit {
    top: .889vw;
    right: 2.444vw;
    font-size: 3vw;
  }

  .leftSide .extraResources li {
    margin: 1.111vw 0;
    font-size: 2.222vw;
  }

  /*  
            right side
  */


  #main-navbar,
  #chat-navbar,
  #account-navbar,
  #actions-navbar {
    padding-top: .333vw;
    font-size: 1.8vw;
  }

  .section-title {
    margin-bottom: 1.111vw;
  }

  .formMsg {
    font-size: 1.667vw;
    height: 4.444vw;
    margin-bottom: 4.444vw;
    height: 6.667vw;
  }

  #homeDiv,
  #loginDiv,
  #aboutDiv {
    padding: 2.222vw 1.111vw 50% !important;
  }

  #profileDiv h3,
  #loginDiv h3,
  #chatDiv h3,
  #chatDiv h3+p {
    margin: 2.222vw 0;
  }

}

@media screen and (max-width: 750px) {

  body {
    --nav1-height: 5vw;
  }

  #main-navbar,
  #chat-navbar,
  #account-navbar,
  #actions-navbar {
    padding-top: 0.4vw;
    font-size: 2vw;
  }

  #homeDiv textArea,
  #homeDiv .bannerMsg,
  .underWhiteboard p {
    font-size: 2vw;
  }

  #homeDiv textArea {
    padding: 1vw;
    letter-spacing: .133vw;
  }

  #whiteboardMsgs {
    top: 8.5vw;
  }

}

@media screen and (max-width: 500px) {

  body {
    --nav1-height: 10vw;
    --nav2-height: 3.75;
    font-size: 3.2vw;
    width: 200vw;
  }

  main {
    width: 200vw;
    height: 99.8vh;
  }

  .leftSide,
  .rightSide {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
  }

  .leftSide {
    padding: 2vw;
  }

  .leftSide .title {
    margin-top: 4vw;
    font-size: 8vw;
  }

  .leftSide .subTitle {
    margin-top: 2vw;
    font-size: 4vw;
  }

  /*
                Extra material
  */

  /* Buttons */

  .leftSide #extraResourceBtns button {
    padding: 1vw 0;
    border: .2vw solid black;
    border-radius: 1vw;
    box-shadow: .6vw .6vw .6vw .2vw hsla(0, 0%, 0%, .5);
    font-size: 3.2vw;
    width: 24vw;
  }

  .leftSide #extraResourceBtns button:active {
    box-shadow: .2vw .2vw .2vw .1vw hsla(0, 0%, 0%, .5);
  }

  /*
            Buttons for extra material
  */

  /* Buttons */
  .leftSide #extraResourceBtns {
    max-width: 100vw;
  }

  .leftSide #extraResourceBtns button:active {
    box-shadow: .4vw .4vw .4vw .2vw hsla(0, 0%, 0%, .5);
  }




  #extraResourceContainer .extraResources {
    padding: 4vw;
    min-height: 80vw;
    box-shadow: 1vw 1vw 3vw .6vw hsl(0, 0%, 10%);
    border-radius: 2vw;
  }

  #extraResourceContainer .extraResources.clearCache p {
    font-size: 3.2vw;
  }

  #extraResourceContainer .extraResources.visible {
    top: 10vw;
  }

  #extraResourceContainer .extraResources .resourceTitle {
    margin: 2vw 0 5vw;
    font-size: 5.6vw;
  }

  #extraResourceContainer .extraResources .exit {
    top: 1.6vw;
    right: 4.4vw;
    font-size: 5.4vw;
  }

  #extraResourceContainer .extraResources li {
    margin: 2vw 0;
    font-size: 4vw;
  }

  /* Dropdown div */

  .leftSide .extraResources {
    padding: 4vw;
    min-height: 80vw;
    box-shadow: 1vw 1vw 3vw .6vw hsl(0, 0%, 10%);
    border-radius: 2vw;
    font-size: 3.2vw;
  }

  .leftSide .extraResources.visible {
    top: 20vw;
  }

  .leftSide .extraResources .resourceTitle {
    margin: 2vw 0 5vw;
    font-size: 5.6vw;
  }

  .leftSide .extraResources .exit {
    top: 1.6vw;
    right: 4.4vw;
    font-size: 5.4vw;
  }

  .leftSide .extraResources li {
    margin: 2vw 0;
    font-size: 4vw;
  }

  /* Right side */
  .rightSide {
    min-width: 0px;
  }

  #main-navbar,
  #chat-navbar,
  #account-navbar,
  #actions-navbar {
    font-size: 4vw;
  }

  #aboutDiv {
    padding: 4vw 2vw 50% !important;
  }

  .section-title {
    margin-bottom: 2vw;
  }

  .formMsg {
    font-size: 3vw;
    margin-bottom: 8vw;
    height: 12vw;
  }

  #homeDiv,
  #loginDiv,
  #aboutDiv {
    padding: 4vw 2vw 50% !important;
  }

  #profileDiv h3,
  #loginDiv h3,
  #chatDiv h3,
  #chatDiv h3+p {
    margin: 4vw 0;
  }

}