body {
    width: 90%;
    display: flex;
    flex-flow: column nowrap;
    margin: auto;
}

.proj_main {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.proj_title {
    text-align: center;
}

.proj_title p {
    margin-top: 0px;
}

.proj_content {
    width: 95%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    text-align: center;
}

.qInput {
    display: flex;
    flex-flow: column;
    align-items: center;
}

#myQuestion {
    margin-bottom: 10px;
}

#question {
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.ball {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 15px;
}

.shell {
    border-radius: 50%;
    z-index: -1;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(
        closest-side at 50% 50%,
        white,
        black,
        rgb(31, 31, 32)
    );
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.window {
    z-index: 200;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgb(18, 25, 116);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

#answer {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.empty {
    color: rgb(18, 25, 116);
    z-index: 0;
}

.reveal {
    color: rgb(167, 195, 240);
    animation: fade-in 3000ms linear;
    z-index: 300;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}