@font-face {
    font-family: 'Sector';
	src: url('fonts/SectorGX.ttf');
	src: local('☺'), url('/fonts/SectorGX.ttf') format('truetype');
	font-weight: 100 900;
}

@media only screen and (max-width: 414px)  {
     
@viewport {
   width: device-width;
   zoom:1;
}
    
    ::-moz-selection { /* Code for Firefox */
      color: springgreen;
      background: black;
    }

    ::selection {
      color: springgreen;
      background: black;
    }


    html{
      height: 100%;
        background-color: #151515;
    }

    body{
            font-family: Sector, ibm-plex-mono, helvetica, sans-serif;
                width:100%; 
            height:100px; 
            max-height:100px; 
    /*        overflow:hidden; */
            padding:0; 
            margin:0; 
            border:0; 
            z-index:10;
            cursor:crosshair;
    }



    .project{
        border-bottom: 1px solid whitesmoke; 
        overflow: auto;
        text-decoration: underline;
    }
    
    .vignette{
        position: relative;
        height: 20px; 
        align-items:baseline;
    }

    label{
        line-height:10vw;
      margin-top: 10px;
        min-height: 2vw;
      max-height: 4vw;
      font-size: 4vw;
      white-space: nowrap;
        font-weight: 100;

/*      animation: marquee 10.5s infinite linear; */
    }
    
    p{
        
        display: inline-flex;
        align-items: center;
        min-height: 2vw;
        max-height: 3vw;
        font-size: 5vw;
        text-transform: uppercase;
        letter-spacing: 3px;
        white-space: nowrap;
        text-rendering: optimizeLegibility;
/*      animation: marquee 10.5s infinite linear; */
    }

    

        #list {
            margin-top:10px;
            bottom:0px; 
            z-index:-10; 
            overflow:auto;
            font-family: Sector, ibm-plex-mono, helvetica, sans-serif;
            padding: 3%;
            width: 94vw;
            color:whitesmoke; 
        }


    navtext {
        font-size: 14px;
        line-height: 1.2rem;
        font-weight: 400;
        color: white;
        word-spacing: 0.5em;
        font-family: ibm-plex-mono, sans-serif;

    }

    nav {
        position: fixed;
        width: 94vw;
        padding: 5px 3% 5px  3%;
        background-color: dimgrey;
/*        whitesmoke*/
        box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.9);
        margin-top: -10px;
        z-index: 10;
    }


     a:-webkit-any-link {
            color: whitesmoke;
         text-decoration: none;
/*         transition: 01s;*/
         font-weight: 100;
            }

        a:hover {
            color: springgreen;
            text-decoration: none;  
            -webkit-transition: all 500ms cubic-bezier(01, 0, 0, 1);
            -moz-transition: all 500ms cubic-bezier(1, 0, 0, 1);
            cursor:crosshair;
            transition: 0.5s;
        }


        span.line_wrap {
            position: relative;
            display: inline-block;
        }
        span.line {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 100%;
            width: 0;
            border-top: 5px solid springgreen;
            -webkit-transition: all 00ms cubic-bezier(1, 0, 0, 1);
            -moz-transition: all 00ms cubic-bezier(1, 0, 0, 1);
        }
        span.line_wrap:hover span.line {
            width: 100%;
        }

}

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

    ::-moz-selection { /* Code for Firefox */
      color: springgreen;
      background: black;
    }

    ::selection {
      color: springgreen;
      background: black;
    }


    html{
      height: 100%;
    }

    body{
            font-family: ibm-plex-mono, helvetica, sans-serif;
                width:100%; 
            height:100px; 
            max-height:100px; 
    /*        overflow:hidden; */
            padding:0; 
            margin:0; 
            border:0; 
            z-index:10;
            cursor:crosshair;
    }



    .project{
        border-bottom: 1px solid #5555; 
        overflow: auto;
        text-transform: uppercase;
        letter-spacing: 3px;
        text-decoration: underline;
    }
    
    .vignette{
        position: absolute;
        height: 20px; 
        align-items:baseline;
    }
    
    label{
        line-height:2vw;
        margin-top: 10px;
        min-height: 2vw;
        max-height: 1vw;
        font-size: 12px;
        font-weight: 100;
        white-space: nowrap;

/*      animation: marquee 10.5s infinite linear; */
    }

/*
    .m{
      display: inline-flex;
      align-items: center;
      --space: 0vw;
        min-height: 4vw;
      max-height: 5vw;
      font-size: 2vh;
      white-space: nowrap;
      animation: marquee 10.5s infinite linear; 
    }
*/


/*
    .m, p p:before, p:after{
        content: var(--data-text);
        margin: 0px;
        padding-left: var(--space);
    }
*/
/*

    @keyframes marquee {
        0% { transform: translateX(0); }
        10% { transform: translateX(0); }
        5% { transform: translateX(calc(-100% + 200px)); }
        95% { transform: translateX(calc(-100% + 200px)); }
        
    }
*/


        #list {
            top:0px;
            bottom:0px;  
            z-index:-10; 
            overflow:auto;
            font-family: Sector, ibm-plex-mono, helvetica, sans-serif;
            padding: 3%;
            width: 94vw;
            background: RGBA(255,25,255,0); 
            color:black; 
        }


        navtext {
            font-size: 12px;
            font-weight: 400;
            color: black;
            word-spacing: 0.5em;
            font-family: ibm-plex-mono, sans-serif;

        }

        nav {
            position: fixed;
            width: 94vw;
            padding: 5px 3% 5px  3%;
            background-color: whitesmoke;
            box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.9);
            margin-bottom: 1px;
            z-index: 10;
        }


     a:-webkit-any-link {
            color: black;
/*         transition: 01s;*/
         font-weight: 100;
            }

        a:hover {
            color: springgreen;
            text-decoration: underline;  
            -webkit-transition: all 500ms cubic-bezier(01, 0, 0, 1);
            -moz-transition: all 500ms cubic-bezier(1, 0, 0, 1);
            cursor:cell;
            transition: 0.5s;
        }


        span.line_wrap {
            position: relative;
            display: inline-block;
        }
        span.line {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 100%;
            width: 0;
            border-top: 5px solid springgreen;
            -webkit-transition: all 00ms cubic-bezier(1, 0, 0, 1);
            -moz-transition: all 00ms cubic-bezier(1, 0, 0, 1);
        }
        span.line_wrap:hover span.line {
            width: 100%;
        }

}