#starter {
    width: 100svw;
    height: 100svh;
    background-color: transarent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
}

#starter > #starter-container {
    width: 50svh;
    height: 82svh;
    background-color: white;
    border-radius: 0 3svi 0 0 ;
    display: grid;
    grid-template-columns: 1fr 6svh;
    grid-template-rows: 6svh 1fr;
    justify-content: center;
    align-items: center;
}

#starter > #starter-container > #starter-title {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    font-size: 2.5svh;
    font-family: "BuckeyeSans2";
    font-weight: bold;
    color: var(--osuGray);
    background-color: var(--osuRed);
    width: 100%;
    height: 100%;
    display: flex;
    padding-left: 3svh;
    align-items: center;
    justify-items: center;
    text-transform: uppercase;
}

#starter > #starter-container > #starter-close-button {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 75%;
    height: 75%;
    background-color: var(--osuRed);
    display: flex;
    justify-content: center;
    align-items: center;
}

#starter > #starter-container > #starter-content {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

#starter > #starter-container > #starter-content > h2 {
    font-size: 2.0svh;
    font-family: "BuckeyeSans2";
    font-weight: bold;
    width: 100%;
    text-align: center;
}

#starter > #starter-container > #starter-content > #starter-image {
    width: 70%;
    object-fit: cover;
}

#starter > #starter-container > #starter-content > p {
    font-size: 2svh;
    font-family: "BuckeyeSans2";
    font-weight: 600;
    width: 80%;
    text-align: center;
}

#starter > #starter-container > #starter-content > button {
    font-size: 2.5svh;
    font-family: "BuckeyeSans2";
    font-weight: Regular;
    width: 50%;
    padding: 10px;
    background-color: var(--osuRed);
    color: var(--osuGray);
    text-align: center;
    border: none;
    margin: 1svh 0svw;
}

#starter > #starter-container > #starter-content > #marlerless-bottom-button {
    background-color: var(--osuRed);
    color: var(--osuGray);
}

@media (max-width: 768px) {
    #starter > #starter-container {
        width: 90svw;
    }
}

@media (min-aspect-ratio: 1/1) {
    #starter > #starter-container {
        width: 80svh;
        height: 92svh;
        border-radius: 0 1.5svi 0 0 ;
    }
    #starter > #starter-container > #starter-title {
        font-size: 3svh;
    }
    #starter > #starter-container > #starter-close-button {
        width: 75%;
        height: 75%;
    }
    #starter > #starter-container > #starter-content > h2 {
        font-size: 3svh;
    }
    #starter > #starter-container > #starter-content > p {
        font-size: 3svh;
    }
    #starter > #starter-container > #starter-content > button {
        font-size: 4svh;
        width: 40%;
        padding: 1svh;
    }
}