* {
      font-family: 'Poppins';
}
main {
      padding: 150px 90px;
      font-family: 'Poppins';
      background: var(--light-shady-green);
}
label {
      padding: 12px 16px;
      font-size: 2.5rem;
      font-weight: 600;
}
a {
      text-decoration: none;
}

@media screen and (min-width:1020px) {
      #mainContent {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: 100%;
            margin-block: 20px;
            padding: 25px;
            background-color: rgb(68, 68, 97);
            border-radius: 16px;
            overflow: hidden;
      }
      #seperator {
            width: 75px;
      }
}
@media screen and (max-width:1019px) {
      #mainContent {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            margin-block: 20px;
            padding: 25px;
            background-color: rgb(68, 68, 97);
            border-radius: 16px;
            overflow: hidden;
      }
      #seperator {
            height: 25px;
      }
}

#sectionTitle {
      color: rgb(45, 45, 58, 1);
      text-shadow: 0 0 rgba(0,0,0,0);
      transition: .5s ease;
}
#sectionTitle:hover {
      color: rgb(45, 45, 58, .4);
      text-shadow: 1.2ex -.55ex  #f52c1e;
}
#mainContainer {
      height: max-content;
      margin-block: 60px;
}

#subChild {
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border-radius: 16px;
      font-family: 3rem;
      transition: .2s ease-in-out;
      /* overflow: hidden; */
}
#subChild object {
      height: 90px;
      pointer-events: none;
      transition: .25s ease-in-out;
      z-index: 2;
}
#subContent {
      position: absolute;
      display: grid;
      place-items: center;
      height: 100%;
      width: 100%;
      padding: 18px;
      text-align: center;
      backdrop-filter: blur(5px);
      /**/
      z-index: 2;
      cursor: default;
      opacity: 0;
      transition: .4s ease;
      overflow: hidden;
}
#subChild:hover {
      /* box-shadow: 0 0 7px 3px var(--shadow-better) ; */
}
#subChild:hover #subContent {
      opacity: 1;
}
#subChild:hover object {
      opacity: 0;
}
#subContent a {
      padding: 0;
      margin-top: 6px;
}
#subContent button {
      font-size: 1rem;
      font-weight: 600;
      border: none;
      outline: none;
      padding: 6px 9px;
      border-radius: 5px;
      color: white;
      background-color:  rgb(189, 44, 0, 0);
      cursor: pointer;
      transition: .2s ease;
}
#subContent button::after {
      content: '»';
      color: white;
      padding-left: 4px;
      font-size: 1rem;
}
#subContent button:hover {
      background-color:  rgba(0, 0, 0, .3);
}

/* INDIVIDUALS */

/* TITLE */
.pageTitle {
      display: flex;
      width: max-content;
      font-size: 4rem;
}
.pageTitle::before {
      content: '{?}';

}

/* VIDEO GAMES */

#gamesIcon {
      border-radius: 25px;
}

.containerGames {
}
/* #bgblur {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(6px);
} */
.DeadCells {
      background-image: url(/resource/profile/what-i-love/games/src/pc/deadcells/background1.jpg);
      background-size: cover;
      border-radius: 50px;
      height: 100%;
      width: 100%;
      overflow: hidden;
}
.PhantomRose {
      background-image: url(/resource/profile/what-i-love/games/src/mobile/phantomrose/background.jpg);
      background-size: cover;
      border-radius: 16px;
      height: 100%;
      width: 100%;
}

/* SUBJECT */
.containerSubject {

}
.contentSubject {

}
.subMath {
      background: var(--red-orange-gradient);
      height: 100%;
      width: 100%;
}
.subEnglish {
      background: var(--light-blue-gradient);
      height: 100%;
      width: 100%;
}
.subOther {
      background-color: rgb(45, 45, 58);
      height: 100%;
      width: 100%;
}

/* FOODS */
.containerFoods {
}

/* ACTIVITY */
.containerActivity {
}
.subCode {
      background: var(--dark-blue-gradient);
      height: 100%;
      width: 100%;
}
.subEdit {
      background: var(--great-purple);
      height: 100%;
      width: 100%;
}
/* SONGS */
.containerSongs {
}
.songsMain {
      display: flex;
      flex-direction: column;
}
.songsList {
      /* background-color: salmon; */
      width: 100%;
}
#seperator {
      width: 75px;
      height: 25px;
}
#songs {
      display: flex;
      justify-content: space-evenly;
      background-color: seagreen;
      border-radius: 10px;
}
#songs label {
      width: 100%;
      font-size: 20px;
}
.songsMore {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: rgb(45, 45, 58);
      border-radius: 10px;
}
.songsMore:hover label {
      color: rgb(43, 62, 236);
}
.songsMore:hover label::after {
      opacity: 1;
      right: 0;
      color: rgb(43, 62, 236);
}
.songsMore label {
      font-size: 20px;
      cursor: pointer;
      position: relative;
      color: royalblue;
      transition: .25s ease;
}
.songsMore label::after {
      position: absolute;
      right: 10px;
      content: '»';
      color: royalblue;
      font-size: 20px;
      opacity: 0;
      transition: .25s ease;
}