@import url(/en/_res/style.css);



.page, .page_wrapped {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}



/************ Double content ************/
.doubleContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--page_padding);
}

.doubleContent * {
    transition: width var(--time_animations);
    flex-direction: column;
}

.doubleContent :nth-child(1) *:not(:first-child) {
    margin-top: var(--container_foreground_separation);
}

.doubleContent > :nth-child(1) {
    width: 50%;
    padding: var(--container_padding);
    border-radius: var(--container_radius);
    background-color: var(--default_container_background);
}
.doubleContent > :nth-child(2) {
    width: 50%;
}

/* Tablet portrait */
@media (orientation:portrait) and (max-width: 992px) and (max-height: 1200px) {
    .doubleContent {
        flex-direction: column-reverse;
        justify-content: center;
        gap: var(--container_separation);
    }
    
    .doubleContent h2 {
        text-align: center;
    }
    
    .doubleContent > :nth-child(1) {
        width: auto;
    }
    .doubleContent  > :nth-child(2) {
        width: 80%;
        height: auto;
    }
}



/**************** Header ****************/
/**************** Title *****************/
#title {
    background-image: url(_res/drawable/grass_light.png);
    mask-image: linear-gradient(to bottom,
        black calc(var(--page_height) - var(--page_padding)),
        transparent var(--page_height));

    background-position: center bottom;
    background-size: cover;
}

#title h1 {
    text-transform: uppercase;
    text-align: center;
    color: var(--grass_accent_foreground);
}

@media(prefers-color-scheme: dark) {
    #title {
        background-image: url(_res/drawable/grass_dark.png);
    }
}



/**************** Intro *****************/
#intro {
    gap: var(--page_padding);
}

#intro div {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#intro div > :nth-child(1) {
    margin-bottom: var(--container_foreground_separation);
}

#intro div:nth-of-type(1) * {
    text-align: center;
}

#intro div:nth-of-type(2) ul {
    align-items: start;
}

/* Tablet */
@media ((orientation:portrait) and (max-width: 992px) and (max-height: 1200px)) or
        ((orientation:landscape) and (max-width: 1200px) and (max-height: 992px)) {
    #intro div {
        width: 100%;
    }
}



/************** Ergonomics **************/
#ergonomics { flex-direction: row-reverse; } /*Reverse content order*/
@media (orientation:portrait) and (max-width: 992px) and (max-height: 1200px) {
    #ergonomics {
        flex-direction: column-reverse;
    }
}

/*Image*/
#ergonomics img {
    content: url(_res/drawable/ergonomics/cutout_end_light.png);
}
@media(prefers-color-scheme: dark) {
    #ergonomics img {
        content: url(_res/drawable/ergonomics/cutout_end_dark.png);
    }
}



/**************** Devices ***************/
/*Image*/
#devices img {
    content: url(_res/drawable/devices/foldables_light.png);
}
@media(prefers-color-scheme: dark) {
    #devices img {
        content: url(_res/drawable/devices/foldables_dark.png);
    }
}



/************ Functionalities ***********/
#functionalities {
    position: relative;
    height: calc(var(--page_height) * 0.8);
}
#functionalities * {
    transition: none;
}
#functionalities div h2 {
    text-align: center;
}



/*Gives container positioning for mobile*/
#functionalities div:nth-of-type(1) {
    width: calc(50vw - var(--page_padding) * 2);
}
#functionalities div:nth-of-type(2) {
    visibility: collapse;
    position: absolute;
}



#functionalities img {
    width: 25vw;
    height: calc(100% - var(--page_padding) * 2);
    object-fit: cover;
    position: absolute;
}
#functionalities img:nth-of-type(1) {
    object-position: right;
    border-radius: 0 30px 30px 0;
    left: 0;
}
#functionalities img:nth-of-type(2) {
    object-position: left;
    border-radius: 30px 0 0 30px;
    right: 0;
}
/* Tablet portrait */
@media (orientation:portrait) and (max-width: 992px) and (max-height: 1200px) {
    #functionalities div:nth-of-type(1) {
        width: auto;
    }
    #functionalities div:nth-of-type(2) {
        visibility: visible;
        position: relative;
        flex-direction: row;
        height: calc(var(--page_height) * 0.33);
        width: 100vw;
    }

    #functionalities img {
        visibility: hidden;
    }
    #functionalities div img {
        width: 33vw;
        height: 100%;
        visibility: visible;
        opacity: 1;
    }
    
    #functionalities img:nth-of-type(1) {
        border-radius: 0 14px 14px 0;
    }
    #functionalities img:nth-of-type(2) {
        border-radius: 14px 0 0 14px;
    }
}



/*Images*/
#functionalities img:nth-of-type(1) {
    content: url(_res/drawable/functionalities/delete_gesture_light.png);
}
#functionalities img:nth-of-type(2) {
    content: url(_res/drawable/functionalities/shift_gesture_light.png);
}
@media(prefers-color-scheme: dark) {
    #functionalities img:nth-of-type(1) {
        content: url(_res/drawable/functionalities/delete_gesture_dark.png);
    }
    #functionalities img:nth-of-type(2) {
        content: url(_res/drawable/functionalities/shift_gesture_dark.png);
    }
}



