/* -------------------- MISC -------------------- */
:root {
  --white: rgba(244,246,247,1);
  --white: white;
  --yellow: #fff482;
  --pink: #f9cad0;
  --background-color: black;
  --transition-time: 600ms;
}

html {
  font-size: 20px;
}

body {
  font-family: 'Marcellus' ;
  font-family: "LL Circular";
  background-color: var(--pink);
  overflow: hidden;
}

header {
  bottom: initial;
  top: 0;
  position: fixed;
  width:100%;
  left: 0;
  z-index: 2;
  padding-top: 0.85rem;
}

header nav>ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

header nav>ul>li {
  text-transform: uppercase;
  font-weight: 800;
  float: left;
  margin: 0;
}

header nav > ul >li:nth-child(odd) {
  text-align: left;
}
header nav > ul >li:nth-child(even) {
  text-align: right;
}

header nav > ul > li > a,
ul.socialmedia>li a, ul.shows > li a {
  color: var(--yellow);
  transition: all ease var(--transition-time);
  -webkit-text-stroke: 2px var(--pink); /* width and color */
  font-size: 2rem;
}

header nav > ul > li > a:hover, ul.shows > li a:hover {
  color: var(--pink);
  text-shadow: var(--yellow) 4px 4px 4px;
  -webkit-text-stroke: 2px var(--yellow); /* width and color */
}

ul.socialmedia>li:hover a {
  color: black;
}

header nav>ul>li.active {
  display: none;
}

header ul.socialmedia {
  list-style: none;
  padding: 0;
  margin: 0;
  bottom: 0.85rem;
  position: fixed;
  right: initial;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  width: 100%;
}

header ul.socialmedia>li {
  margin: 0 0.4rem;
  flex-grow: 1;
  text-align: center;
}

/* -------------------- Menus END -------------------- */
/* -------------------- Main Content -------------------- */

main#content {
  padding: 0;
  margin-top: 4rem;
  max-height: calc(100vh - 8rem);
  position: relative;
  overflow: auto;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  height: 100vh;
  padding-top: 4rem;
}

.content-inner {
  padding: 1rem 0 ;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}
h2 {
  text-transform: uppercase;
  text-align: center;
  color: var(--yellow);
  transition: all ease var(--transition-time);
  -webkit-text-stroke: 2px var(--pink); /* width and color */
  font-size: 2.8rem;
  letter-spacing: 1rem;
  text-indent: 1rem;
  margin-bottom: 1.5rem;
}
a:hover {
  text-decoration: none;
}
.background-image {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

body:not(.landing) .background-image {
  filter:brightness(0.5);
}
.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 130%;
  transform: translate(-50%, -50%) rotate(-45deg);
  max-width: 1500px;
}
.releasedate {
  margin-top: 2rem;
  position: absolute;
  bottom: 1rem;
  width: 100%;
  padding: 0 1rem;
}
.logo path, .releasedate path {
  fill: var(--yellow);
  stroke: var(--pink);
  opacity: 0.3;
}
body.landing .logo path, .releasedate path {
  opacity: 1;
}
.artwork {
  max-width: 756px;
  margin: auto;
}

@keyframes blendinout {
  0%   {opacity: 0;}
100%   {opacity: 1;}
}
.blendinout {
  opacity: 0;
  animation-name: blendinout;
  animation-delay: 1s;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

/* -------------------- Main Content END -------------------- */

/* -------------------- Shows -------------------- */
ul.shows {
  list-style: none;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 0;
  margin: 0;
  text-align: center;
}

ul.shows > li {
  margin-bottom: 1rem;
}

ul.shows > li:last-of-type {
  margin-bottom: 0;
}

ul.shows > li div {
  display: inline-block;
}
ul.shows > li div.date {
  position: relative;
  font-size: 60%;
  display: block;
  margin-left: 0;
}
ul.shows > li div.options {

  display: flex;
  justify-content: center;
}
ul.shows > li div.options > div {
  flex-grow: 1;
  margin: 0 1rem;
  background-color: var(--yellow);
  font-size: 80%;
  color: black;
}

ul.shows > li a .date {

}
/* -------------------- Shows END -------------------- */
@media (max-width: 767.98px) {
  h2 {
    font-size: 2.5rem;
  }

}
@media (max-width: 575.98px) {
  .content-inner {
    width: 100%;
  }
  h2 {
    font-size: 2rem;
  }
  header nav > ul > li > a, ul.socialmedia>li a, ul.shows > li a {
    -webkit-text-stroke: 1px transparent; /* width and color */
    font-size: 1rem;
  }
  header nav > ul > li > a {
    font-size: 1.2rem;
  }
  ul.shows > li a {
    text-shadow: var(--yellow) 0px 0px 2px;
    font-size: 1.5rem;
  }
  header ul.socialmedia {
    width: initial;
  }
  header ul.socialmedia>li {
    flex-grow: initial;
    text-align: initial;
  }
  main#content {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
  body.landing main#content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
  }
}