#topfeature h1 {
    max-width: 90%;
    margin-bottom: 1em;
}
#topfeature h4 {
    margin-top: 1em;
}

section#topfeature {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/hero_availableNow_bg.jpg');
    padding-bottom: 3em;
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

section#herocopy {
    background-color: #f0f0f0;
    padding-top: 0;
}

@media screen and ( max-width: 700px ) {

}

@media screen and ( max-width: 450px ) {
    
}

#feature-stardew {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/ver2/software_playing_stardew.jpg');
}

@media screen and ( min-width: 701px ) {
    #topfeature img {
        margin-bottom: 0.5em;
        margin-top: 1em;
    }
    #ui .carousel-cell {
        opacity: 0 !important;
        transition-property: opacity;
        transition-duration: 0.2s;
    }
    #ui .carousel-cell.is-selected {
        opacity: 1 !important;
    }
}

@media screen and (max-width: 700px) {
    #ui .carousel-cell {
        width: 100%;
        margin-right: 1em;
        padding: 0 3.6458333333333vw; 
    }
    #ui .carousel-cell h2 {
        padding: 0;
    }
    section.flickity#ui {
        padding: 7.6388888888889vw 0; 
    }
}

#ui .flickity-viewport {
    min-height: 16em;
}

@media screen and (max-width: 700px) {
    #ui .flickity-viewport {
        min-height: 0;
        height: auto;
    }
}

#ui .imagecontainer img {
    /*max-width: 400px;*/
}

#ui p {
    color: #8B929A;
}
#ui p em {
    color: #FFFFFF;
    font-style: normal;
}
@media screen and (min-width: 700px) {
    #ui .gridrow {
        margin-bottom: 2.5em;
    }
}

#library .imagecontainer {
    margin-top: 2em;
}

#proton p {
    margin-top: 1em;
}



@media screen and ( max-width: 700px ) {
    #proton p {
        margin-bottom: 1em;
    }
}

@media screen and ( max-width: 700px ) {
    #linux .imagecontainer {
        margin-top: 1.5em;
    }
}


#couch {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/steamdeck_couch.jpg');
}

#sitting {
    background-image: url('https://cdn.cloudflare.steamstatic.com/steamdeck/images/steamdeck_sitting.jpg')
}


.gp-block {
    min-height: 27em;
    overflow: hidden;
    pointer-events: none;
}

@media screen and (max-width: 700px) {
    .gp-block {
        margin-top: 3em;
    }
}

.gpui {
    position: absolute;
    max-width: 24.5em;
    filter: drop-shadow( -20px 20px 10px rgba(0,0,0,0.75));
    transition: transform 1s ease-in-out, opacity 1s ease-out;
}

.z-wobble { 
    animation-name: z-wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
 
@keyframes z-wobble {
    0%  { transform: translate(0px, 0px); }
    50% { transform: translate(3px, -3px); }
    100% { transform: translate(-3px, 0px); }
}

.gp-header-searching {
    transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 3;
    opacity: 0;
}

.gp-search-results {
    transform: translate3d(0px, 4em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 4em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 2;
    opacity: 0;
}

.gp-keyboard {
    transform: translate3d(0px, 4em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 4em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 2;
    opacity: 0;
}

.gp-footer {
    transform: translate3d(0px, -2em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 4;
    opacity: 0;
}

.gp-game-overlay {
    transform: translate3d(0px, -5em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 5;
    opacity: 0;
}

.gp-quickaccess {
    transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 3;
}

.gp-mainmenu {
    transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 3;
}

.gp-game {
    transform: translate3d(0px, 4em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 4em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 2;
}

.gp-gamedetails {
    transform: translate3d(0px, 8em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 8em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 1;
}

.gp-home {
    transform: translate3d(0px, 12em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 12em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 0;
}

/* When on Quick Access tab */
.gp-tab-quick-access .gp-quickaccess {
    transform: translate3d(0px, -2em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 4;
    opacity: 1;
}

.gp-tab-quick-access .gp-quickaccess img {
    content:url("https://cdn.cloudflare.steamstatic.com/steamdeck/images/gpui-quickaccess-selected.png");
}

.gp-tab-quick-access .gp-gamedetails,
.gp-tab-quick-access .gp-game,
.gp-tab-quick-access .gp-mainmenu,
.gp-tab-quick-access .gp-home {
    opacity: 0.4;
}

/* When on Navigation tab */
.gp-tab-navigation .gp-mainmenu {
    transform: translate3d(0px, -2em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 4;
    opacity: 1;
}

.gp-tab-navigation .gp-mainmenu img {
    content:url("https://cdn.cloudflare.steamstatic.com/steamdeck/images/gpui-mainmenu-selected.png");
}

.gp-tab-navigation .gp-gamedetails,
.gp-tab-navigation .gp-game,
.gp-tab-navigation .gp-quickaccess,
.gp-tab-navigation .gp-home {
    opacity: 0.4;
}

/* When on Search tab */
.gp-tab-search .gp-header-searching {
    transform: translate3d(0px, -2em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 4;
    transition: transform 1s 0.3s ease-in, opacity 1s 0.3s ease-in;
    opacity: 1;
}

.gp-tab-search .gp-keyboard,
.gp-tab-search .gp-search-results {
    transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
transform: translate3d(0px, 0em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 3;
    transition: transform 1s 0.3s ease-in, opacity 1s 0.3s ease-in;
    opacity: 1;
}

.gp-tab-search .gp-quickaccess,
.gp-tab-search .gp-mainmenu {
    transform: translate3d(0px, -5em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 5;
    opacity: 0;
}

.gp-tab-search .gp-gamedetails,
.gp-tab-search .gp-game,
.gp-tab-search .gp-home {
    opacity: 0.4;
}

/* When on Gameplay tab */
.gp-tab-gameplay .gp-game-overlay {
    transform: translate3d(0px, -2em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 4;
    opacity: 1;
}

.gp-tab-gameplay .gp-game {
    opacity: 1;
}


.gp-tab-gameplay .gp-quickaccess,
.gp-tab-gameplay .gp-mainmenu {
    transform: translate3d(0px, -5em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg) scale(1.05);
transform: translate3d(0px, em, 0px) rotateX(57deg) rotateY(0deg) rotateZ(-35deg);
z-index: 5;
    opacity: 0;
}

.gp-tab-gameplay .gp-gamedetails,
.gp-tab-gameplay .gp-home {
    opacity: 0.4;
}