/* Singlepage Arrangement */


.loadDiv{
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
}



.disable-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
      
  .disable-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
  }

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

    
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding-bottom: 65px;
    }

    body{
        height: 100vh;

        padding-bottom: env(safe-area-inset-bottom);
    }

    main{
        margin: 0;
        width:100%;
        display: grid;
        grid-template-columns: 90% 10%;
        position: absolute;
        transition: transform .6s;
        transform: translateX(-100%);
    }

    main:has(>* .active){
        transform: translateX(0%);
    }
    
    .mainContent{
        width: 100%;
        height: 100%;
        display: flex;
    }

    .cover{display: none;}
    

    .layer0 {
        background-color: #eda443; 
        display: flex; 
    }

    .section {
        width:100%;
        height: 100vh;
        height: 100dvh;
        position: relative;
        display: none;
        flex-direction: column;
        margin-bottom: auto;
    }

    .folder {
        width:auto;
        height: auto;
        margin: 0 10px;
        overflow-y: scroll;
    }
    
    .folder::-webkit-scrollbar, .folder::-moz-scrollbar {
        width: 0px;
        background: transparent;
    }
    
    .profileImg{
        width:100%;
        aspect-ratio: 4912/3279;
    }
    
    .pageTitle{
        padding: .5em 0 0 0;
        height: auto;
        box-shadow: 0 10px 10px rgba(0,0,0,.1);
    }
    


    .active {
        display:flex;
        flex-flow: column;
        flex: 1;
    }
    
}



@media only screen and (min-width: 900px) {

    body{
        height: 100vh;
    }

    main{
        margin: 0;
        width:100vw;
        height: 100%;
        position: relative;
        margin:0 auto;
        display: flex;
        align-items: center;
        flex-flow: column-reverse;
        gap: 0px;
        background-color: transparent;
    }

    main:has(>* .about.active){
        width:750px;
        /*left: calc(50vw - 375px);*/
    }

    .mainContent{
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: row-reverse;
        flex: 1;   
        background-color: transparent;
    }

    .folder::-webkit-scrollbar, .folder::-moz-scrollbar {
        width: 0px;
        background: transparent;
    }
    
    .profileImg{
        width:100%;
        aspect-ratio: 4912/3279;
    }
    
    .pageTitle{
        display:none;
        padding: .5em 0 0 0;
        height: auto;
        box-shadow: 0 10px 10px rgba(0,0,0,.1);
        flex:0;
    }
    
    .layer0 {
        background-color: #eda443; 
        display: none; 
    }

    .section {
        border:none;
        height:100%;
        width:33%;
        min-width: 0;
        position: relative;
        display: none;
        flex-direction: column;
        margin-bottom: auto;
        flex: 1;
    }

    .layer0>*{display:block}

    .folder {
        width:auto;
        height: auto;
        margin: 10px;
        flex-grow: 1;
        overflow-y: scroll;
    }

    
    .active {
        display:flex;
        flex-flow: column;
        flex: 1;
        transition: transform .3s;
    }

    .part{
        transition: transform .3s;
    }

    .part:not(.active) {
        display:flex;
    }

    .cover{
        transition: opacity .4s, mix-blend-mode 2s, height .2s;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: inherit;
        mix-blend-mode: darken;
        z-index: 999;
        opacity: .9;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cover::before{
        position: absolute;
        content: '';
        top: 0;
        height:8vh;
        width: 100%;
        transform: translateY(-100%);
        clip-path: polygon( 0.333% 100%,0.4% 100%,0.4% 100%,4.441% 97.88%,7.796% 90.675%,10.638% 79.635%,13.138% 66.01%,15.467% 51.05%,17.795% 36.006%,20.295% 22.129%,23.137% 10.669%,26.493% 2.876%,30.533% 0%,30.533% 0%,39.309% 0%,46.563% 0%,52.461% 0%,57.164% 0%,60.838% 0%,63.644% 0%,65.746% 0%,67.309% 0%,68.494% 0%,69.467% 0%,69.467% 0%,73.507% 2.87%,76.863% 10.65%,79.705% 22.091%,82.205% 35.949%,84.533% 50.975%,86.862% 65.923%,89.362% 79.547%,92.204% 90.598%,95.559% 97.832%,99.6% 100% ); 
        background-color: inherit;
    }

    .active .cover{
        display: none;
    }

    .active .cover::before{
        display: none;
    }


    .part:not(.active) .cover:hover{
        /*mix-blend-mode:multiply;*/
        opacity: .6;
        cursor: pointer;
    }

    .cover:hover h1{
        opacity: 1;
    }


    .cover h1 {
        opacity: 0;
        transition: opacity .3s;
        mix-blend-mode: difference;
    }


    .layer0.active {
        border-radius: 6px;
        height:100%;
        min-width:100%;
        flex:10;
    }
}