@font-face {
  font-family: "ABeeZee";
  src: url("fonts/ABeeZee-Regular.ttf") format("truetype");
  font-weight: light;
}

@font-face {
  font-family: "Movement-L";
  src: url("fonts/Movement-IndirectThin.woff2") format("woff2");
  font-weight: light;
}

@font-face {
  font-family: "Movement-DL";
  src: url("fonts/Movement-DirectThin.woff2") format("woff2");
  font-weight: bolder;
}

@font-face {
  font-family: "Movement-IndirectBlack";
  src: url("fonts/Movement-IndirectBlack.woff2") format("woff2");
  font-weight: bolder;
}

:root {
  --color-black: #00001a;
  --color-graylight: #edecec;
  --color-graydark: #8a8a8a;
  --color-blue: #4f1dff;
  --color-bluedark: #000086;
  --color-bluelight: #8f8fff;
  --color-lightpink: #e5c0ff;
  --color-score: #e5c0ff;
  --color-pink: #da70d6d4;
  --body-font-text: "ABeeZee";
  --body-font-IB: "Movement-IndirectBlack";
  --body-font-L: "Movement-L";
  --title-fontsize: calc(32px + 1.5vw);
  --body-fontsize: calc(14px + 6 * (100vw - 320px) / 1600);
  --body-fontsize-s: calc(11px + 6 * (100vw - 320px) / 1600);
  --bg-fontsize: 60vw;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  color: var(--color-bluedark);
  background: var(--color-graylight);
  margin: 0rem 0rem 2rem 0rem;
}

h1 {
  font-family: var(--body-font-IB);
  font-size: var(--title-fontsize);
  text-align: center;
  /* animation: titleAnim ease-in-out 3s;
  animation-iteration-count: 1; */
}

@keyframes titleAnim {
  0% {
    text-shadow: 0.1rem 0.1rem 0.1rem var(--color-bluedark);
  }
  20% {
    text-shadow: 0.1rem 0.1rem 0.1rem var(--color-bluedark);
    color: var(--color-graylight);
  }
  90% {
    text-shadow: 0.1rem 0.1rem 0.1rem var(--color-bluedark);
  }
}

.numbers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
  width: 100%;
  margin: 0% 0% 5% 0%;
}

.numbers a {
  font-family: var(--body-font-L);
  font-weight: bold;
  margin: 0rem -2.5rem;
  text-align: center;
  border: solid 0.15rem var(--color-pink);
  border-radius: 5rem;
  animation: changeBorderRadius 10s;
  animation-iteration-count: 2;
  padding: 2rem;
  text-decoration: none;
}

.numbers a:hover {
  border: solid 0.15rem var(--color-graylight);
  box-shadow:
    0 1px 1px var(--color-pink),
    0 1px 25px var(--color-pink);
  background-color: var(--color-graylight);
  z-index: 999;
}

.numbers a:visited {
  border: solid 0.15rem var(--color-bluelight);
  color: var(--color-bluelight);
}

@keyframes changeBorderRadius {
  0% {
    border-top-left-radius: var(--top-left-radius);
    border-top-right-radius: var(--top-right-radius);
    border-bottom-right-radius: var(--bottom-right-radius);
    border-bottom-left-radius: var(--bottom-left-radius);
  }
  100% {
    border-radius: 5rem;
  }
}

p.colophon {
  font-family: var(--body-font-text);
  font-size: var(--body-fontsize);
  padding-top: 2rem;
}

p.colophon a,
p.colophon a:visited {
  font-weight: bolder;
  font-family: var(--body-font-L);
  font-size: var(--body-fontsize);
  color: var(--color-bluedark);
  text-decoration: none;
}

p.colophon a:hover {
  text-decoration: underline;
}

#user {
  display: flex;
  width: 90%;
  flex-direction: column;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  padding: 0.5% 5%;
}

