@font-face {
    font-family: "Livvic Black";
    src: url("./Livvic-2/Livvic-Black.ttf");
  }
@font-face {
    font-family: "Livvic Bold";
    src: url("./Livvic-2/Livvic-Bold.ttf");
  }
@font-face {
    font-family: "Livvic regular";
    src: url("./Livvic-2/Livvic-regular.ttf");
  }

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

:root, .thlk {
    --acid-green: #47ff18;
    --moonlight-white: #ffffff;
    --raven-black: #1a1a1e;
}

body{
    background-color: var(--raven-black);
    color: var(--moonlight-white);
    font-family: 'Livvic Regular';
    display: flex;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

button{
    padding: 1rem;
    background-color: #46ff1860;
    border-style: solid;
    border-color: var(--acid-green);
    border-width: 0.2rem;
    border-radius: 0.4rem;
    font-family: 'Livvic Bold';
    color: var(--acid-green);
    font-size: medium;
    transition: all 0.5s;
    margin: 3rem;
}

span{
    max-width: 75%;
    margin: 3rem;
}

button:hover{
    background-color: #46ff1880;
    transform: scale(1.1);
    filter: drop-shadow(5px 5px 15px #000);
}

.logo{
    width: 7rem;
    position: fixed;
    top: 3rem;
    left: 2rem;
}

.logo-loading {
    width: 3rem;
    animation: rotate 2s infinite cubic-bezier(1, 0.3, 0.3, 0.8);
}

@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }