@import url(theme.css);
/* page style */

/* computer */
.big-logo {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 274px;
    right: 0;
    margin: auto;
    object-fit: cover;
}
.overlap-content {
    padding: 48px 48px 0;
    z-index: 2;
    background-color: var(--color-background);
    color: var(--color-on-background);
    font-family: 'Prompt', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: 85%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .overlap-content {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: var(--color-background-transparent);
    }
}
.overlap-content h1 {
    text-align: center;
    font-size: 48px;
    margin: 0;
    color: #0072BB;
    font-weight: bold;
    font-family: 'Prompt', sans-serif;
}
.overlap-content .content-section {
    margin-top: 72px;
}
.overlap-content .space {
    flex: 1 1 auto;
}

/* tablet */
@media screen and (max-width: 768px) {
    .big-logo {
        left: 80px;
    }
}

/* phone */
@media screen and (max-width: 480px) {
    .big-logo {
        left: 0;
    }
    .overlap-content {
        padding: 48px 24px 0;
    }
    .overlap-content h1 {
        font-size: 36px;
    }
    .overlap-content .content-section .intro-text {
        font-size: var(--md-sys-typescale-body-small-font-size);
    }
}