:root{
    --text-color: black;
    --text-color-muted: rgb(119, 119, 119);

    --background-color:rgb(234, 234, 234);
    --background-color-muted:rgb(201, 201, 201);



    --background-color-semitransparent:rgb(201, 201, 201,.3);


    --background-color-minimal:rgb(247, 247, 247);



    --background-color-contrast:rgb(86, 86, 86);

    --border-color:rgb(205, 205, 205);
    --border-color-subtle:rgb(231, 231, 231);

    --header-min-height: 7em;
    --footer-min-height: 100px;

    --border-radius-main: 5px;

    --border-radius-images :3px;

    --image-margin:2em;
}

.bg-gray{
    --text-color: rgb(255, 255, 255);
    --text-color-muted: rgb(190, 190, 190);

    --background-color:rgb(85, 85, 85);

    --border-color:rgb(133, 133, 133);
    --border-color-subtle:rgb(119, 119, 119);
}




.content-wrapper{
    opacity: 0;
    transition: 1s;
}
.loaded .content-wrapper{
    opacity: 1;
}




a{
    color:var(--text-color-muted);
    text-decoration: none;
    transition: color .5s;
}
a:hover{
    color:var(--text-color)
}

li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

body{
    min-height: 100vh;
    font-family: 'sans-serif';
    font-family: 'opensans';
}


#page-wrapper{
    min-height: calc( 100vh - var(--footer-min-height));
}

body, #page-wrapper, ul, li, section, article{
    padding: 0;
    margin: 0;
}

#header{
    /* min-height:var(--header-min-height); */
}

#header .navbar{
    background:var(--background-color);

    display: flex;
    flex-direction: row;

    padding:0 2em;
    gap:3em;
    

    height:var(--header-min-height);
    height:100px;
}

#header.scrolled .navbar{
    /* outline: 2px dashed orange;
    outline-offset: -2px; */
} 


#header .navbar .logo{
    height:80%;
}
#header .navbar .logo img,svg{
    width: 100%;
    height: 100%;
    object-fit:contain;
}

#header .navbar .desktop-menu{
    flex-grow: 1;
}

#header nav{
    align-items: center;
}

#header nav ul{
    display: flex;
    flex-direction: row;
    gap:1em;
    justify-content: right;
}

#header nav li a{
    color: var(--text-color-muted);
    padding: .3em;
    user-select: none;
    transition: all .5s;
}

#header nav li a::before{
    content: "🞂" ;
    transition: all .1s;
    opacity:0;
}
#header nav li:hover a:not(.active)::before{
    opacity: 1;
}

#header nav li a.active{
    cursor:auto;
}
.loaded #header nav li a.active{
    color: var(--text-color);
}
#header nav li a.active::before{
    opacity: 1;
}
.loaded #header nav li a.active::before{
    opacity: 0;
}


.x{
    content: "➤ ➭ ⮚ 🞂";
}














/* ***************************************************************
content padding
*************************************************************** */

.modular-features, .modular-gallery, .modular-text{
    /* background-color: var(--background-color-muted); */
    /* margin:10px 0; */
}



#start section{
    padding: 2em 4em;
}

/* #body-wrapper{
    padding:2em 4em;
}

.modular-features, .modular-gallery, .modular-text{
    background-color: var(--background-color-muted);
    padding:2em 4em;
    margin:10px 0;
} */


#start{
    padding: 0;
}












/* ***************************************************************
general
*************************************************************** */






h1{
    /* color:rgb(167, 167, 167); */
    font-size:3em;
}

h2 {
    margin:0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: .5em;
    align-items: center;
    /* text-align: center; */
    font-size: 2rem;
    letter-spacing: .05em;
    /* color: var(--text-color-muted); */
    margin: 2em 0;
}

h2::before, h2::after {
    height: 1px;
    background: var(--border-color);
    content: '';
}




h3 {
    margin:0;
    display: grid;
    grid-template-columns: 1fr auto 6fr;
    column-gap: .5em;
    align-items: center;
    /* text-align: center; */
    font-size: 1.3rem;
    /* color: var(--text-color-muted); */
    margin: 2em 0 1em 0;
}