#user p {
  /* width: 50%;*/
  font-family: var(--body-font-text);
  font-size: var(--body-fontsize);
  border-radius: 6rem;
}
#scroll,
#random {
  font-family: var(--body-font-L);
  color: var(--color-bluedark);
  border: solid 0.15rem var(--color-pink);
  border-radius: 5rem;
  animation: blinkbox 1s infinite alternate;
  cursor: pointer;
}

#scroll {
  margin: 0% 5%;
}

#random {
  display: block;
  position: absolute;
}

@keyframes blinkbox {
  0% {
    box-shadow: 0.5rem 0.25rem 1rem var(--color-pink);
  }
  100% {
    box-shadow: 0.1rem 0.1rem 0.25rem var(--color-pink);
  }
}

p.scrolling {
  /* position: fixed;
  top: 0;
  right: 0; */
  font-size: 2rem;
  opacity: 0.8;
  color: var(--color-pink);
  z-index: 1000;
  pointer-events: none;
}

h4 {
  text-align: center;
  font-family: var(--body-font-L);
}

.moreinfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
  width: 100%;
  margin: 0% 0% 5% 0%;
}

.moreinfo a {
  font-family: var(--body-font-L);
  font-weight: bold;
  margin: 0rem -2.5rem;
  text-align: center;
  color: var(--color-graylight);
  background-color: var(--color-pink);
  border: solid 0.15rem var(--color-pink);
  border-radius: 5rem;
  animation: changeBorderRadius 10s;
    animation-iteration-count: 1;
  animation-iteration-count: 2;
  padding: 2rem;
  text-decoration: none;
}

.moreinfo a:hover {
    background-color: var(--color-graylight);
    color: var(--color-blue);
}

/***************** SCORES DAY-TO-DAY ****************/

h3 {
  text-align: center;
  font-family: var(--body-font-IB);
}

p {
  font-family: var(--body-font-text);
  font-weight: normal;
  color: var(--color-bluedark);
  margin: 0% 10%;
}

ol {
  margin: 2.5% 10% 2.5% 10%;
  width: 80%;
  background: #e5c0ff54;
  border-radius: 5rem;
  padding: 5% 10%;
}

li {
  font-family: var(--body-font-text);
  font-weight: bolder;
  font-size: 1.5rem;
  list-style-type: "↷ ";
  color: var(--color-bluedark);
}

li .small {
  font-size: 0.85rem;
}

.back {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
  z-index: 999;
}

.back a,
.back a:visited {
  font-family: var(--body-font-L);
  text-align: center;
  margin: 0.5% 2%;
  padding: 1rem 1rem 1.25rem 1rem;
  color: var(--color-bluedark);
  border: solid 0.1rem var(--color-pink);
  background-color: transparent;
  border-radius: 5rem;
  text-decoration: none;
}

.back a:hover {
  background-color: var(--color-lightpink);
  border: solid 0.1rem var(--color-lightpink);
}

a.quest,
a.quest:visited {
  font-family: var(--body-font-L);
  color: var(--color-bluedark);
  border-bottom: solid 0.5rem var(--color-pink);
  text-decoration: none !important;
  z-index: 999;
}

a.quest:hover {
  border-bottom: double 0.5rem var(--color-bluedark);
  text-decoration: none;
  color: var(--color-pink);
}

.dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 5rem;
  background-color: var(--color-pink);
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}

body.background-animation,
html .background-animation {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--color-pink);
  animation: colorAnimation ease-in-out 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

@keyframes colorAnimation {
  0% {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 50%;
  }
}
.add,
.remove,
.substitute,
.scale,
.add,
.freeze {
  width: auto;
  height: auto;
  transition: background-color 0.3s ease;
}

.pink {
  box-shadow:
    inset 0px 0px 35px var(--color-pink),
    0 0px 5px var(--color-pink);
  border: solid  0.15rem transparent !important;
}

/***************** PUBLIC VERSION ****************/

