.contact-method{
     display: flex;
    justify-content: space-around;
    align-items: center;
}


li{
    line-height: 2.5;
}

ol{
    line-height: 2.0;
}


.main-page-contact{
    border-radius: 10px;
    padding: 10px;
}


.contact-options{
    padding: 10px;
    border-radius: 10px;
    margin: 30px 0;
}


.gibberish{
    padding: 10px;
    border-radius: 10px;
}



.game-screen{
    border-radius: 10px;
    padding:10px;
}


.loading-screen{
    position: relative;
    margin: 50px auto;
    height: 20px;
    width: 50%;
}

/* .loading-bar{
    position: relative;
    left: 0%;
    animation: loadingBar 10s infinite;
    height: 100%;
}

@keyframes loadingBar{
    0% {width: 0%}
    25% {background-color: aqua; width: 50%}
    50% {background-color: aqua; width: 100%}
    75% {background-color: aqua; width:50%}
    100% {background-color: aqua; width:0%}
} */

.loading-title{
    text-align: center;
    font-weight: bold;
}

:root {
    --loading-color: white;      /* default theme */
}

.darkTheme {
    --loading-color: aqua;       /* dark theme color */
}

.lightTheme {
    --loading-color: goldenrod;      /* light theme bar color */
    background-color: brown;
}

.copybookTheme {
    --loading-color: yellow;        /* copybook theme bar color */
    background-color: red;
}

.loading-bar {
    height: 100%;
    background-color: var(--loading-color);
    animation: loadingBar 10s infinite;
}

@keyframes loadingBar{
    0% {width: 0%}
    25% {background-color: var(--loading-color); width: 50%}
    50% {background-color: var(--loading-color); width: 100%}
    75% {background-color: var(--loading-color); width: 50%}
    100% {background-color: var(--loading-color); width: 0%}
}