.navbar
{
    top: 0;
    left: 0;

    padding: 0.6em;
    gap: 0.6em;

    width: 100%;
    height: 4em;

    background-color: var(--backgroundcolor-1);

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: fixed;
    z-index: 1;
}

    .navbar-left
    {
        width: fit-content;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

        .search-track-bar
        {
            padding: 0.6em;

            width: 100%;
            height: 100%;

            border-radius: var(--borderradius-square);
            border: 1px solid var(--backgroundcolor-3);
            outline: none;

            background-color: var(--backgroundcolor-1);

            font-size: 1.2em;
            font-family: sans-serif;
            color: var(--textcolor-4);
        }

    .navbar-right
    {
        gap: 0.6em;

        width: fit-content;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

        .theme-button
        {
            padding: 1em;

            height: 100%;
            aspect-ratio: 1/1;

            border-radius: var(--borderradius-circle);
            border: none;
            outline: none;
            
            background-color: var(--backgroundcolor-1);

            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-button:hover {background-color: var(--backgroundcolor-2);}

            .lightmode-theme-icon
            {
                height: 100%;
                aspect-ratio: 1/1;

                background-color: var(--textcolor-4);

                -webkit-mask: url(../image/sunIcon.svg) no-repeat center / contain;
                mask: url(../image/sunIcon.svg) no-repeat center / contain;
            }

            .darkmode-theme-icon
            {
                height: 100%;
                aspect-ratio: 1/1;

                background-color: var(--textcolor-4);

                -webkit-mask: url(../image/moonIcon.svg) no-repeat center / contain;
                mask: url(../image/moonIcon.svg) no-repeat center / contain;
            }

        .upload-track-button
        {
            padding: 1em;

            height: 100%;
            aspect-ratio: 1/1;

            border-radius: var(--borderradius-circle);
            border: none;
            outline: none;

            background-color: var(--backgroundcolor-1);

            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-track-button:hover {background-color: var(--backgroundcolor-2);}

            .lightmode-upload-track-icon
            {
                height: 100%;
                aspect-ratio: 1/1;

                background-color: var(--textcolor-4);

                -webkit-mask: url(../image/uploadIcon.svg) no-repeat center / contain;
                mask: url(../image/uploadIcon.svg) no-repeat center / contain;
            }

            .darkmode-upload-track-icon
            {
                height: 100%;
                aspect-ratio: 1/1;

                background-color: var(--textcolor-4);

                -webkit-mask: url(../image/uploadIcon.svg) no-repeat center / contain;
                mask: url(../image/uploadIcon.svg) no-repeat center / contain;
            }

.sidebar
{
    gap: 0.6em;

    width: 100%;
    height: calc(100% - 4em);

    color: var(--textcolor-4);

    display: flex;
    justify-content: center;
}

  .alarm-section
  {
    gap: 0.6em;

    width: 100%;
    max-width: 30em;
    height: calc(100vh - 4em);

    background-color: var(--backgroundcolor-4);

    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;

    scroll-behavior: smooth;
    &::-webkit-scrollbar {width: 0.6em; background-color: var(--backgroundcolor-1);}
    &::-webkit-scrollbar-thumb {border-radius: var(--borderradius-square); background-color: var(--backgroundcolor-a); cursor: pointer;}
  }

    .alarm-section-top
    {
      z-index: 1;

      padding: 0.6em;
      gap: 0.6em;

      width: 100%;
      max-width: 15em;
      height: 100%;
      max-height: fit-content;

      border-radius: var(--borderradius-square);
      background-color: color-mix(in oklch, var(--backgroundcolor-2) 60%, transparent);

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      position: fixed;

      box-shadow: 0 0.25em 0.6em rgba(0,0,0,0.25);
      -webkit-backdrop-filter: blur(0.3em);
      backdrop-filter: blur(0.3em);
    }

  .track-section
  {
    gap: 0.6em;

    width: 100%;
    max-width: 30em;
    height: calc(100vh - 4em);

    background-color: var(--backgroundcolor-4);

    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;

    scroll-behavior: smooth;
    &::-webkit-scrollbar {width: 0.6em; background-color: var(--backgroundcolor-1);}
    &::-webkit-scrollbar-thumb {border-radius: var(--borderradius-square); background-color: var(--backgroundcolor-a); cursor: pointer;}
  }

      .user-controls-layout
      {
          z-index: 1;

          padding: 0.6em;
          gap: 0.6em;

          width: 100%;
          max-width: 15em;
          height: 100%;
          max-height: fit-content;

          border-radius: var(--borderradius-square);
          background-color: color-mix(in oklch, var(--backgroundcolor-2) 60%, transparent);

          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: center;
          position: fixed;

          box-shadow: 0 0.25em 0.6em rgba(0,0,0,0.25);
          -webkit-backdrop-filter: blur(0.3em);
          backdrop-filter: blur(0.3em);
      }

          .user-controls-layout-top
          {
              gap: 0.6em;

              width: 100%;
              height: fit-content;

              display: flex;
              align-items: center;
              justify-content: center;
          }

              .play-pause-button
              {
                  padding: 0.6em; 
                  
                  width: 5em;
                  height: 2.5em;

                  border-radius: var(--borderradius-square);
                  border: none;
                  outline: none;

                  color: var(--textcolor-3);
                  background-color: var(--backgroundcolor-3);

                  cursor: pointer;
              }

              .play-pause-button:hover {background-color: var(--backgroundcolor-4);}

          .user-controls-layout-bottom
          {
              padding: 0.4em 0 0.2em 0;
              gap: 1.2em;

              width: 100%;
              height: fit-content;

              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
          }

              #volumeBar, #seekBar
              {
                  outline: none;

                  background: var(--backgroundcolor-3);
                  border-radius: var(--borderradius-square);

                  -webkit-appearance: none;
                  appearance: none;
              }

              #volumeBar::-webkit-slider-thumb, #seekBar::-webkit-slider-thumb
              {
                  width: 1.2em;
                  height: 1.2em;

                  border-radius: var(--borderradius-square);
                  border: none;
                  cursor: pointer;

                  background: var(--backgroundcolor-a);

                  -webkit-appearance: none;
                  appearance: none;
              }

              #volumeBar::-moz-range-thumb, #seekBar::-moz-range-thumb, #volumeBar::-ms-thumb, #seekBar::-ms-thumb
              {
                  border-radius: 50%;
                  border: none;

                  background: var(--backgroundcolor-a);

                  cursor: pointer;
              }

              #volumeBar::-ms-thumb, #seekBar::-ms-thumb {background: var(--backgroundcolor-a);}

      .user-playlist-layout
      {
          padding: 0.6em;
          gap: 0.6em;

          width: 100%;
          height: fit-content;

          display: flex;
          flex-direction: column;
          align-items: center;
      }

          .no-results-layout
          {
              color: var(--textcolor-4);
              background-color: var(--backgroundcolor-1);

              display: flex;
              justify-content: center;
              align-items: center;

              cursor: default;
          }

          .no-results-layout:hover {background-color: var(--backgroundcolor-1);}

          li
          {
              padding: 0.6em;
              gap: 0.6em;

              width: 100%;
              max-width: 35em;

              color: var(--textcolor-4);
              word-break: break-all;
              border-radius: var(--borderradius-square);
              background-color: color-mix(in oklch, var(--backgroundcolor-2) 60%, transparent);

              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              justify-content: space-between;
              position: relative;
              cursor: pointer;
          }

          @supports (background-color: color-mix(in oklch, var(--backgroundcolor-3) 60%, transparent)) 
          {
              li:hover {background-color: color-mix(in oklch, var(--backgroundcolor-3) 60%, transparent);}
          }

              .delete-button-wrapper
              {
                  gap: 0.6em;

                  width: 100%;
                  height: fit-content;

                  display: flex;
                  align-items: center;
                  flex-direction: row-reverse;
              }

                  .delete-button
                  {
                      padding: 0.6em; 

                      width: 5em;
                      height: 2.5em;

                      border: none;
                      outline: none;

                      color: var(--textcolor-a);
                      border-radius: var(--borderradius-square);
                      background-color: var(--backgroundcolor-a);

                      cursor: pointer;
                  }

                  .delete-button:hover {background-color: var(--backgroundcolor-b);}