@font-face {
  font-family: 'Salesforce Sans Regular';
  src: url("/fonts/SalesforceSans-Regular.woff2") format("woff2"), url("/fonts/SalesforceSans-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap; }

@font-face {
  font-family: 'Salesforce Sans Bold';
  src: url("/fonts/SalesforceSans-Bold.woff2") format("woff2"), url("/fonts/SalesforceSans-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap; }

@font-face {
  font-family: 'Neutraface Display Tilting';
  src: url("/fonts/Neutraface%20Display%20Titling/Neutraface%20Display%20Titling.woff2") format("woff2"), url("/fonts/Neutraface%20Display%20Titling/Neutraface%20Display%20Titling.woff") format("woff");
  font-weight: 700;
  font-display: swap; }

@font-face {
  font-family: 'ITC Avant Garde Gothic Std';
  src: url("/fonts/itcavantgardestd.woff2") format("woff2"), url("/fonts/itcavantgardestd.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

/* COMMON */
  :root {
  --page-bg: #f5f5f5;
  --blue1: hsl(206.57,99.06%,41.57%); /*#0176d3; slds-g-color-brand-base-50 (Brand up)*/
  --blue2: hsl(209.77,98.52%,26.47%); /*#014486; slds-g-color-brand-base-30 (Brand over)*/
  --blue3: #032d60; /*slds-g-color-brand-base-20 (Brand down)*/
  --blue4: #eaf5fe; /*slds-g-color-palette-cloud-blue-95*/
  --blue5: #215CA0;
  --grey1: #F3F3F3; /*slds-g-color-neutral-base-95*/
  --grey2: #5F5F5F; /*slds-g-color-neutral-base-65*/
  --grey3: #e5e5e5; /*slds-g-color-neutral-base-90*/
  --grey4: #F5F5F5; /*trailhead background*/
  --grey5: #F1F1F1;
  --grey6: #E6E6E6;
  --text1: #233A47; /*slds-g-color-neutral-base-10 (Main text)*/
  --text2: #000000; /*black*/
  --text3: #616161; /*slds-g-color-neutral-base-10 (Main text)*/
  --white: #FFFFFF; /*white*/
  --black: #000;
  --correct: #2e844a !important; /*slds-g-color-success-base-50*/
  --incorrect: #ba0517 !important; /*slds-g-color-error-base-40*/
  --generate: #bc0560; /*pink*/
  --fontsize1: 16px;
  --fontsize2: 14px;
  --fontsize3: 12px;
  --fontsize4: 20px;
  --dk-brand: #4e758d; /*body gradient color*/
  --dk-gray: #20272c; /*body gradient color*/
  --focus: #d71ef7; /*focus color*/
  }

  html{
    width:600px;
  }
  body {
    margin: 0;
    width: 600px;
    background-color: #f5f5f5;
    font-size: 24px;
    font-family: 'Salesforce Sans Regular';
  }
  #contentwrapper {
    box-sizing: border-box;
    border-radius: 4px;
    border: 2px solid black;
    background: white;
    min-width: 600px;
    width: 600px;
    margin-top: 15px;
    background-color: var(--blue4);
  }
  #audiowrapper {
    position: relative;
    height: 38.33px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #jumpunits{
    height: 30.67px;
    margin-top: 0px;
  }
  #jumpunits {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: -20px; */
    overflow: hidden;
    z-index: 4;
  }
  #pause {
    display: none;
  }
  button {
    /* background-color: #ffffff; */
    background-color: var(--blue4);
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  #progressbar {
    background: var(--white);
    border: 1px solid black;
    height: 24px;
    width: 50%;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 5px;
    min-width: 20%;
    position: relative;
  }
  #progress {
    width: 0%;
    background-color: hsl(208,100%,41.17647058823529%);
    height: 100%;
    border-radius: 5px;
    transition: width 0.2s linear;
  }
  #progressline {
    position: absolute;
    width: 5px;
    height: 200%;
    top: -10px;
    left: 0;
    opacity: 20%;
    background-color: black;
    display: none;
  }
  #progresstext {
    top: -100%;
    right: 0%;
  }
  button, #timecountup, #progressbar, #timetotal, #volume {
    margin: 5px;
  }
  img {
    width: 30px;
    display: flex;
  }
  #pbspeedbox, #pbspeedboxm {
    font-size: 18px;
    text-align: center;
    border: 2px solid #f5f5f5;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 2px;
    display: none;
  }
  #speedselect, #speedselectm {
    cursor: pointer;
  }
  #displayspeed {
    font-size: 18px;
  }
  #volumerange {
    display: none;
    justify-content: flex-end;
    position: relative;
    padding-bottom: 20px;
    padding-right: 2%;
    margin-top: -15px;
  }
  #volume, #playback_speed, #download, #playback_speedm {
    position: relative;
  }
  input:hover {
    cursor: pointer;
  }
  #vol1, #vol2 {
    width: 20px;
  }
  #skipback {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }
  #play, #pause {
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }
  #skipforward {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: 5px;
    position: relative;
  }
  #skipbackimg, #skipforwardimg, #mainvolimg, #downloadimg {
    width: 20px;
  }
  #playimg, #pauseimg {
    width: 30px;
  }
  #timecountup {
    margin-left: 10px;
  }
  #skipbacktext, #playtext, #pausetext, #skipforwardtext, #volumetext, #playback_speedtext, #downloadtext, #progresstext, #bgmusictext, #newtabtext {
    position: absolute;
    border-radius: 5px;
    background-color: black;
    color: white;
    padding: 5px;
    font-size: 12px;
    z-index: 2;
    display: none;
  }
  #skipbacktext {
    left: -80%;
    top: -147%;
    width: 75px;
  }
  #playtext {
    left: 0%;
    top: -70%;
  }
  #pausetext {
    left: -5.75%;
    top: -73%;
  }
  #skipforwardtext {
    left: -80%;
    top: -137%;
    width: 80px;
  }
  #volumetext {
    top: -143%;
    left: -26.8%;
  }
  #newtabtext {
    width: 125px;
    top: -103%;
    left: -486.8%;
  }
  #playback_speedtext {
    top: -170%;
    right: -4%;
    width: 90px;
  }
  #downloadtext {
    top: -165%;
    left: -112.5%;
  }
  #bgmusictext {
    top: -21%;
    right: 4%;
  }
  #bgmusic:checked {
    background-color: black;
  }
  #hotkeys {
    display: flex;
    align-items: flex-start;
    position: absolute;
    background-color: transparent;
    width: 96%;
    top: 4px;
    left: 3px;
    z-index: 0;
  }
  #keyboard {
    width: 15px;
    z-index: 2000 !important;
    margin-right: 20px;
    cursor: pointer;
  }
  #newwin {
    width: 15px;
    z-index: 1;
  }
  #shortcutkeys {
    display: none;
    gap: 20px;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: -1.5px;
  }
  #keyboardtext {
    display: none;
    position: absolute;
    font-size: 13px;
    font-family: 'Salesforce Sans Bold';
    top: -19px;
    left: 0px;
  }
  #newtab {
    position: absolute;
    font-size: 13px;
    right: -10px;
    top: -4px;
    background: none;
  }
  strong {
    font-family: 'Salesforce Sans Bold';
  }
  #speednumber, #speednumberm {
    font-size: 16px;
    margin-left: -5px;
  }
  #volume {
    margin: 0;
  }
  #playback_speed {
    display: flex;
    align-items: center;
  }
  #bgmusicm, #playback_speedm, #pbspeedboxm, #speednumberm, #playback_speedmtext, #bgmusicmtext, #bottomsection {
    display: none;
  }

  #prevunitimg, #nextunitimg {
    width: 15px;
  }
  #prevunittext, #nextunittext {
    display:  none;
  }
  #currentunit {
    font-size: 0.6em;
    margin-top: 4px;
    min-width: 65%;
    text-align: center;
  }


  @media only screen and (max-width: 550px) {
    #skipbackimg, #skipforwardimg, #mainvolimg, #downloadimg, #vol1, #vol2 {
      width: 14px;
    }
    #playimg, #pauseimg {
      width: 25px;
    }
    #timecountup, #timetotal, #speednumber, #speednumberm {
      font-size: 14px;
    }
    body {
      margin-left: 0;
      margin-right: 0;
    }
    #audiowrapper {
      padding-left: 3px;
      padding-right: 3px;
    }
    #downloadtext {
      top: -105%;
      left: -350%;
    }
    #playback_speedtext {
      top: -155%;
    }
    #volumetext {
      top: -163%;
      left: -38.8%;
    }

    #skipforwardtext {
      left: -129%;
      top: -170%;
    }
    #playtext {
      left: -17%;
      top: -88%;
    }
    #pausetext {
      left: -33.75%;
      top: -88%;
    }
    #skipbacktext {
      left: -24%;
      top: -169%;
    }
    #speedselect {
      font-size: 12px;
    }
    button, #timecountup, #progressbar, #timetotal {
      margin: 1.5px;
    }
    #pbspeedbox, #pbspeedboxm {
      font-size: 14px;
    }


  }
  @media only screen and (max-width: 400px) {
    #volume {
      display: none;
    }
    #volumerange {
      display: none;
    }
    #newtab {
      display: none;
    }
    #bottomsection {
      display: flex !important;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-bottom: 2px;
    }
    #volumeslider {
      width: 60%;
    }
    #bgmusicm {
      display: flex;
    }
    #bgmusicmtext {
      margin-right: 4px;
    }
    #playback_speedmtext, #bgmusicmtext {
      display: flex;
      font-size: 13px;
      font-family: 'Salesforce Sans Regular';
    }
    #playback_speedmtext {
      margin-left: 5px;
    }
    #playback_speedm {
      display: flex;
      margin-bottom: 2px;
      text-align: left;
    }
    #speednumberm {
      display: flex;
      text-align: left;
    }
    #bgmusic, #playback_speed, #speednumber, #volumerange {
      display: none !important;
    }
    #audiowrapper {
      padding-bottom: 2px;
    }
    #skipforwardtext {
      top: -180%;
    }
    #skipbacktext {
      top: -179%;
    }
    #currentunit {
      font-size: 0.5em;
      margin-top: 8px;
    }
    #hotkeys {
      display: none;
    }
    #shortcutkeys {
      font-size: 10px;
    }
  }