:root,
    /*Light Theme*/
    :root.light { 
        --background-color: #1e202c;
        --background-gradient: linear-gradient(90deg,rgba(3, 0, 18, 1) 0%, rgba(96, 81, 155, 1) 50%, rgba(250, 240, 240, 1) 100%);
        --text-color: #bfc0d1;
        --reverse-text-color: #1e202c;
        --accent-1: #31323c;
        --accent-2: #bfc0d1;
        --accent-3: #60519b;
        --filter-color: #dda7ff7e;
        --box-shadow: 0px 0px 15px #dda7ff7e;
        --warning: #b80303;
    }

/** SMALL PHONES*/
@media only screen and (min-width: 200px) {
    .title-wrapper {
        display: flex;
        /* justify-content: center; */
        align-items: center;
        /* border-bottom: 2px solid gray; */
        padding-left: 2em;
        margin-bottom: 0.5em;
        background-color: var(--accent-3);
        background: var(--background-gradient);
    }
    #logo {
        width: 3em;
        height: fit-content;
        /* margin-right: 1em; */
    }
    .title {
        color: var(--text-color);
        margin-left: 1em;
    }
    .games-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 1em;
    }
    .border-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5em;
        margin: 0.5em 0;
        width: 20em;
        height: 20em;
        border-radius: 16px;
        background-color: var(--accent-3);
        background: linear-gradient(157deg,rgba(3, 0, 18, 1) 0%, rgba(96, 81, 155, 1) 50%, rgba(250, 240, 240, 1) 100%);
    }
    .contens-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1em;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        /* background-color: var(--accent-2); */
        background-color: #FAF0F0;
    }
    .image-wrapper > img {
        width: 12em;
        height: fit-content;
    }
    .link-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        padding-top: 0.5em;
    }
    .selectLink {
        font-size: 30px;
    }
}
/* @media only screen and (min-width: 450px) {
    .border-wrapper {
        width: 25em;
    }
} */
@media only screen and (min-width: 700px) {
    .games-wrapper {
        flex-direction: row;
        justify-content: center;
    }
    .border-wrapper {
        margin: 0 0.5em;
    }
}
@media only screen and (min-width: 1000px) {
    .title-wrapper {
        margin-bottom: 2em;
    }
    .border-wrapper {
        width: 25em;
        height: 25em;
        margin: 0 1em;
    }
    .image-wrapper > img {
        width: 15em;
    }
}