/*--------------------------------
FONTS
--------------------------------*/

@font-face {
  font-family: "montserrat";
  src: url(../fonts/Montserrat-VariableFont_wght.ttf); /* https://fonts.google.com/specimen/Montserrat */
}

@font-face {
  font-family: "delicious";
  src: url(../fonts/DeliciousHandrawn-Regular.ttf); /* https://fonts.google.com/specimen/Delicious+Handrawn */
}

/*--------------------------------
/*--------------------------------
  VARIABLES
  --------------------------------*/
:root {
  /* CSS variable functionality adapted from https://www.w3schools.com/css/css3_variables.asp */
  /* Defining colors to use for the application */
  --primary-color: #008e9d;
  --secondary-color: #2e4268;
  --black: #111;
  --white: #fff;
  --off-white: #eee;
  --darkgrey: #222;
  --lightgrey: #cccccc;
  --green: lightgreen;
  --red: red;
  --yellow: yellow;
}

/*--------------------------------
  GENERAL STYLES
  --------------------------------*/
* {
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: montserrat, Verdana, sans-serif;
  color: var(--white);
}

body {
  font-size: 14px;
  background: linear-gradient(var(--secondary-color), var(--primary-color));
}

h2 {
  padding-top: 2vh;
}

p {
  padding: 1vh 0;
}

a {
  text-decoration: none;
}

a:hover,
a:hover i {
  color: var(--secondary-color);
}

li {
  list-style: none;
}

button {
  color: var(--darkgrey);
  padding: 0.5vh;
  margin-top: 1vh;
  border-radius: 7px;
}

/*--------------------------------
  MAIN LAYOUT
  --------------------------------*/
main {
  padding: 0 5vw;
  height: 85vh;
  max-width: 1000px;
  margin: 0 auto;
  transition: all 1s;
  overflow: hidden;
}

header,
footer {
  font-size: 2vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

header {
  height: 10vh;
  background-color: var(--primary-color);
  transition: all 1s;
}

footer {
  height: 5vh;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em 0;
}

#countdown-area {
  height: 5vh;
  min-height: 15px;
}

#options-area {
  max-height: 63vh;
  padding: 10px;
  border-radius: 7px;
  background: linear-gradient(var(--white), var(--lightgrey));
  overflow: auto;
}

@media only screen and (max-height: 400px) {
  #options-area {
    max-height: 40vh;
  }
}

@media only screen and (min-width: 400px) {
  main > * {
    margin-top: 1vh;
  }
}

@media only screen and (min-width: 700px) {
  main > * {
    margin-top: 2vh;
  }
}

@media only screen and (min-width: 700px) and (min-height: 900px) {
  main > * {
    margin-top: 5vh;
  }
}
/*--------------------------------
  FLEXBOX AND GRID LAYOUT STYLES
  --------------------------------*/
/* flex-box settings for centering contents horizontally and vertically */
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Grid layout for instrument tiles. */
/* Solution found at: https://stackoverflow.com/questions/54927180/css-grid-square-layout */
.grid-container {
  display: grid;
  gap: 1vh;
}

