/* external CSS file for the Student Wrapped project. This is loaded in every page*/

@font-face {
  font-family: "Mantinia";
  src: url("../fonts/Mantinia_Regular.otf") format("opentype");
}

@font-face {
  font-family: "SpotifyMixRegular";
  src: url("../fonts/SpotifyMix-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "SpotifyMixBold";
  src: url("../fonts/SpotifyMix-bold.woff2") format("woff2");
}

html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: rgb(20, 20, 20);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

main.container-phone {
  border: 10px solid black;
  max-width: 400px;
  max-height: 800px;
  width: 100%;
  height: 100%;
  background: #1d1d1d;
  border-radius: 50px;
  outline: 2px solid rgb(184, 184, 184);
  z-index: 999;
  position: relative;
  transition: background 0.2s ease;

  &.power-off {
    background: black;
  }

  /* Phone header */

  header.header {
    width: 100%;
    height: 50px;
    max-height: 50px;
    z-index: 9;
    position: relative;

    .dynamic-island {
      width: 100px;
      height: 30px;
      background: black;
      border-radius: 6767px;
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* Phone header end */

  /* Phone content */

  .phone-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 75px);
    border-radius: 15px;
    transition: opacity 0.2s ease;

    &.power-off {
      display: none;
    }

    nav.instragrambar-wrapper {
      width: 100%;
      height: 20px;
      max-height: 20px;
      z-index: 9;
      position: relative;

      ul.instragrambar-inner {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        list-style-type: none;
        margin: 0;
        padding: 5px 15px 0;
        gap: 10px;

        li.instragrambar-item {
          width: 100%;
          height: 5px;
          border-radius: 6767px;
          background-color: white;
          opacity: 0.5;

          &.active {
            opacity: 1;
          }

          a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
          }
        }
      }
    }

    .topbar-info-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 15px;
      color: white;

      .personal-info-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;

        .profile-picture {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          object-fit: cover;
        }

        .name {
          font-size: 16px;
          font-weight: bold;

          span {
            color: #f35279;
          }
        }
      }

      .controls-container {
        display: flex;
        gap: 10px;

        button {
          width: 30px;
          height: 30px;
          border: none;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          background: none;
        }

        .mutemusic,
        .stopanimation {
          color: white;
        }
      }
    }
  }

  /* Phone content end */

  /* Phone buttons */

  .phone-button {
    border-radius: 2px 0 0 2px;
    background-color: rgb(184, 184, 184);
    width: 5px;
    max-width: 5px;
    position: absolute;
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .actionbutton {
    height: 25px;
    top: 150px;
    left: -15px;
  }

  .volumeup {
    height: 60px;
    top: 200px;
    left: -15px;
  }

  .volumedown {
    height: 60px;
    top: 275px;
    left: -15px;
  }

  .poweron {
    height: 80px;
    width: 5px;
    top: 200px;
    right: -15px;
    border-radius: 0 2px 2px 0;
    position: absolute;
    background-color: rgb(184, 184, 184);
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Phone buttons end*/
}

/* Fade-in */

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.fade-in:nth-of-type(1) {
  animation-delay: 0.1s;
}

.fade-in:nth-of-type(2) {
  animation-delay: 0.3s;
}

.fade-in:nth-of-type(3) {
  animation-delay: 0.5s;
}

.fade-in:nth-of-type(4) {
  animation-delay: 0.7s;
}

.fade-in:nth-of-type(5) {
  animation-delay: 0.9s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade-in end */

/* Move image */

.moveimage {
  animation: moveImage 0.5s ease forwards;
}

@keyframes moveImage {
  0% {
    bottom: -350px;
    left: 50%;
  }

  100% {
    bottom: 20px;
    left: 15%;
  }
}

/* Move image end */