h3::before, h3::after {
    height: 1px;
    background: var(--border-color);
    content: '';
}






img{
    border-radius: var(--border-radius-images);
}

.float-left{
    float: left;
    margin: 0 var(--image-margin) 1em 0;
    max-width: 50%;
}
.float-right{
    float: right;
    margin: 0 0 1em var(--image-margin);
    max-width: 50%;
}

.w30{
    max-width: 30%;
}
.w50{
    max-width: 50%;
}
.w100{
    width: 100%;
}

.image-align-center{
    margin: 1em 50%;
    transform: translateX(-50%);
}







/* ***************************************************************
hero
*************************************************************** */

.hero{
    display:grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    position: relative;
    background-position: center center;
    background-size: cover;
}

.hero h1, .hero h2{
    padding: 0;
    margin: 0;
}
.hero .container{
    z-index: 2;
    grid-area: 1/1/2/2;
}

.hero .container.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding:5px;
}
.hero .container.content *{
    background-color: var(--background-color-semitransparent);
    background-color: rgba(0,0,0,.5);
    color:rgb(200,200,220);
    padding:10px;
    border-radius: var(--border-radius-main);
}
.hero .container.content p{
    padding:20px !important;
}
.hero .container.content a{
    background:rgb(50,50,50);
}
.hero .container.content a:hover{
    color:rgb(255,200,30);
}

.image-overlay { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; transition: all .5s; }

.overlay-light .image-overlay { background: rgba(255, 255, 255, .4); }

.overlay-light-gradient .image-overlay { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)); }

.overlay-stripes .image-overlay {
    /* https://grabient.com/HQVgTAjANMCcAcsYBZZLiA7DTA2bwkAzDAAwQgwSbJViW7DymkwjK5TLC4dA?style=linearSwatches&angle=135&steps=5 */
    background: linear-gradient(
        135deg,
        hsl(0, 0%, 80%) 0%,
        hsl(0, 0%, 80%) 33%,
        hsl(0, 0%, 60%) calc(33% + 1px),
        hsl(0, 0%, 70%) 67%,
        hsl(0, 0%, 80%) calc(67% + 1px),
        hsl(0, 0%, 80%) 100%
    );
    opacity:.4;
}
.overlay-stripes-color .image-overlay {
    /* https://grabient.com/HQVgTAjANMCcAcsYBZZLiA7DTA2bwkAzDAAwQgwSbJViW7DymkwjK5TLC4dA?style=linearSwatches&angle=135&steps=5 */
    background: linear-gradient(
        135deg,
        #d0415e 0%,
        #d0415e 40%,
        #d65767 calc(40% + 1px),
        #d65767 50%,
        #db7971 calc(50% + 1px),
        #db7971 60%,
        #e0a57c calc(60% + 1px),
        #e0a57c 100%
    );
    opacity:.8;
}

.overlay-colorful-1 .image-overlay { 
    background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    opacity:.2;
}
.overlay-colorful-2 .image-overlay { 
    background: radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    opacity:.2;
}

/* https://grabient.com/HQVgTAjANMCcAcsYBZZLiA7DTA2bwkAzDAAwQgwSbJViW7DymkwjK5TLC4dA?style=linearSwatches&angle=135&steps=5 */
.overlay-colorful-3 .image-overlay {
    background: linear-gradient(135deg, #d0415e 0%, #d0415e 20%, #d65767 calc(20% + 1px), #d65767 40%, #db7971 calc(40% + 1px), #db7971 60%, #e0a57c calc(60% + 1px), #e0a57c 80%, #e6d886 calc(80% + 1px) 100%);
    opacity:.2;
}


.hero:hover .image-overlay{
    opacity:.5;
}

.overlay-dark .image-overlay { background: rgba(0, 0, 0, 0.4); }

.overlay-dark-gradient .image-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); }


