.title-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    width: 100vw;
    height: 100vh;
    background-color: #f9f2ed;
}

/* Title Screen */
.title-background {
    position: absolute;
    background: url("../img/backgrounds/backgroundColorGrass.png") repeat-x;
    height: 100%;
    width: 5000px;
    background-size: contain;
    animation: slide 40s linear infinite;
}

/* Same as .title-background but blurred */
.title-sub-background {
    position: absolute;
    background: url("../img/backgrounds/backgroundColorGrass.png") repeat-x;
    height: 100%;
    width: 5000px;
    background-size: contain;
    filter: blur(10px);
    opacity: 0.3;
    animation: slide 40s linear infinite;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    width: 100%;
    height: 100%;
    position: relative;
}

.title-game-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7rem;
}

.title-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    z-index: 2;
}

.title-main {
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
}

.title-game-name {
    font-size: 3rem;
    font-family: 'Kenney Rocket';
    color: #1ea7e1;
    text-shadow: 0 0 1px #166e93, 0 0 2px #166e93, 0 0 3px #166e93, 0 0 4px #166e93, 0 0 5px #166e93;
}

.title-game-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 20vw;
}

@keyframes slide {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-1200px, 0, 0); /* The image width */
    }
}

@media (max-width: 768px) {
    .title-game-buttons {
        width: 80vw;
    }
}

#title-btn-play {
    width: 100%;
    color: #166e93;
    background-color: #1ea7e1 !important;
    border: 3px solid #1989b8;
    box-shadow: 0 .2em #166e93;
    margin-top: 2rem;
}

.game-buttons-horizontal {
    display: flex;
    margin: auto;
    gap: 1em;
    width: 100%;
}

.game-button {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;

    margin: auto;
    font-size: 1.25rem;
    width: 100%;
    height: 5vw;
    flex-grow: 1;
}

.game-button-yellow {
    color: #ac8404;
    background-color: #ffcc00 !important;
    border: 3px solid #cda400;
    box-shadow: 0 .2em #a88600;
}

.game-button-green {
    color: #44842c;
    background-color: #73cd4b !important;
    border: 3px solid #5fb13a;
    box-shadow: 0 .2em #47832c;
}

.game-button img {
    height: 100%;
}

.game-button-yellow img {
    filter: invert(51%) sepia(53%) saturate(3081%) hue-rotate(24deg) brightness(92%) contrast(97%);
}

.game-button-green img {
    filter: invert(57%) sepia(45%) saturate(632%) hue-rotate(51deg) brightness(40%) contrast(84%);
}

.game-button-enabled img {
    filter: invert(100%) brightness(100%) !important;
}

.title-skin-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
}

.title-skin-picker h2 {
    font-size: 1.5rem;
    font-family: 'Kenney Mini Square';
    color: #f63a3d;
}

#title-skin-picker-name {
    font-size: 1rem;
    font-family: 'Kenney Mini';
    color: #a88600;
}

.title-skin-picker-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;
}

.title-skin-picker-item {
    height: 5vw;
    width: 5vw;
    border-radius: 100%;

    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.25);
}

#title-skin-picker-item-middle {
    height: 8vw;
    width: 8vw;
    padding: 0.25vw;

    border-color: #ffcc00;
    border-width: 0.5vw;
    border-style: solid;
}

.title-skin-picker-item img {
    height: 100%;
    width: 100%;
    border-radius: 100%;

    /* fit crop */
    object-fit: cover;
}

.title-skin-picker-arrow:active {
    transform: translateY(4px);
}