* {
    box-sizing: border-box;
}

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

.bg-image {
    background-image: url("/static/classifyingHat/background.jpg");

    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    pointer-events: none;

    animation: fade-in 1.5s linear .5s 1 backwards;
}

.page-text-logo {
    max-height: 15%;
    max-width: 90%;

    position: absolute;
    top: 10%;
    left: 50%;

    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    animation: fade-in 1.5s linear 1s 1 backwards;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;

    margin-bottom: 4px;

    color: white;

    animation: fade-in 2s linear 4s 1 backwards;
}

footer p {
    text-align: center;

    padding: 0;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

footer a:link {
    color: white;
    transition: 0.3s;
}

footer a:visited {
    color: white;
}

footer a:hover {
    opacity: 85%;
}

.center {
    width: 30%;
    height: 75%;

    position: absolute;
    top: 10%;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: auto;

    padding: 20px;

    margin: auto;

    background-color: rgba(46, 46, 46, 0.692);
    background-image: linear-gradient(45deg, #05277eb0, #401b70b0);

    border-radius: 12px;

    animation: fade-in 2s linear 1.5s 1 backwards;
}

/* Hide scrollbar for Chrome and webkit browsers */
.center::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.center {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

@media screen and (max-width: 1335px) {
    .center {
        width: 90%;
    }
}

.hp-font {
    font-family: 'Kaushan Script', 'Lucida Handwriting', 'Brush Script MT', cursive;
    font-weight: bold;
    color: darkgoldenrod;
}

@keyframes fade-in {
    from {opacity: 0%;}
    to {opacity: 100%;}
  }