* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

footer {
    position: relative;
    padding: 1rem;
    flex-shrink: 0;
}

@font-face {
    font-family: "utmono";
    src: url(fonts/DeterminationMonoWeb.woff) format('woff');
}

#logo {
    margin-top:1.5rem;
}

@font-face {
    font-family: "utsans";
    src: url(fonts/DeterminationSansWeb.woff) format('woff');
}
@media (max-width: 768px){
    .navbar ul{
        display: none;
    }
    .navbar a {
        display: none;
    }
    #logo {
        margin-top:0;   
    }
}
body {
  background-image: url(images/bluestar.gif);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position:top left;
  background-color: white;
  color: ghostwhite;
  font-family: utsans;
}

.navbar {
    width:100%;
}

.navbar ul {
    flex-direction: row;
    list-style-type: none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 0.75rem;
    height: auto;
}

    .navbar a {
        font-family: utmono;
        padding: 1em 1.5em;
        text-align: center;
        font-size: 1rem;
        background-color: #333;
        background-image: linear-gradient(to bottom, #04125c, #7a1fa2);
        color: whitesmoke;
        border-radius: 0.4em;
        transition: background-color 0.2s ease;
        text-decoration: none;
    }

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin-top: 0.5rem;
  text-align: center;
}

.header img {
  width: clamp(200px, 60vw, 700px);
  height: auto;
  margin-bottom: 0.5rem;
}

.header h1 {
  margin: 0;
  font-size: clamp(1.1rem, 4vw, 1.8rem);
}

footer {
    position: relative;
    padding: 1rem;
}

#footer-bg {
    position: absolute;
    inset: 0;
    background-image: url(images/bluestar.gif);
    background-repeat: repeat;
    background-attachment: fixed;
    animation: rainbow-cycle 8s linear infinite;
    z-index: -1;
}

@keyframes rainbow-cycle {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}