@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

html {
    width: 100%;
    height: 100%;
    margin: 0;

    font-family: 'Bitter', serif;
}

body {
    background-color: black;

    overflow: hidden;

    width: 60%;
    height: 100%;
    margin: 0 auto;
    margin-top: 10vh;

    padding: 0 auto;
}

#frame {
    position: relative;

    margin: 0;

    display: flex;
    justify-content: center;
}

#spotlight-overlay {
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 300%;

    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0) 100%);
}

#frame-image {
    width: 100%;
    max-width: 400px;
    object-fit: contain;

    margin: 0 max(0, calc(50% - 200px));
}

#frame-inner {
    position: absolute;
    top: 0%;
    left: 0%;

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 9.45%;
    padding-bottom: 10%;

    object-fit: contain;

    text-align: center;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    color: white;

    position: relative;

    text-align: center;

    z-index: -1;
}

#content p {
    color: white;

    position: relative;

    text-align: center;

    z-index: -1;
}

#content {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#content button {
    position: relative;

    z-index: 1;

    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 20px;

    font-size: 16px;

    width: 100%;
}

#content button:hover {
    background-color: white;
    color: black;
    cursor: pointer;
}

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer a {
    text-decoration: none;
    text-wrap: nowrap;

    width: fit-content;
    margin: 0 10px;
}