@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto&display=swap');

:root { 
  --first-color: #bbbefe;
  --firstsudo-color: rgba(187, 190, 254, 0.8);
  --second-color: #9ea3f5;
  --secondsudo-color: rgba(147, 151, 229, 0.785);
  --background-color: #191919;
  --background-color1: #28282B;
  --third-color: #2e2e33;
  --text-color: rgb(255, 255, 255);
  --black-color: #222;
  --transition-duration: 0.2s;
  --glass-white: rgba(255, 255, 255, 0.2);
  --glass-whiter: rgba(255, 255, 255, 0.1);
  --glass-black: rgba(0,0,0,0.2);
  --glass-blacker: rgba(0,0,0,0.3);
  --glass-second: rgba(147, 151, 229, 0.4);
  --background-image: url(/asset/default-bg.jpg);
}

  *{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    transition: var(--transition-duration, 0.5s) color;
    scroll-behavior: smooth;   

}

a{
  text-decoration: none;
}

body{
  background-color: #191919;
}

.logo{
    display: block;
    width: 90%;
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    height: auto;
    padding: 10px;
    position: relative;
}

.text{
    position: relative;
    width: 100%;
    text-align: center;
    color: var(--second-color);
    padding: 10px;
    font-size: 20px;
    margin-top: 20px;
    height: fit-content;
}

.gif{
    position: relative;
    width: 90%;
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid var(--first-color);
    display: block;
}