.utena{
    background-image: url("utena.jpg");
    font-family: utena;
    font-size: 700%;
    color: #800111;
}

.eva{
    background-image: url("eva.jpg");
    background-size: cover;
    font-family: eva;
    font-size: 700%;
    color: #800111;
}

.matrix{
    background-image: url("matrix.jpg");
    background-size: cover;
    font-family: Caskaydia;
    font-size: 700%;
    color: #00FF41;
}

.city{
    background-image: url("city.jpg");
    background-size: cover;
    font-family: eva;
    font-size: 700%;
    color: #800111;
}


body {
    background-color: #181825;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.banner-hero {
    position: relative;
}

.banner-hero img {
    width: 1200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.banner-hero p {
    text-align: center;
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    margin: 0;
    font-size: 10.5rem;
    color: #050505;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}


/* Controls */
.controls {
    margin-bottom: 1.5rem;
}

/* Styled select */
select {
    font-family: Caskaydia;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    background-color: #2a2a3a;
    color: #eee;
    border: 2px solid #050505;
    border-radius: 6px;
}

/* Video */
video {
    width: 100%;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(128, 1, 17, 0.4);
}

@font-face {
    font-family: "utena";
    src: url("../fonts/PaulsGothicCurls.ttf");
}
@font-face {
    font-family: "Caskaydia";
    src: url("../fonts/CaskaydiaCoveNerdFont-Regular.ttf");
}