/* FONT */
@font-face {
    font-family: "ciao";
    src: url("font/ciao.woff");
}
@font-face {
    font-family: "syne";
    src: url("font/Syne-Italic.woff");
}
@font-face {
    font-family: "times";
    src: url("font/TimesDotRom.otf");
}
.syne {
    font-family: "syne";
    display: inline-block;
    font-size: 5vmax;
    transform: scaleY(.5);
    transform-origin: 0 220%;
    line-height: 1vmax;
}

/* GENERAL */
html {
    overflow-x: hidden;
    margin-left: calc(100vw - 100%); 
}
.div{
    width: 50%;
}
::selection {
    color: #ff0000;
}

/* CHARACTER STYLES */
.emoji {
    font-size: 2.3vmax;
}
.gray {
    color: rgba(0,0,0,.3);
}
h1 {
    font-size: inherit;
    margin: inherit;
    font-weight: inherit;
}

/* EXTERNAL LINKS */
a{
    -webkit-transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
    transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
}
a:link {
    text-decoration: none;
    color:black;
    cursor: url(asset/pointer3.png)  22 22, auto;
}
a:visited {
    text-decoration: none;
    color:black;
}
a:active{
    text-decoration: none;
    color:red;
    text-decoration: underline;
}
img{
    width: 100%;
    margin: 0;
    cursor: url(asset/pointer3.png)  22 22, auto;
   -webkit-transition: filter 2.5s cubic-bezier(0.77,-0.2, 0.6, 1);
    transition: filter 2.5s cubic-bezier(0.77,-0.2, 0.6, 1);
}

/* DESKTOP */
@media screen and (min-width: 750px) {
    /* GENERAL */
    body, html {
        height: 100%;
        margin: 0;
        font-family: "ciao", Arial, sans-serif;
        font-size: 3.15vmax;
        line-height: 1;
        background: white;
        cursor: url(asset/pointer2.png) 22 22, auto;
        -ms-overflow-style: none;
    }
    
    /* EXTERNAL LINKS */
    img:hover{
        -webkit-filter: blur(6px);
        filter: blur(6px);
    }
    a:hover {
        color:black;
        text-decoration: underline;
        cursor: url(asset/pointer3.png)  22 22, auto;
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    
    /* MODAL */
    .modal {
        font-family: "times";
        position: fixed;
        z-index: 10000; 
        left: 70vw;
        top: 25vh;
        width: 21vmax; 
        height: auto;
        background-color: #000000;
        -webkit-box-shadow: 1px 2px 12px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 1px 2px 12px 0px rgba(0,0,0,0.5);
        box-shadow: 1px 2px 12px 0px rgba(0,0,0,0.5);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg); 
    }
    #modalciao {
         font-family: "ciao";
    }
    .modal-content {
        color: #ffffff;
        font-size: .65em;
        margin: .2em;
     }
    .close {
        float: right;
        margin: -.23em 0em 0em 0em;
        -webkit-user-select: none;        
        -moz-user-select: none; 
        -ms-user-select: none; 
        user-select: none; 
    }
    .close:hover{
        cursor: url(asset/pointer3.png)  22 22, auto;
    }
    #tny{
        display: block;
        background-image: url(asset/tny.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        height: 6.85em;
    }
    #tnylink {
        color: #ffffff !important;
        display: block;
        margin: 0em 0em .4em 0em;
    }
    #modaltitle{
        line-height: .6;
        margin: -.1em 0em .6em .05em;
    }
    .modal-content .symbol {
        display: inline-block;
        transform: scaleY(1.1);
        transform-origin: 0 -30%;
    }

    /* SECTIONS */
    .nav-wrapper {
        height: auto;
        width: 100%;
        background: white;
        cursor: url(asset/pointer3.png)  22 22, auto;
        position:fixed;
        z-index: 1000;
        padding-left: 1vmax;
        padding-top: .8vmax;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
        grid-auto-rows: minmax(10px, auto);
        -webkit-transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
        transition: filter filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
    }
    .nav-wrapper:hover {
        text-decoration: underline;
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    .nav2-wrapper:hover {
        text-decoration: underline;
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    .nav-wrapper:active {
        text-decoration: underline;
        color:red;
    }
    .nav2-wrapper:active {
        text-decoration: underline;
        color:red;    
    }
    .top-wrapper {
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
        grid-auto-rows: minmax(10px, auto);
        height: 60%;
        z-index: -100;

    }
    .top-wrapper > p {
        background: white;
        padding: 1vmax;
        margin-top: 3vmax;
        margin-bottom: 0vmax;
    }
    .nav2-wrapper {

        height: 7.5vmax;
        cursor: url(asset/pointer3.png)  22 22, auto;
        -webkit-transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
        transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1); 
    }
    .nav2-wrapper .nav2 {
        position: sticky;
        height: auto;
        width: 100%;
        line-height: 3vmax;
        background: white;
        padding-top: 4.3vmax;
        padding-bottom: .5vmax;
        padding-left: 1vmax;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
        grid-auto-rows: minmax(10px, auto); 
    }
    .bottom-wrapper {
        max-width: 100%;
        bottom: 0px;
    }
    .bottom-wrapper > div {
        background: white;
        padding-bottom: 0px;
    }

    /* WORKS */
    .worktitle{
        margin-top: .7vmax;
        margin-bottom: 3vmax;
        -webkit-transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
        transition: filter 2s cubic-bezier(0.77,-0.2, 0.6, 1);
    }
    .worktitle:hover {
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }

    /* CSSGRID ROWS-COLUMNS */
    #tboccheni2{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #tboccheni {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #where {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    #where2{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    #what {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #who { 
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    /* SPLIT BOTTOM CONTAINER */
    #who2{
        margin: 1vmax;
        margin-top: .5vmax;
        padding-left: 1vmax;
        height: calc(100vh - 9.1vmax);
    }
    #what2 {
        height: calc(100vh - 9.1vmax);
        margin-top: .5vmax;
        padding-left: 1vmax;
        padding-right: 0;
    }

    /* SPLIT SCROLL */
    .container, .content {
        display: flex;  
    }
    .container {
        flex-direction: column;
        overflow: hidden;
    }
    .content, .content div {
        flex: 1;
    }
    .content {
         min-height: 0;
    }
    .content div {
        overflow: auto;
    }
    
    /* MOBILE EXCLUSIONS */
    #mob-where2, #gif, .mobwho, .mobwhat {
            display: none;
    }
}

