:root
{
    --magic-rainbow-color-0: hsla(0, 83%, 36%, 0.527);
    --magic-rainbow-color-1: hsla(115, 72%, 32%, 0.541);
    --magic-rainbow-color-2: hsla(221, 74%, 26%, 0.575);
}

body
{
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
    background-image: url("/images/mainimages/starsps2.png");
}

.body2
{
    background-image: linear-gradient(to right, rgba(204, 204, 204, 1) , rgb(65, 65, 65));
}

h1 {
    color: #cbd74d;
    text-shadow: 1px 1px 3px #cbd74d;
    font-size: 36pt;
}


h2 {
    color: #4b4b4b;
    font-size: 30pt;
}


.menu-text {
    text-align: center;
    font-weight: normal;
    letter-spacing: 5px;
    -webkit-text-stroke: 5px black;
    paint-order: stroke fill;
    filter: blur(1px);
    margin-top: 33px;
    margin-bottom: 33px;
}

a {
    color: #4b4b4b;
    font-size: 30pt;
    display: block;
    text-decoration: none;
}

.header-inline {
    display: inline-block;
    color: rgb(209, 209, 209);
    -webkit-text-stroke: 5px black;
    paint-order: stroke fill;
    filter: blur(1px);
}

.hover-text:hover
{
    color: #4f9fcd;
}

.menu-wrap {
    height: 100%;
    min-height: 100%;
    font-size: 0.0001px;            /* [1] */ 
  text-align: center;             /* [2] */
  &:before {                      /* [3] */
    content: '';                  /* [3] */
    display: inline-block;        /* [4] */
    vertical-align: middle;       
    height: 100%;                 /* [5] */
  }

    
}

.vertical-align {
    display: inline-block;          /* [6] */
    text-align: left;               /* [7] */
    font-size: 1rem;                /* [8] */
    vertical-align: middle;
}

.control-text {
    display: inline-block !important;
    color: #868686;
}

.control-icon {
    max-width: 50px;
    vertical-align: bottom;
    filter: blur(1px);
}

.selection-row {
    margin-top: 50px;
}

.game-icon {
    max-width: 100px;
}

.game-icon:hover{
    filter: drop-shadow(0 0 2rem rgb(236, 236, 236));
    
}

.yellow {
    color: #cbd74d;
}

.album-container {
    width: 500px;
    height: 500px;
    border: #828ed1 2px solid;
    margin-left: 60px;
}

.song-container {
    transform: rotateY(20deg);
    -webkit-transform: rotateZ(-2deg) rotateY(30deg) rotateX(10deg);
    -ms-transform: rotateY(20deg);
    
}

.song-box {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    position: relative;
}

.song-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  z-index: -1;
  border: #828ed1 3px solid;
  box-shadow: 0 0 20px 5px #32428d;
  
}

.song-box:hover {
  transform: scale(1.3);
  translate: 10px -20px;
}

.song-info {
    color: white;
    font-size: 20pt;
    position: absolute;
    bottom: 0;
    right: 0;
}
    
.selsong-name {
    color: white;
    position: relative;
    font-size: 30pt;
    top: -45px;
    left: -45px;
    filter: blur(1px);
}

.selsong-artist {
    color: white;
    position: relative;
    font-size: 30pt;
    top: -45px;
    left: -45px;
    filter: blur(1px);
}

.memoryInfo {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        170deg,
        var(--magic-rainbow-color-0),
        var(--magic-rainbow-color-1),
        var(--magic-rainbow-color-2)
    );
    backdrop-filter: blur(5px);
    z-index: 20;
    top: 0;
    font-size: 32pt;
    padding: 100px 20px 20px 20px;
}

.memoryIcon {
    width: 80px;
    height: 80px;
    float: right;
}

.memoryRow {
    margin-bottom: 30px;
}
.memoryLeftText {
    text-align: right;
    padding-right: 20px;
}
.memoryRightText {
    text-align: left;
    padding-left: 20px;
}

.largerText {
    font-size: 52pt;
}

.smallerText {
    font-size: 20pt;
}

.hideClass {
  visibility: hidden;
}