@import url(../assets/fonts/fonts.css);

:root {
  --white: snow;
  --highlight: rgb(203, 203, 203);
  --dark: dimgray;

  --secret: navajowhite;

  --trans-short: all .s ease-in-out;
  --trans-long: all 1s ease-in-out;
}

html,
body,
div,
p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font-family: 'rubikregular';
  scrollbar-width: none;
}


html {
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
  line-height: 1.4;
  overflow: scroll;
  overflow-x: hidden;
  font-size: 1rem;

  /* cursor: url(../pointer/blue.cur), pointer; */
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: var(--thisColor);
}


.start {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 90dvh;
  justify-content: center;
  transition: var(--trans-long);
}

.startOff {
  height: 10dvh;
  transition: var(--trans-long);
}

h1 {
  margin-top: 0;
}

.things {
  width: 80dvw;
}

.things a {
  background-color: gainsboro;
  color: black;
  font-style: italic;
  border-radius: 100%;
  padding: 19px;
  text-decoration: navajowhite;
}


.playlist {
  width: 100dvw;
  height: 90vh;
  transform: translateY(100%);
  transition: var(--trans-long);
}

.playlistOn{
  transform: translateY(0%);
  transition: var(--trans-long);

}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50px 50px 0 0;
}

.hide {
  display: none;
}

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