@keyframes slide {
    from { background-position: 0 0; }
    to { background-position: 500px 500px; } /* it adjusts the thing depending on the size of it ig */
}
@media (max-width: 800px) {
    body {
        zoom: 0.5;
    }
}

body {
    background-image: url('images/bgimg.png'); /* sets background image */
    animation: slide 20s linear infinite;  /* makes it slide yayyy */
}
/* FONT RELATED */
@font-face {
    font-family: 'Comic Sans MS';
    src: url('/fonts/ComicSansMS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    color: white;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 15px;
}

.left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:5px;
    margin-top:20px
}
.center{
     display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:5px;
    margin-top:20px
}
.right{
      display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:5px;
    margin-top:20px
}
body {
  height: 100vh; 
}

h1{ /* titles */
    font-size:25px;
    text-transform: uppercase;
}
h2{ /* subtitles */
    font-size:20px;
    font-style: italic;
    color:rgb(255, 255, 255);
}
a{
    text-decoration: none;
    color:white;
}
.text-box {
  background-color: rgba(0, 0, 0, 0.25);
  position:relative;
  border: 3px solid #ccc; 
  padding: 15px;          /* space between text and border */
  margin: 10px;           /* space outside the box */
  border-radius: 8px;     /* ts rounds the corners */
  display: inline-block;  /* ts makes the box only as wide as the text */
}