/* HIDE SCROLLBAR */
::-webkit-scrollbar {
    width: 0px;
}

/* MOBILE */
@media screen and (max-width: 750px) {
    /* GENERAL */
    body {
    height: 100%;
    display: block;
    background-clip: border-box;
    margin: 0;
    font-family: "ciao", Arial, sans-serif;
    padding: 0 1vmax 0 1vmax;
    font-size: 3.25vmax ;
    line-height: 1;
    background: white;
}
    
    /* DESKTOP EXCLUSIONS */
    .modal, #where2, #who, #what {
        display: none;
    }
   
    #mob-where2 {
        display: block;
    }
    #gif{
        opacity: .03;
        padding: .5vmax 4vw .5vmax 4vw;
        height: 80vw;
        width: 86vw;
    }
    #tboccheni {
        position: fixed;
        background-color: white;
        top: 0;
        padding: 1vmax 0 .2vmax 0;
        width: 100%;
        z-index: 1000;
    }
    .nav-wrapper{
        height: 0;
    }
    #tboccheni2 {
        margin: 0;
        display: block;
        width: 100%;
        padding-top: 4.5vmax;
    }
    #where2 {
        margin: 0; 
    }
    .bottom-wrapper{
        display: block;
    }
    .mobwho2, .mobwhat2 {
        display: none;
        margin-bottom: 15vmax;
    }
    .mobwhat, .mobwho {
        width: 100%;
        padding-top: .2vmax;
        padding-bottom: .4vmax;
        margin-bottom: 1.6vmax;
        top: 4.3vmax;
        z-index: 100;
        background-color: white;
        /* STICKY */
        position: -webkit-sticky;
        position: sticky;        
    }
    .arrow1, .arrow2 {
        color: red;
        position: relative;
        /* ANIMATION ARROWS */
        -webkit-animation: mymove .35s infinite; /* Safari 4.0 - 8.0 */
        animation: mymove .35s infinite;
        animation-direction: alternate-reverse;
       -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    /* ANIMATION ARROWS */
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes mymove {
        from {bottom: -5px;}
        to {bottom: 15px;}
    }
    /* Standard syntax */
    @keyframes mymove {
        from {bottom: -5px;}
        to {bottom: 15px;}
    }
}