style.css

@import url("https://rsms.me/inter/inter.css");
html {
    font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
    html {
        font-family: "Inter var", sans-serif;
    }
}

body {
    font-family: "Inter var", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.container {
    font-family: "Inter var", sans-serif;
}

.header {
    font-family: "Inter var", sans-serif;
    text-align: center;
    font-size: 60px;
    font-weight: bolder;
    margin: 25px;
    background-image: linear-gradient(#7a00b2, #42008d);
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1A1A40;
        --text-color: #f5f5f5;
        --sub-header-color: #ebebeb;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #fff;
        --text-color: #000001;
        --sub-header-color: #0a0a0a;
        
    }
}

.header-404 {
    font-family: "Inter var", sans-serif;
    text-align: center;
    font-size: 72px;
    font-weight: bolder;
    margin: 25px;
    color: #f5f5f5;
}

.header-404-h2 {
    font-family: "Inter var", sans-serif;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    margin: 10px;
    color: #f5f5f5;
}

.sub-header-main-page {
    margin-top: 10px;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
    font-family: "Inter var", sans-serif;
    color: var(--sub-header-color);
}

.information-404 {
    margin-left: 75px;
    text-align: center;
    margin-right: 75px;
    font-size: 16px;
    font-family: "Inter var", sans-serif;
    color: #f5f5f5;
    font-weight: bold;
}

.homepage-button {
    background-color: #FFFFFF;
    border: 0;
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: auto;
    text-align: center;
  }
  
  .homepage-button:hover {
    background-color: rgb(249,250,251);
  }
  
  .homepage-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  .homepage-button:focus-visible {
    box-shadow: none;
  }