@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
        url('./fonts/Poppins-SemiBold.ttf') format('ttf'),
        url('./fonts/Poppins-SemiBold.woff2') format('woff2');
  }
  
  
  :root {
      --color-background: #0c0c0c;
      --color-text: #fff;
      --color-link: #ffffff;
      --color-link-hover: #adadad;
      --color-header-background: #262626;
  }
  
  html {
      color: var(--color-text);
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      line-height: 1.5;
      scroll-behavior: smooth;
      background: url('./back.png') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  body {
      font-family: 'Poppins', sans-serif;
      height: 100%;
      margin: 0;
      color: var(--color-text);
      overflow-x: hidden;
  }
  
  .container {
      width: 70%;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
  }
  @media only screen and (max-width: 720px) {
      .container{
          width: 100%;
      }
      .container .box {
          margin-left: 50%;
          transform: translateX(-50%);
      }
  }
  @media screen and (min-width: 720px) and (max-width: 1100px) {
      .container{
          width: 100%;
      }
  }
  
  .container a {
      color: var(--color-link);
      text-decoration: none;
  }
  
  .header {
      height: 5em;
      width: 100%;
      background-color: var(--color-header-background);
  }
  
  .header img {
      height: 130%;
      margin-left: 50%;
      transform: translateX(-50%);
      background-color: var(--color-header-background);
      border-radius: 0 0 15px 15px;
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
  
  .container .box {
      background-color: rgba(59, 59, 59, 0.53);
      border-radius: 15px;
      max-width: 500px;
      margin-left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }
  
  .container .box .box-header {
      align-items: center;
      display: flex;
      flex-direction: column;
      width: 100%;
  }
  
  @media only screen and (min-width: 451px) and (max-width: 720px) {
      .container .box{
          width: calc(100% - 40px);
          margin-left: 50%;
          transform: translateX(-50%);
      }
  }
  
  @media only screen and (max-width: 450px) {
      .container .box{
          width: 100%;
          margin-left: 50%;
          transform: translateX(-50%);
          padding-top: 3rem;
          border-radius: 0;
      }
  
      .container .box img {
          margin-top: 4rem;
      }
  }
  
  .container .box img {
      width: 10em;
      background-color: rgba(12, 12, 12, 0.4);
      border-radius: 15px;
      margin-top: 2rem;
  }
  
  .container .box h1 {
      font-size: 2em;
      margin-top: 0.5rem;
      margin-bottom: 1em;
      text-align: center;
      color: var(--color-text);
  }
  
  .container .box-content {
      width: 80%;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-bottom: 2rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }
  
  .container .box .Link {
      height: 3.5rem;
      display: flex;
      align-items: center;
      width: 100%;
      border-radius: 10px;
      cursor: pointer;
  }
  
  .container .box a {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 0.2rem;
  }
  
  .container .box a:hover {
      filter: brightness(0.9);
      transition: 0.2s;
  }
  
  .container .box .Link svg {
      font-size: 1.5rem;
      flex: 3;
  }
  
  .container .box p {
      display: inline-block;
      font-size: 1.7rem;
      margin: 0;
      flex: 7;
      width: 100%;
  }
  
  .container .box-content .Youtube {
      background-color: #ff0000;
  }
  
  .container .box-content .Twitch {
      background-color: #9146FF;
  }
  
  .container .box-content .Discord {
      background-color: #5865F2;
  }
  
  .container .box-content .X {
      background-color: #000000;
  }
  
  .container .box-content .Instagram {
      background-color: #E1306C;
  }
  
  .container .box-content .Website {
      background-color: #00a103;
  }
  
  .container .box-content .TikTok {
      background: linear-gradient(20deg, #69C9D0, #E1306C);
  }
  
  .container .box-content .Secret {
      background-color: #000000;
  }