base.css

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
  }

  * {margin: 0;}
  
  body, html {
    height: 100%;
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  mark {
    background-color: var(--cyan);
  }

  :root{
    --green: #a6d189;
    --yellow: #e5c890;
    --cyan: #74c7ec;
    --bg: #1e1e2e;
    --lilac: #cba6f7;
    --tp: #cdd6f4;
    --ct : #181825;
  }

body{
    background-color: var(--bg);
    font-family: 'Anonymous Pro', sans-serif;
    color: var(--tp);
    text-align: center;
}

p { 
  color: var(--tp);
  font-size: 1.2rem;
}

h1 {    
  font-size: 2em;
  color: var(--lilac);
}

h2 {    
  font-size: 1.8em;
  margin-top: 2px;
}

h3 {    
  font-size: 1.3em;
  margin-top: 2px;
}

a{
  color: var(--cyan);
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  font-weight: bold;
}
a:hover {
  box-shadow: inset 150px 0 0 0 var(--cyan);
  color: var(--ct);
}

strong { color: var(--cyan);}

button {
  background-color: var(--lilac);
  color: var(--bg);
  padding: 10px 20px;
  font-size: 1.3em;
  font-weight: bold;
  border-radius: 10px;
  margin: 10px;
}

button:hover {
  background-color: var(--cyan);
  transform: scale(1.2);
}

.hidden{visibility: hidden;}

.bg-blur {background: rgba(0, 0, 0, 0.8);}

.green{color: var(--green);}

.liliac{color: var(--lilac);}

.tcenter{text-align: center;}

.tleft{text-align: left;}