@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

* {
  margin: 0;
  font-family: "Nunito";
  color: #d3d3d3;
}

body {
  background-color: #434343;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.n {
  color: #48a6ce;
  text-decoration: none;
}
a.n::after {content: " \1F517";}

#banner {
  background: url('img/background1.gif');
  background-repeat: no-repeat;
  background-size:cover;
  height: 100vh;
  width: 220vh;

  #ycat{
    position: absolute;
    top: 20%;
    left: 40%;
    background: 50% 100% / 50% 50% no-repeat
    radial-gradient(ellipse at bottom, #fff, transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 10vw;
    animation: glow 2500ms linear infinite 2000ms;
    z-index: 1;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
  }

  #s-ycat{
    position: absolute;
    top: 20%;
    left: 40%;
    background: #282828;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 10vw;
    -webkit-text-stroke-width: 2px;
              -webkit-text-stroke-color: black;
    z-index: 1;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
  }

  #info {
    position: absolute;
    top: 40%;
    left: 28%;
    background-color: rgb(140, 123, 110, 0.5);
    box-shadow: 2vh 2vh rgb(40, 40, 40, 0.5);
    padding: 2vh;
    border: 0.5vh solid #201e18;
    border-radius: 30px;
    height: 40%;
    width: 40%;
    overflow: hidden;
    font-size: 3vh;

    #dc-status img, #dc-activity-placeholder, #dc-song-placeholder {
      margin-left: 5vh;
      margin-right: 2vh;
    }

    #dc-refresh {
      padding: 1vh;
      position: absolute;
      bottom: -0.4vh;
      right: -0.4vh;
      background-color:#282828;
      box-shadow: none;
      border: 0.5vh solid #201e18;
    }
  }
}


#intro-wrap.intro-bye-bye {

  #intro-cat{
    background: url('img/intro-cat-click.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  #intro-cat:hover{
    background: url('img/intro-cat-click.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

#intro-wrap{
  background-color: #282828;
  position: absolute;
  height: 100vh;
  width: 218.5vh;
  z-index: 99;
  p{
    position: inherit;
    top: 25%;
    left: 37%;
    font-size: 5vh;
  }

  #intro-cat{
    position: inherit;
    top: 30%;
    left: 37%;
    background: url('img/intro-cat.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 3vh;
    height: 50vh;
    width: 50vh;
  }

  #intro-cat:hover{
    background: url('img/intro-cat-hover.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@keyframes intro-byebye {
  from{opacity: 1;}
  to{opacity: 0;}
}

@keyframes glow {
  40% {
    text-shadow: 0 0 10px #fff;
  }
}