.public .numbers a {
  margin: 0.5rem 0rem;
}

.own p {
  margin: 2.5% 10% !important;
}

.boxes {
  margin: 3% 5%;
  font-family: var(--body-font-L);
  font-weight: bold;
}

label {
  margin-right: 1.25rem;
}

input[type="text"] {
  border: none;
  border-bottom: 2px solid var(--color-bluedark);
  background: #e5c0ff54;
  border-radius: 5rem;
  width: 100%;
  font-family: var(--body-font-text);
  font-weight: bolder;
  font-size: 1.5rem;
  color: var(--color-bluedark);
  padding: 0.5rem;
  margin: 0.5rem;
}

.allvocab {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  margin: 1.5% 5%;
}

div.userdata,
div.choreovocab {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0% 0.5%;
  width: 45%;
}

p.userdata,
p.choreovocab {
  padding: 0.25rem !important;
  margin: 0.15rem !important;
  border-radius: 5rem !important;
  height: fit-content;
}

p.userdata,
#userdataEg {
  border: dotted 0.1rem var(--color-blue);
  border-radius: 5rem !important;
}
p.choreovocab,
#choreovocabEg {
  border: dashed 0.15rem var(--color-pink);
  border-radius: 5rem !important;
}

.captiongray {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5rem;
  border: dotted 0.15rem var(--color-graydark);
}

.captionpink {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: dashed 0.15rem var(--color-pink);
  border-radius: 5rem;
}

.example {
  background: #e5c0ff54;
  width: fit-content;
  padding: 0.25rem;
  border-radius: 5rem;
  opacity: 0.8;
}

.randScore {
  display: inline;
  font-family: var(--body-font-L);
  font-size: var(--body-fontsize-s);
  text-align: center;
  margin: 0.1rem;
  padding: 0.1rem;
  color: var(--color-bluedark);
  background-color: var(--color-lightpink);
  opacity: 0.7;
  border-radius: 5rem;
  text-decoration: none;
  border: solid 0.1rem var(--color-pink);
}

.moveseq {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.5% 5%;
  border-radius: 15rem;
}

img.move {
  max-width: 20%;
  border-radius: 15rem;
}

.randScore:hover {
  background: transparent;
}
.score11 {
  margin: 2.5% 10% 2.5% 10%;
}
.score11 img {
  max-width: 33%;
  max-height: auto;
  border-radius: 200px;
}
.score11 img:hover {
  border-radius: 0px;
}
.resourcesmain a:visited, .aboutmain a:visited {
  color: var(--color-bluedark);
}

.resourcesmain, .aboutmain {
  margin: 0.5% 15%;
 }

input[type="checkbox"] {
  accent-color: var(--color-pink);
  color: var(--color-pink);
  appearance: checkbox !important;
  background-color: var(--color-graylight);
  border: solid 0.05rem var(--color-pink) !important;
  border-radius: 20rem;
  cursor: pointer;
}

input[type="checkbox"]:focus {
  background-color: var(--color-pink);
}
.wrapper {
  display: flex;
  flex-direction: row;
}
.wrapper .boxes {
  width: 5%;
}
.wrapper .numbers {
  width: 95%;
}
/***************** MOBILE ****************/

@media screen and (min-width: 0px) and (max-width: 460px) {
  .public .numbers {
    /*  flex-direction: column; */
    flex-direction: row;
    justify-content: center;
  }
  .public .numbers a {
    margin: 0.25rem;
    width: fit-content;
    padding: 1rem;
  }
  .allvocab {
    width: 95%;
    margin: 1.5% 2.5%;
  }
  .score11 img {
    max-width: 31%;
  }
  a.quest {
    line-height: 1.5rem;
  }
  .resourcesmain, .aboutmain {
  margin: 0.5% 5%;
 }
 .moreinfo a {
  margin: 0.52rem;
  padding: 1rem;
 }

}