body {

  /* Universal */
  --text-color: black;
  --hover-color: blue;
  --navbar-bkgrnd: rgba(255, 255, 255, .87);
  --solid-bkgrnd: white;
  --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, 71%, 43%);
  --err-msg-color: hsl(197, 55%, 55%);
  
  /* --greenish-text: hsl(193, 43%, 40%); */
  
  
  /*      UNIVERSAL (light or dark mode)      */
  --section-height: 650px;
  --larger-paragraph: 19px;
  --navbar-height: 60px;
  transition: background 1s;
}

body.dark {
  
  /* Universal */
  --text-color: white !important;
  --hover-color: yellow;
  --navbar-bkgrnd: rgba(0, 0, 0, .8);
  --solid-bkgrnd: black;
  --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;

  /* --greenish-text: hsl(193, 43%, 40%); */
}

@font-face {
  font-family: Poppins;
  font-weight: 100;
  font-style: normal;
  src: url(./poppins/poppins_100/Poppins-Thin.ttf);
}


@font-face {
  font-family: Poppins;
  font-weight: 200;
  font-style: normal;
  src: url(./poppins/poppins_200/Poppins-ExtraLight.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 300;
  font-style: normal;
  src: url(./poppins/poppins_300/Poppins-Light.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  src: url(./poppins/poppins_400/Poppins-Regular.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 500;
  font-style: normal;
  src: url(./poppins/poppins_500/Poppins-Medium.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 600;
  font-style: normal;
  src: url(./poppins/poppins_600/Poppins-SemiBold.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 700;
  font-style: normal;
  src: url(./poppins/poppins_700/Poppins-Bold.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 800;
  font-style: normal;
  src: url(./poppins/poppins_800/Poppins-ExtraBold.ttf);
}

@font-face {
  font-family: Poppins;
  font-weight: 900;
  font-style: normal;
  src: url(./poppins/poppins_900/Poppins-Black.ttf);
}

/*
    This code should already be copied to the start of your css. Download the font files
    by clicking the 'FILE' button, then extract all of the contents into whichever file
    you use for fonts ('google-font', in this case). Depending on your file system, adjust
    the relative URL by starting with the CSS file this code is entered into as the root..

    The most recent settings were:

        div {
          font-family: 'Space Mono';
          font-size: 22px;
          letter-spacing: 0px;
          word-spacing: 11px;
          margin: 24px;
          font-weight: 700px;
          font-style: normal;
        }

        Deciding which fonts to use is as easy as commenting and
        un-commenting each $font-face rule below. It is advised
        to comment out any weights/styles that are not needed.
*/
@font-face {
  font-family: 'Space Mono';
  font-weight: 400;
  font-style: normal;
  src: url(./space_mono/space_mono_400/SpaceMono-Regular.ttf);
}

@font-face {
  font-family: 'Space Mono';
  font-weight: 400;
  font-style: italic;
  src: url(./space_mono/space_mono_400_italic/SpaceMono-Italic.ttf);
}

@font-face {
  font-family: 'Space Mono';
  font-weight: 700;
  font-style: normal;
  src: url(./space_mono/space_mono_700/SpaceMono-Bold.ttf);
}

@font-face {
  font-family: 'Space Mono';
  font-weight: 700;
  font-style: italic;
  src: url(./space_mono/space_mono_700_italic/SpaceMono-BoldItalic.ttf);
}

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

/* 
          Custom Scroll Bars
*/

/* width */
#email_form textarea::-webkit-scrollbar,
.form_container::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px !important;
}


/* Track */
#email_form textarea::-webkit-scrollbar-track,
.form_container::-webkit-scrollbar-track {
  background: var(--navbar-bkgrnd);
  border-radius: 0 10px 10px 0;
  /* background-color: red!important; */
}

body::-webkit-scrollbar-track {
  /* background: hsl(207, 52%, 60%); */
  background: var(--navbar-bkgrnd);
}

/* Handle */
#email_form textarea::-webkit-scrollbar-thumb,
.form_container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: hsl(206, 40%, 10%) 2px solid;
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: hsl(206, 40%, 10%) 2px solid;
  border-radius: 5px;
}

/* Handle on hover */
#email_form textarea::-webkit-scrollbar-thumb:hover,
.form_container::-webkit-scrollbar-thumb:hover {
  background-color: hsl(182, 50%, 50%);
}

body::-webkit-scrollbar-thumb:hover {
  background-color: hsl(182, 50%, 50%);
}

/* Scroll Behavior */
html {
  scroll-behavior: smooth;
  /* scroll-snap-type: mandatory; */
}