/*
 * @Author: Collin Blatt 
 * @Date: 2020-12-09 21:59:50 
 * @Last Modified by: collinblatt
 * @Last Modified time: 2020-12-31 13:06:38
 */

    :root {
        --header-color: whitesmoke;
        --theme-bgc: hsla(0,0%,0%, 1);
        --nav-hover-bgc: hsla(0,0%,15%, 1);
        --def-fs: 3.0rem;
    }

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    background-color: whitesmoke;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--def-fs);
    font-family: 'ModeSeven', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*Georgia, 'Times New Roman', Times, serif;*/
}

header {
    width: 100%;
    padding: 1rem 0 0 0;
    margin: 0;
    background-color: var(--theme-bgc);
    color: var(--header-color);
    text-align: center;
    overflow: hidden;
}

header h1 {
    margin: 0;
    padding: 0;
    letter-spacing: 0.75rem;
}

header img {
    margin: 0;
    padding: 0;
}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10rem;
}

h1, h2, h3, h4, nav {
    font-family: 'ModeSeven', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

.title {
    width: 100%;
}

.title a {
    color: var(--header-color);
    text-decoration: none;
}

.copyright {
    font-size: calc(var(--def-fs) * 0.5);
    color: hsla(0,0%, 60%, 1);
}

.copyright a {
    color: inherit;
    text-decoration: none;
}

.content {
    width: 75%;
    margin-bottom: 3rem;
    border-bottom: 0.25rem dashed #eee;
    text-align: center;
    overflow: hidden;
}

.content h1 {
    overflow-wrap: break-word;
    hyphens: auto;
}

.content img {
    opacity: 5%;
}

.vid-header {
    width: 100%;
}

.rounded {
    border-radius: 50px 1px;
}

.circle {
    border-radius: 200px;
}

.custom-h1 {
    font-size: calc(var(--def-fs) * 1.9);
}



nav {
    overflow: hidden;
    /*background: hsla(0, 0%, 100%, 1);*/
    background-color: var(--theme-bgc);
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  
  nav a {
    float: left;
    display: block;
    color: whitesmoke;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  nav a:hover {
    background-color: var(--nav-hover-bgc);
    background-image: none;
    color: whitesmoke;
  }

  nav a:active {
    background-color: var(--nav-hover-bgc);
    background-image: none;
    color: whitesmoke;
  }
  
  nav a.active {
    /*background-color: hsla(180, 100%, 25%, 1);*/
    background-color: whitesmoke;
    border-top: 0.25rem dashed #eee;
    color: black;
  }

  nav a.active:hover {
      /*background-color: hsla(180, 100%, 22%, 1);*/
      background-color: hsla(0, 0%, 90%, 1);
      border-top: 0.25rem solid hsla(0, 0%, 90%, 1);
  }

  ::selection {
      background-color: #000;
      color: whitesmoke;
  }

  .top-button {
    background-color: #FFE53B;
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);    
      color: #000;
  }

  summary {
    background-color: #FFE53B;
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);  
      color: #000;
  }

  .no-style {
    color: #000;
    text-decoration: none;
    cursor: crosshair;
  }

  .button {
    background-color: #000;
    font-family: 'ModeSeven', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
    color: white;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2.0rem;
    margin: 4px 2px;
    cursor: pointer;
  }

  .button:hover {
      background-color: #1f1f1f;
  }

  .barcode {
    font-family: 'Libre Barcode 39', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 5.2rem;
  }

/* CHANGE FOR MOBILE SCREENS */

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

    .title {
        width: 100%;
        margin: 0.5rem;
    }
    
    .content {
        width: 100%;
        margin: 1rem;
    }
}