*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
    font-family: bahnschrift ;
    /* font-size: max(1svw, 6pt); 
    max-width: 100%;*/
}
@media screen and (orientation:portrait) {
    
    html {
    	overflow-y: scroll;
	    height: 100%;
	    -webkit-overflow-scrolling: touch;
    }
    body {
	    overflow-y: visible;
	    position: relative;
    }
    html, body {
    	overflow-x: hidden;
    	margin: 0;
    }
    *{font-size: 7pt;}
    p{font-size: 1rem; line-height: 1rem; }
    .horiflex{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .poem{
        width: 100%;
        text-align: center;
        margin: auto;
    }
    .cirque{ 
        position: relative;
        width: 60svw;
        height: 60svw;
        margin: 0 auto;
        margin-bottom: 3rem;

    }
    .schemeL, .schemeR{
        position: absolute;
        top: 0;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    h1{
        font-size: 4rem;
        text-align: center;
    }
    .slot{
        text-align: center;
        width: 60%;
        margin: 0 auto 5vh;
    }
    .BGblack{
        background-color: black;
        color: #C49E8D;
        height: 50rem; 
        p{line-height: 1.5rem;}
    }
    #goat{padding: 20% 0;}
    .goat{
        width: 90vw;
        height: 120vw;
        margin: 5% auto ;
    }
    .poat{ 
        width: 100%;
        margin: 0% auto ;
        text-align: center;
        text-justify: center;
    }
    #layersimg{
        width: 90%;
        margin: 5% auto -5%;
    }
    #crevasseimg{margin: 0vh 0% -3svh 0%;}
    .cubemarginL{
        height: 30vw ;
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-content: end;
    }
    .cubemarginR{
        height: 30vw;
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-content: end;
    }
    .cubewidth{width: 100%;}
    .cube{
        position: absolute;
        width: 90%;
        height: 120vw;
    }
    .layersbox{
        padding-top: 10svh;
        padding-bottom: 5svh;
        
    }
    .title{
        height: 60svh; 
        display: flex; 
        justify-content: center; 
        align-items: center;
    }
    .terminus{
        position: absolute;
        z-index: 21;
        width: fit-content;
        top: 62.5%;
        left: 15%;
    }
    .fini{ height: 50vw; margin-top: 20vw;}
}

@media screen and (orientation: landscape){
    *{font-size: max(1svw, 6pt)};
    p{font-size: 1rem; line-height: 1.5rem; }
    body{overflow-x: hidden;}
    .horiflex{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center 
    }
    .poem{
        width: 35%;
        text-align: center;
        margin: 5rem 0 ;
    }
    .cirque{ 
        position: relative;
        width: 40svw;
        height: 40svw;
    }
    .schemeL, .schemeR{
        position: absolute;
        top: 0;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    h1{
        font-size: 5rem;
        text-align: center;
    }
    .slot{
        width: 25%;
        margin: 0 auto 0;
    }
    .BGblack{
        background-color: black;
        color: #C49E8D;
        align-items: start;
    }
    .goat{
        width: 40vw;
        margin: 20% 0;
    }
    #goat{
        height:100vw ;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: start 
    }
    .poat{ 
        text-align: center;
        width: 25%;
        margin: 45vw auto;
    }
    #layersimg{width: 60%;}
    #crevasseimg{margin: -20vh 0% -3svh 0%;}
    .cubemarginL{
        height: 24vw;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-content: end;
    }
    .cubemarginR{
        height: 24vw;
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        justify-content: end;
        align-content: end;
        margin-top: -0svw;
    }
    .cubewidth{width: 30%;}
    .cube{
        position: absolute;
        width: 90vw;
        height: 120vw;
        .poem{width: 35%;}
    }
    .layersbox{
        margin-top: -25svh;
        padding-bottom: 5svh;
        
    }
    .terminus{
        position: absolute;
         z-index: 21;
        width: fit-content;
        top: 56%;
        left: 20%;
    }
    .title{
        height: 100svh; 
        display: flex; 
        justify-content: center; 
        align-items: center;
    }
    .fini{ width: 100vw ;height: 50vh; margin: -15vw 0 0}
}


@font-face {
    font-family: "bahnschrift";
    src: url(assets/fonts/transfonter.org-20240221-092122/Bahnschrift.woff);
    src: url(assets/fonts/transfonter.org-20240221-092122/Bahnschrift.woff2);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
h2{
    font-size: 2rem;
}
a{color: #C49E8D; text-decoration:none;}
a:hover{color: #FF7E6D;}


#Intro{
    position: relative;
    height: 100svh;
    display: flex;

}
#Intro h1{
    margin: auto;
    font-family: sans-serif;
    z-index: 0;
}
#Intro img{
    position: absolute;
    right: 0;
    bottom: -45svw;
    width: 100svw;
    z-index: 1;
}
.BGblue{
    background-color: #B9E5FE;
    color: #0D152E;
}
.BGbeige{
    width: 90%;
    margin: 5svw;
    border-radius: 0px 0px 2rem 2rem;
    background-color: #EAE2DD;
    color: #731d1d;
}
.BGred{
    background-image: url(assets/images/stipple.svg);
    background-size: 20%;
    background-color: #731d1d;
    color: #FFE494;
    z-index: 10;
}
.BGmblue{
    /* background-color: #001E76;*/
    background-color: #334A9F;
    color: #EAE2DD;
}
.BGdblue{
    background-color: #0D152E;
    color: #C49E8D;
}
.BGwhite{
    background-color: white;
    color: #731d1d;
}
.schemeL{left: -2svw;}
.schemeR{right: -2svw;}
.vertflex{
    display: flex;
    flex-direction: column;
}
#snow{z-index: 4;}
#névé{z-index: 3;}
#firn{z-index: 2;}
#ice{z-index: 1;}
.melting{
    position:absolute;
    max-height: 120vh;
    width: 100%;
}