/* CSS for header */

@media only screen and (max-width: 900px) {
    .sidebar {
        display:flex;
        flex-direction: column-reverse;
        width: 9.5vw;
        height: 100vh;
        height: 100dvh;
        justify-content: left;
        align-items: flex-end;
    }

    .menu{
        width: 100%;
        min-width: 100%;
        height: 100%;
        display: flex;
        transition: flex 1s;
        flex-direction: column-reverse;
        place-items: flex-end;
    }

    #tab0 {background-color: transparent;}
    /*#tab1 {z-index: 4;}
    #tab2 {z-index: 3;}
    #tab3 {z-index: 2;}*/

    .layer1 {background-color: #e86c46;}
    .layer2 {background-color: #db7191;}
    .layer3 {background-color: #f7de72; }

    .tabContainer:not(.layer0) {
        width: 100%;
        display: flex;
        align-self: flex-start;
        height: 10%;
        margin: 10px 0;
        flex: 1;
        margin: 0;
        height: 30vh;
        transition: transform .3s .2s, width .15s 2s;
    }

    .layer0:not(.section) {
        z-index: 1001;
        width: 100%;
        display: flex;
        min-height: 5%;
        height: 8%;
        margin-top:1vh;
    }

    .front{
        z-index:1;
        color: #000000
    }

    .front > * h3 {
        color: #000000;
    }

    .tab:hover {
        cursor:pointer;
    }

    .clip {
        /*align-self: flex-start;*/
        display: flex;
        width:100%;
        height:130%;
        flex: 1;
        place-items: center;
        overflow-y: hidden;
        transition: margin .5s;
        clip-path: polygon( 0% 0%,0% 0%,0.002% 0.002%,0.006% 0.009%,0.013% 0.018%,0.021% 0.029%,0.03% 0.042%,0.039% 0.054%,0.047% 0.065%,0.054% 0.075%,0.058% 0.081%,0.06% 0.083%,0.06% 0.083%,2.193% 4.125%,9.402% 7.482%,20.439% 10.325%,34.055% 12.827%,49.003% 15.157%,64.032% 17.487%,77.895% 19.988%,89.343% 22.831%,97.128% 26.188%,100% 30.23%,100% 30.23%,100% 39.004%,100% 46.258%,100% 52.155%,100% 56.86%,100% 60.534%,100% 63.342%,100% 65.447%,100% 67.011%,100% 68.199%,100% 69.173%,100% 69.173%,97.128% 73.215%,89.343% 76.572%,77.895% 79.415%,64.032% 81.917%,49.003% 84.247%,34.055% 86.577%,20.439% 89.078%,9.402% 91.921%,2.193% 95.278%,0.06% 99.32% );  
    }
    
    li.tabContainer:nth-last-of-type(2) .tab{
        transform: translateY(-20%);
    }

    li.tabContainer:nth-last-of-type(3) .tab{
        transform: translateY(-40%);
    }

    h3{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height:70%;
        margin: 0 auto;
        text-align: center;
        text-align: -webkit-center;
        writing-mode: vertical-rl;
    }

    .dots{
        margin: auto;
        padding: 0 10px;
    }

    .link{
        height:100%;
        width: 100%;
    }
    .dot{
        background-color: #000000;
        width: 6px;
        height: 6px;
        margin: 5px auto;
        border-radius: 50%;
    }
}

@media only screen and (min-width: 900px) {
    
    .sidebar {
        display:flex;
        align-items: flex-end;
        width: 100%;
        min-height: 9%;
        max-height: 9%;
        flex: 0;

    }

    .menu{
        width: 100%;
        height: 90%;
        margin:1vh auto 0;
        display: flex;
        flex-direction: row-reverse;
        transition: flex 1s;
        vertical-align:bottom;
    }

    #tab0 {
        background-color: transparent;
        position: absolute;
        display: flex;
        right:0;
        top:0;
        width: 5%;
        height:calc(5% + 1em);
        z-index: 1001;
        justify-content: center;
    }


    /*#tab1 {z-index: 4;}
    #tab2 {z-index: 3;}
    #tab3 {z-index: 2;}*/

    .layer1 {background-color: #e86c46;}
    .layer2 {background-color: #db7191;}
    .layer3 {background-color: #f7de72; }

    .tabContainer {
        display: flex;
        place-items: center;
        transition: transform .5s, width .15s;
        height:100%;
        flex: 1;
    }


    .tab:hover {
        cursor:pointer;
    }

    .clip {
        align-self: flex-end;
        display: grid;
        width:100%;
        height:8vh;
        place-items: center;
        overflow: hidden;
        text-align: center;
        text-align: -webkit-center;
        transition: transform .5s;
        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% ); 
    }

    h3{
        font-size: calc(1.1rem + 0.4vw);
        width: 60%;
        margin: auto;
        white-space: nowrap; 
        overflow: hidden;
        text-align: center;
        text-align: -webkit-center;
        text-overflow: ellipsis;
        writing-mode: horizontal-tb;
    }

    .dots{
        margin: auto 0;
        padding: 0 10px;
    }

    .link{
        height:100%;
        width: 100%;
    }
    .dot{
        background-color: #000000;
        width: 6px;
        height: 6px;
        margin: 5px auto;
        border-radius: 50%;
    }
}