/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Lora-cyrillic-ext.woff") format('woff');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Lora-cyrillic.woff") format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Lora-vietnamese.woff") format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Lora-latin-ext.woff") format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Lora-latin.woff") format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Abel.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, .content, p, button, label {
  font-family: 'Lora', serif;
}
a {
  color: #ffc300;
  text-decoration: underline;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
body {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

header {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  font-family: "Abel", sans-serif;
}
header a {
  text-decoration: none;
}
header h1 {
  font-size: 3.75rem;
  font-weight: 400;
  margin-bottom: 0px;
  z-index: 10;
  color: #333333;
}
header .title-wrapper {
  position: relative;
}
header .yellow-backdrop {
  position: absolute;
  top: 75%;
  left: calc(50% + 30px);
  transform: translateY(-50%) translateX(-50%);
  height: 40%;
  width: 300px;
  background-color: #ffc300;
  z-index: -1;
}
.spotify iframe {
  width: 100% !important;
  max-height: 300px !important;
}
#quotebox {
  border: 3px solid  #ffc300;
  max-width: 625px;
  padding: 2rem;
  text-align: center;
  font-family: "Abel", sans-serif;
  margin: 2rem auto;
  position: relative;
}
#quotebox label {
  position: absolute;
  top: -1rem;
  transform: translate(-50%);
  background-color: white;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: bold;
}
#quotebox p:last-child {
  margin-top: -0.5rem;
}
#profile {
  max-height: 200px;
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margin-left: 0rem;
  margin-top: 0.5rem;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

header .navbar-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  box-shadow: none !important;
}
header .navbar-item {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  font-size: 1.25rem;
  text-decoration: none;
}

header .navbar-item:hover {
  background-color: transparent;
  color: inherit;
  border-color: #ffc300;
  cursor:pointer;
}

.yellow-button {
  background-color: #ffc300;
  border-color: #ffc300;
}
#recommended-page .buttons {
  margin-top: 2rem;
  border-bottom: 2px solid #ffc300;
}
#recommended-page .buttons .button {
  border-radius: 0px;
  margin-bottom: 0px;
}

#recommended-page .category {
  display: none;
}
#recommended-page .category.active {
  display: block;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#recommended-page .category-item {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#recommended-page hr {
  height: 1px;
}
#submit.button {
    background-color: black !important;
}
.textarea:focus,
.input:focus {
  border-color:  #ffc300;
  box-shadow: 0 0 0 .125em rgba(255, 195, 0,0.25)
}

@media (max-width: 600px) {
  body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  header .navbar-item {
  font-size: 1rem;
  }
}