.hero.hero-large .container{
    height:75vh;
}
.hero.hero-medium .container{
    height:50vh;
}
.hero.hero-small .container{
    height:35vh;
}
.hero.hero-tiny .container{
    height:15vh;
}





/* ***************************************************************
herovideo
*************************************************************** */


.modular-herovideo{
    /* outline: 2px dashed green;
    outline-offset: -2px; */
}

.hero-video{
    z-index: 0 !important;
    background-color: var(--background-color-muted);
}

.hero-video video{
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity:0;
    transition: all .5s;
}

.hero-video video.loaded {
    opacity:1;
}







/* ***************************************************************
gallery
*************************************************************** */

.gallery-images{
    display: flex;
    flex-direction: row;
    gap:5%;
    justify-content: center;
    align-items: center;

    margin-top:5em;
}

.image-container{
    display: grid;
    grid-template-areas: "overlay";
    width:25%;
    aspect-ratio: 1/1;
}
.image-container .image{
    grid-area: overlay;
    overflow: hidden;
    border-radius: var(--border-radius-main);
}
.image-container .image img{
    object-fit: contain;
    width:100%;
    height: 100%;
}

.image-container .image-info{
    grid-area: overlay;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container .image-title{
    background:var(--background-color-semitransparent);
    border-radius: var(--border-radius-main);
    padding: 0 6px 4px 6px;
    user-select: none;
}





/* ***************************************************************
features
*************************************************************** */


.modular-features{

}

.modular-features .features{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 5em 0 0 0;
    gap:3em;
}
.modular-features .features.third{
    gap:4em 1em;
}



.feature{
    padding: 4em 2em 2em 2em;
    margin:0;
    display: flex;
    flex-direction: column;
    width: calc( ( 100% - 11em ) / 2 );
    background-color: var(--background-color-minimal);
    border-radius: var(--border-radius-main);
}

.features.third .feature h3{
    margin-top:1.5em;
}

.features.third .feature{
    width: calc( ( 100% - 14em ) / 3 ); 
}

.feature-image-wrapper{
    text-align: center;
}

.feature-image{
    display: inline-block;
    width: 70%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
}
.features.third .feature-image{
    width: 85%;
}
.feature-image img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.features.third .feature-content{
    padding:0 .7em;
}
.features.half .feature-content{
    padding:0 1em;
}







#footer{    
    color: var(--text-color);
    background: var(--background-color);
    min-height: var(--footer-min-height);
    font-size: .80em;
}

#footer .footer-content{    
    display: flex;
    flex-direction: row;
    padding:2em 0;
    gap: 5%;
    justify-content: center;
    align-items: top;
}
#footer .footer-content div{
    width: 25%;
    padding-top: 1.3em;

    /* background-color: rgba(255,255,255,.05); */
    /* border-radius: var(--border-radius-main); */

    display: flex;
    flex-direction: column;
    align-items: center;

    border-top:1px solid var(--border-color);
}

#langswitcher{
    display:flex;
    flex-direction:row;
    gap:10px;
}

#langswitcher .language{
    text-transform:lowercase;
    color: var(--text-color-muted);
    cursor: pointer;
}

#langswitcher .language.active{
    color: var(--text-color);
    cursor: default;
}


@font-face {
font-family: 'afta';
font-style: normal;
src: url(../fonts/AftaSansThin-Regular.otf) format('opentype');
}

@font-face {
font-family: 'afta';
font-style: italic;
src: url(../fonts/AftaSansThin-Italic.otf) format('opentype');
}

@font-face {
font-family: 'opensans';
font-style: normal;
src: url(../fonts/OpenSans.ttf) format('truetype');
}

@font-face {
font-family: 'opensans';
font-style: italic;
src: url(../fonts/OpenSans-Italic.ttf) format('truetype');
}



/* from quark theme */

@media screen and (min-width: 480px) { html { font-size: calc(16px + 4 * ((100vw - 480px) / 800)); } }

@media screen and (min-width: 1280px) { html { font-size: 20px; } }