/**************** Add-ons ***************/
#addons { flex-direction: row-reverse; } /*Reverse content order*/
@media (orientation:portrait) and (max-width: 992px) and (max-height: 1200px) {
    #addons {
        flex-direction: column-reverse;
    }
}

#addons img {
    width: 100%;
    height: 100%;
}

#addons img:nth-of-type(1) {
    content: url(_res/drawable/add_ons/emojis_light.png);
}
#addons img:nth-of-type(2) {
    content: url(_res/drawable/add_ons/clipboard_light.png);
}
#addons img:nth-of-type(3) {
    content: url(_res/drawable/add_ons/editor_light.png);
}
#addons img:nth-of-type(4) {
    content: url(_res/drawable/add_ons/converter_light.png);
}

@media(prefers-color-scheme: dark) {
    #addons img:nth-of-type(1) {
        content: url(_res/drawable/add_ons/emojis_dark.png);
    }
    #addons img:nth-of-type(2) {
        content: url(_res/drawable/add_ons/clipboard_dark.png);
    }
    #addons img:nth-of-type(3) {
        content: url(_res/drawable/add_ons/editor_dark.png);
    }
    #addons img:nth-of-type(4) {
        content: url(_res/drawable/add_ons/converter_dark.png);
    }
}



/************** Appearance **************/
#appearance1 {
    background-image: url(_res/drawable/appearance/light/pexels-diva-29597429.jpg);
}
#appearance1 * {
    color: #459e76;
}
#appearance1 div:nth-of-type(1) {
    background-color: #c3f5de;
}
#appearance1 img {
    content: url(_res/drawable/appearance/light/light1.png);
}

#appearance2 {
    background-image: url(_res/drawable/appearance/light/pexels-mustang-2179483.jpg);
}
#appearance2 * {
    color: #3d9b9b;
}
#appearance2 div:nth-of-type(1) {
    background-color: #c4f3f3;
}
#appearance2 img {
    content: url(_res/drawable/appearance/light/light2.png);
}

#appearance3 {
    background-image: url(_res/drawable/appearance/light/pexels-didsss-6404185.jpg);
}
#appearance3 * {
    color: #9a62c2;
}
#appearance3 div:nth-of-type(1) {
    background-color: #f0daff;
}
#appearance3 img {
    content: url(_res/drawable/appearance/light/light3.png);
}

@media(prefers-color-scheme: dark) {
    #appearance1 {
        background-image: url(_res/drawable/appearance/dark/pexels-mikebirdy-380950.jpg);
    }
    #appearance1 * {
        color: #edb166;
    }
    #appearance1 div:nth-of-type(1) {
        background-color: #3e290d;
    }
    #appearance1 img {
        content: url(_res/drawable/appearance/dark/dark1.png);
    }

    #appearance2 {
        background-image: url(_res/drawable/appearance/dark/pexels-steve-34939150.jpg);
    }
    #appearance2 * {
        color: #cea6f8;
    }
    #appearance2 div:nth-of-type(1) {
        background-color: #362345;
    }
    #appearance2 img {
        content: url(_res/drawable/appearance/dark/dark2.png);
    }

    #appearance3 {
        background-image: url(_res/drawable/appearance/dark/pexels-tamanna-rumee-52377920-7985809.jpg);
    }
    #appearance3 * {
        color: #ef8d8d;
    }
    #appearance3 div:nth-of-type(1) {
        background-color: #4a1919;
    }
    #appearance3 img {
        content: url(_res/drawable/appearance/dark/dark3.png);
    }
}



/*************** Privacy ****************/
#privacy { flex-direction: row-reverse; } /*Reverse content order*/
@media (orientation:portrait) and (max-width: 992px) and (max-height: 1200px) {
    #privacy {
        flex-direction: column-reverse;
    }
}

#privacy img {
    content: url(_res/drawable/privacy/light.png);
}

@media(prefers-color-scheme: dark) {
    #privacy img {
        content: url(_res/drawable/privacy/dark.png);
    }
}



/**************** Specs *****************/
#specs {
    display: flex;
    gap: var(--page_padding);
}
#specs > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#specs ul {
    margin-top: var(--container_foreground_separation);
}

#specs > h2, #specs > p {
    width: 75%;
    text-align: center;
}

/* Tablet portrait */
@media (orientation:portrait) and (max-width: 992px) and (max-height: 1200px) {
    #specs > div {
        gap: var(--page_padding);
        flex-direction: column;
        align-items: center;
    }
}



/**************** Store *****************/
#store {
    background-image: url(_res/drawable/grass_light.png);
    mask-image: linear-gradient(to top,
        black calc(var(--page_height) - var(--page_padding)),
        transparent var(--page_height));
    
    gap: var(--container_foreground_separation);
}

#store * {
    color: var(--grass_accent_foreground);
}

@media(prefers-color-scheme: dark) {
    #store {
        background-image: url(_res/drawable/grass_dark.png);
    }
}