/* By: Dominikhun250 */
:root {
  --color1: #59b4ff;
  --color2: #30a8e0;
  --color3: #4a86f5;
  --color4: #4b74fb;
  --color5: #164c9c;
  --color6: #38e1ff;
  --color7: #5e91ff;
  --color8: #1e4fd4;
  --color9: #1d4fac;
}

	* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      user-select: none;
    }

    body {
      background-color: #1a1a1afe;
      text-align: center;
      color: #fff;
      font-family: Arial, sans-serif;
    }

    .container {
      box-shadow: 0px 0px 15px 28px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      width: 100%;
      height: 100vh;
      gap: 10px;
      padding: 0 75px;
    }

.notification {
  font-family: Arial, sans-serif;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}



.bar {
  height: 20px;
  border-radius: 25px 0 0 25px;
  text-align: center;
  line-height: 20px;
  color: white;
  background: linear-gradient(to right, var(--color2) 0%, var(--color3) 50%);
  transition: background 2s ease;
}

.bar.bg-90 {
  background: linear-gradient(to right, var(--color2) 0%, var(--color3) 50%, var(--color4) 80%, var(--color5) 100%);
  transition: 1s;
}

.bar.bg-50 {
  background: linear-gradient(to right, var(--color2) 0%, var(--color3) 50%, var(--color4) 100%);
  transition: 1s;
}

.bar.bg-0 {
  background: linear-gradient(to right, var(--color2) 0%, var(--color3) 50%, var(--color4) 100%);
  transition: 1s;
}

.bar.bg-0:hover,
.bar.bg-50:hover,
.bar.bg-90:hover {
  background: linear-gradient(to right, var(--color6) 0%, var(--color1) 50%, var(--color7) 100%);
  box-shadow: 0px 0px 15px 28px rgba(0, 0, 0, 0.1),
    0 0 20px var(--color4),
    0 0 40px var(--color4);
}



      .menu:hover {
                box-shadow: 0px 0px 15px 28px rgba(0, 0, 0, 0.1),
                  0 0 20px var(--color1),
                  0 0 40px var(--color1); 
                  transition: 1s;
		transform: scale(1);
      }

    .stats {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: left;
      gap: 10px;
    }

    .bar-container {
      width: 300px;
      background-color: #474747;
      border-radius: 25px;
      overflow: hidden;
    }

    .bar {
      height: 20px;
      border-radius: 25px 0 0 25px;
      text-align: center;
      line-height: 20px;
      color: white;
      background: linear-gradient(to right, var(--color2) 0%, var(--color3) 50%);
      transition: background 2s ease;
    }

    h3 {
      text-decoration: line-through;
    }

      h1 {
          margin-bottom: 5px;
      }
      
    .menu {
      transition: 1s;
	  transform: scale(0.85);
      width: fit-content;
      height: fit-content;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0px 0px 15px 28px rgba(0, 0, 0, 0.1),
                  0 0 20px var(--color9),
                  0 0 40px var(--color4); 
    }

    .title {
      padding: 20px;
    }

    .author {
      margin-top: 25px;
      text-decoration: underline;
    }

    img {
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -ms-user-drag: none;
      user-drag: none;
      border-radius: 360px;
      margin-top: -35px;
        		transform: scale(1);
      margin-bottom: 10px;
                      transition: 1s;
    }
      
      img:hover, a:hover {
        transition: 1s;
		transform: scale(0.75);
      }
      
    a {
              -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -ms-user-drag: none;
      user-drag: none;
      cursor: pointer;
      }