body.start-screen {
    width: 100%;
    height: 100%;
    clip: always;
}

.start-screen #buttons-panel {
    position: absolute;
    top: 50vh;
    width: 100%;
    justify-content: center;
    text-align: center;
}

    .start-screen #buttons-panel .button {
        transform-origin-x: center;
        transform: translateX(-50%);
        display: block;
        width: 220dp;
        margin-bottom: 10dp;
        padding: 4dp 0dp 4dp 0dp;
        position: relative;
        left: -20%;
    }

@media (theme: platform-ios) {
    #buttons-panel #quit_button {
        display: none;
    }
}

@media (theme: platform-android) {
    #buttons-panel #quit_button {
        display: none;
    }
}

#buttons-panel .button.start-button {
    width: 360dp;
    padding: 4dp 0dp 4dp 0dp;
    margin-bottom: 16dp;
}

@keyframes scale-anim {
    from {
        transform: translateX(-180dp) scale(0.99);
    }

    to {
        transform: translateX(-180dp) scale(1.05);
    }
}
.scale-anim {
    animation: 3s linear-in-out infinite alternate scale-anim;
}

    .scale-anim:active {
        animation: none;
    }


.start-screen #buttons-panel .button:active {
    /*    background-color: #FDCC04FF;*/
    filter: brightness(0.85);
    transform: translateX(-50%) scale(0.95);
}


.start-screen #buttons-panel .button.start-button:active {
    background-color: rgb(29, 195, 57);
    filter: brightness(1.2);
    transform: translateX(-50%) scale(0.95);
}

.start-screen #buttons-panel .button.display {
    left: 50%;
}

.start-screen .button .label {
    font-effect: shadow(1dp 1dp #000);
    font-size: 46dp;
}

.start-screen .button.start-button .label {
    font-effect: shadow(1dp 1dp #000);
    font-size: 56dp;
}

@keyframes logo-floating {
    from {
        transform: translateY(-1.5vh);
    }

    to {
        transform: translateY(1.5vh);
    }
}

#logo {
    position: absolute;
    top: 0;
    height: 50vh;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.3s 0.7s linear-in;
}

#logo .logo-img {
    decorator: image("interface/large/game_title.rttex" contain);
    margin: 4vh auto 0 auto;
    width: auto;
    height: 40vh;
    animation: 1.5s linear-in-out infinite alternate logo-floating;
}

#logo.display {
    transform: translateY(0);
}

.account-icon-growtopia {
    decorator: image("interface/large/btn_logo_gt.rttex" contain);
}

.account-icon-apple {
    decorator: image("interface/large/btn_logo_ios.rttex" contain);
}

.account-icon-google {
    decorator: image("interface/large/btn_logo_ggp.rttex" contain);
}

.account-icon-ubiconnect {
    display: none;
}

#login-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 12dp 12dp 24dp 24dp;
    transform: translateX(-100%);
    transition: transform 0.2s 1.0s linear-in;
    padding-left: inset-left;
}

    #login-panel > div {
        padding-left: 24dp;
    }

    #login-panel.display {
        transform: translateX(0);
    }

    #login-panel .player-name {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-grow: 1;
        margin-top: 8dp;
        margin-bottom: 8dp;
    }

        #login-panel .player-name .icon-img {
            display: inline-flex;
            margin-right: 6dp;
            height: 32dp;
            width: 32dp;
            flex-shrink: 0;
        }

    #login-panel .button {
        margin-bottom: 10dp;
        padding-top: 4dp;
        padding-bottom: 6dp;
        width: 140dp;
    }

    #login-panel .button:active {
        transform: scale(0.95);
        filter: brightness(0.85);
    }


        #login-panel .button .label {
            font-effect: shadow(1dp 1dp #000);
            font-size: 38dp;
        }

#version-text {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 12dp 24dp 24dp 12dp;
    padding-right: inset-right;
    transform: translateX(100%);
    transition: transform 0.2s 1.0s linear-in;
}

    #version-text > span {
        padding-right: 24dp;
    }

    #version-text.display {
        transform: translateX(0);
    }


.start-screen-shadow-text {
    font-effect: shadow(1dp 1dp #000);
}

/*--------------    Event Themes     --------------*/

#backGround {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
}

#backGround .background-img {
    height: 100%;
    decorator: image("interface/large/main_menu_bg_themed.rttex" cover);
    display: none;
}

#backGround.display {
    display: none;
}

.button-themed-colour {
	background-color: rgba(165,227,251,255);
}

@media (theme: cinco-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    .button-themed-colour {
	    background-color: rgba(37, 171, 67, 255);
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: spp-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    .button-themed-colour {
	    background-color: rgba(37, 171, 67, 255);
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: beach-party-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    .button-themed-colour {
	    background-color: rgba(144, 192, 255, 255);
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: summerfest-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    .button-themed-colour {
	    background-color: rgba(77, 106, 240, 255);
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: winterfest-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    .button-themed-colour {
	    background-color: rgba(0, 170, 40, 255);
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: patricks-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    .button-themed-colour {
	    background-color: rgba(165, 227, 251, 255);
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: valentines-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}
@media (theme: g4g-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}

@media (theme: easter-theme) {
    #backGround {
        display: block;
    }

    #backGround .background-img {
        display: block;
    }

    #logo .logo-img {
        decorator: image("interface/large/game_title_themed.rttex" contain);
    }
}