* { padding: 0; margin: 0; }
@font-face {font-family: "WorkSans-Regular"; src: url("Fonts/WorkSans-Regular.ttf");}
html{font-size: 20px;font-family:"WorkSans-Regular"; cursor:auto; overflow-x: hidden; }
a{text-decoration: none;}



:root{
    --backcolor:rgba(255, 255, 255);
    --vh-px:height:90vh;
    --display: none;
    --overflow:hidden;
    --ongaku:50vh;
    --frameheight: 500vh}


/* TITLE */

.title{ position: fixed;
    font-size: 20px;
    left: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 100;}

.title p{padding: 0;margin: 0;} 


/* DROPDOWN MENU */

.dropbtn {      
    display: flex;
    cursor: pointer;
    position:fixed;
    right: 20px;
    bottom: 20px;
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    z-index: 20;}


.dropdown {     
    position: fixed;
    display: none;
    align-items: center;
    justify-content: end;
    bottom: 0%;
    right: 0%;
    min-width: 250px;
    width: 100vw;
    opacity: 90%;
    height: 100vh;
    z-index: 2;
    background-color: white;
    background-blend-mode: multiply;
    animation-name: drop2;
    animation-duration: 0.7s;}

    @keyframes drop2 {
        0%   {height: 0px; opacity: 0%;}
        80%  {opacity: 40%;}
        100% {height: 100vh; opacity: 90%;}}
    
    .dropdown-content {display: block;
            background-color: transparent;
            width: 100%;
            z-index: 2;
            opacity: 100%;
            align-self:flex-end;}

    .dropdown-content button{
        padding: 8px 20px 8px 0;
        width: 100%;
        border: none;
        background-color: transparent;
        text-align: right;
        font-size: 20px;
        cursor: pointer;}


    .show {display: flex;}

    .animate {  animation-name: drop;
        animation-duration: 1.5s;
        animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);}


    @keyframes drop {
        0% {align-items: end;}
        100%{align-items: center;}}

    .letters {padding: 0;margin: 0; text-align: center;}

    .reveal {       animation-name: reveal;
        animation-duration: 1s;}
        
    @keyframes reveal {
        0%{opacity: 0%;}}


    /* DROPDOWN MENU END */

    /* INTRO */

    .intro { height: 20vh; width: 100vw; padding: 40px 0 0 20px; box-sizing: border-box;}
    .intro a {text-decoration: none; color: #000000; cursor: pointer;}
    .intro p{padding: 0; margin:0; text-align: left; white-space: wrap; cursor: text;word-wrap: break-word;}  

    /*          */

    /* BOX      */

    .fadebox {      display: var(--display);
        position: fixed;
        background-color: transparent;
        height: 100vh;
        width: 100vw;
        z-index: 1000000000;}

        .fadeinto {animation: fadeinto 1.5s}

        @keyframes fadeinto {
                0% {display:block; background-color: #ffffff;}}




    .mainpart {align-self: center; width: 100vw; }
    .box {  display: flex;
        justify-content: center;
        align-items: center;}

    .space{height:10vh;margin: 0 0 0 0}
    .subtitle { height: 10vh; padding: 0 0 0 20px; margin:0 0 0 0; cursor: text; display: flex; align-items: center; background-color: var(--backcolor);}

   /*MAINPART*/
   .mainbox{    margin: 0 0 0 0}
   #mainframe{     width: 100vw;
    height: var(--frameheight);
    box-sizing: border-box;}

    .pretext { height: fit-content; width: 100vw; padding: 40px 20px 0 20px; box-sizing: border-box; }
    .pretext a {text-decoration: none; color: #000000; cursor: pointer;}
    .pretext p{padding: 0; margin:0; text-align: left; white-space: wrap; cursor: text;word-wrap: break-word; text-align:justify}  
    .pretitle p{margin: 20px 0 20px 0 ;}



    .picturebox {display: block; padding: 20px 5px 0 5px;margin: 0 0 30px 0; background-color: var(--backcolor);}
    .slidebox{display:none}

    .doubleimage { 
            display: grid;
            grid-template-columns: 50% 50%;
            column-gap: 0vw;
            padding: 20px 5px 0 5px;margin: 0 0 30px 0;}

    .slideshowtext p{
            font-size: 14px;
            color: #000000;
            text-align: left;
            padding: 0 0 0 0;
            cursor: text;
            vertical-align: top;}
            
    .desktopnav{align-self:center;
                position: absolute;
                right: 0;}
   /**/



   /*EXHIBITIONS*/
   .exhibitions{   display:grid;
    grid-template-columns: auto auto auto auto;
    text-align: left;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 0 20px 10vh 20px;
    height: fit-content;}

    .exhibitions p {margin: 5px 40px 0 0; padding: 0;white-space: nowrap; text-align: left;cursor: text; ;}

    #exframe {      background-color: var(--backcolor);
    height: 50vh;
    width: 100vw;
    box-sizing: border-box;}


    .space#exspace{margin: 0 0 0 0;}
    .exbox::-webkit-scrollbar {display: none;}
   /**/









   /**/
    .vita { align-self: center; width: 100vw; box-sizing: border-box; padding: 10vh 20px 0 20px; height: 50vh; min-height: fit-content;}
    .contact { align-self: center; width: 80vw; box-sizing: border-box; padding: 0 20px 5vh 20px;}
    .contact a {text-decoration: none; color: #000000; cursor: pointer; white-space: nowrap;}
    .subtitle#contact{padding: 10vh 0 0 20px; align-items:baseline;}
   /**/


   /* PORTFOLIO*/
   .portfolio {height: 20vh;} #doc{padding: 20px 0 5vh 0;}
   .gridbox{display: flex;
            width: 100vw;
            height: 100vh;
            justify-content: center;}
   .grid {  width: min-content;
            display: grid;
            grid-template-columns: auto auto;
            padding-top: 10vh;
        column-gap: 40px;}
    .grid p{justify-self: center;
            text-align: center;
            color: #000000;}

    .grid img{ justify-self: center;}
    .border{height:20vh;display:flex;align-items: end;}
    .gridtitle{padding: 3vh 0 0 0;
                text-align: center;}
    #maingridtitle{padding: 10vh 0 0 0;}
    .backbutton { position: absolute;
                  bottom: 20px;
                  right: 20px;}
   /**/

     





        
@media screen and (min-width: 1000px){  #exframe{padding:0 0 0 20px;margin: 0 25vw 0 25vw; width: 50vw;}
                                        #mainframe{padding:0 0 0 20px;}
                                        .intro{padding: 20px 25vw 0 25vw;}
                                        .pretext{padding: 20px 25vw 0 25vw;}
                                        .vita{padding: 20px 25vw 0 25vw; margin: 10vh 0 0 0;}
                                        .contact{padding: 20px 25vw 0 25vw; margin: 0 0 0 0; height: var(--vh-px);}
                                        .dropdown{width: 15vw;}
                                        .picturebox{padding: 0;margin: 0 25vw 50px 25vw;}
                                        .doubleimage{padding: 0;margin: 0 25vw 50px 25vw;}
                                        .slideshowtext p{padding:0 0 0 0; margin:0 0 0 0}
                                        .subtitle{margin: 0 25vw 0 25vw;padding: 20px 0 0 20px; display: block;}
                                        .subtitle#contact{margin: 0 25vw 0 25vw;padding: 20px 0 0 0; display: block;}
                                        .exhibitions{overflow-x: hidden;}
                                        #pretext {margin: 0 0 100px 0;}
                                        .pretitle p{margin: 0 0 0 0 ;}}