.grid-layout-1 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-layout-2 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-layout-3 {
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (min-width: 400px) {
  .grid-layout-1 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-layout-2 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-layout-3 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media only screen and (min-width: 700px) {
  .grid-layout-1 {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-layout-2 {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid-layout-3 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.grid-item {
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  transition: all 0.05s ease-in;
}

/*--------------------------------
  ADDITIONAL STYLES
  --------------------------------*/
/* Hide header on small screens */
@media only screen and (max-height: 700px) {
  .header-hidden {
    margin-top: -9vh;
  }

  .header-hidden:hover {
    margin-top: 0;
  }

  main {
    height: 94vh;
  }

  #main-index {
    height: 85vh;
  }

  .header-hidden:hover + main {
    height: 85vh;
  }
}

.large-text {
  font-size: 150%;
}

.select-level li {
  margin: 1vh 0;
}

h2.welcome {
  margin-top: 5vh;
}

.start-game-button {
  height: 5em;
  width: 5em;
  position: absolute;
  /* Place button at the center. Source: https://www.w3schools.com/css/css_align.asp#gsc.tab=0 */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 5px var(--darkgrey);
}

#start-game-wrapper {
  width: 100%;
  height: 50vh;
  background: url("../images/gameplay-image-mobile.jpg") no-repeat center center / cover;
  border: 7px solid var(--white);
  border-radius: 20px;
  position: relative;
}

@media only screen and (min-width: 400px) {
  #start-game-wrapper {
    background-image: url("../images/gameplay-image.jpg");
    border-width: 10px;
  }
}

.level-list-item {
  flex: 100%;
}

.level-list-item figure {
  margin: 0 10vw;
  padding: 2vh;
  border-radius: 20px;
}

@media only screen and (min-width: 650px) {
  .level-list-item {
    flex: 33%;
  }

  .level-list-item figure {
    margin: 0;
  }
}

.selected-item figure {
  background-color: rgba(215, 223, 223, 0.5);
}

#score-area p {
  flex: 100%;
}

.instrument-tile {
  position: relative;
  background-size: 100% 100%;
  background-position: center center;
  overflow: visible;
}

.instrument-tile .item-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0);
  text-shadow: 0 0 2px var(--black);
  transition: all 0.05s ease-in;
}

.correct-item {
  border: 3px solid var(--green);
}

.correct-item .item-content {
  background-color: rgba(0, 255, 0, 0.3);
}

.wrong-item {
  animation: shake 0.4s;
}

/* Source for animation: https://css-tricks.com/snippets/css/shake-css-keyframe-animation */
@keyframes shake {
  10%,
  90% {
    transform: translate(-1%);
  }

  20%,
  80% {
    transform: translate3d(1%, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-3%, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(3%, 0, 0);
  }
}

.wrong-item .item-content {
  background-color: rgba(255, 0, 255, 0.3);
}

.score-float {
  position: absolute;
  top: 20%;
  opacity: 0;
  font-family: delicious, "Courier New", Courier, monospace;
  font-size: 200%;
  transition: transform 2s, opacity 1s;
  text-shadow: 0 0 2px var(--darkgrey);
}

.visible-float {
  opacity: 1;
}

.large-float {
  transform: translate(20px, -20px) scale(2, 2);
}

.progress-bar-frame {
  width: 100%;
  height: 50%;
  max-height: 50px;
  border: 1px solid var(--black);
}

.progress-bar {
  width: 100%;
  height: 100%;
  background-color: var(--green);
  transition: all 9000ms linear;
}

.progress-bar-empty {
  width: 0%;
  animation: turn-red 9000ms;
}

@keyframes turn-red {
  0% {
    background-color: var(--green);
  }

  80% {
    background-color: var(--yellow);
  }

  100% {
    background-color: var(--red);
  }
}

/*--------------------------------
  POPUP STYLES
  --------------------------------*/
#popup-area {
  display: none;
}

#popup-content {
  position: absolute;
  /* Place popup at the center. Source: https://www.w3schools.com/css/css_align.asp#gsc.tab=0 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  min-width: 300px;
  max-width: 800px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 1px 1px 2px var(--darkgrey);
  padding: 2vh 2vw;
  z-index: 3;
}

#popup-overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

#track-info {
  border: 1px solid var(--white);
  border-radius: 20px;
  width: fit-content;
  margin: 1vh auto;
  padding: 1vh 5vw;
}

#track-info td {
  text-align: left;
  padding: 3px 1vw;
}

/*--------------------------------
  IMAGE STYLES
  --------------------------------*/
.select-level img {
  width: auto;
  height: 10vh;
  border-radius: 7px;
}

.level-image {
  width: auto;
  height: 25vh;
  max-height: 256px;
  border-radius: 7px;
}

@media only screen and (min-width: 700px) {
  .select-level img {
    height: 15vh;
  }
}

.instrument-img {
  display: block;
  width: 100%;
  height: 100%;
}

.composer-image {
  width: auto;
  height: 20vh;
  padding: 1vh;
  border-radius: 10%;
}