@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: white;
    }

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


    html{
      height: 100%;

    }

    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;
                background-color: #151515;

    }



    .project{
        border-bottom: 1px solid whitesmoke; 
        overflow: auto;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration: none;
        font-size: 5vw;
    }

    .m{
      display: inline-flex;
      align-items: center;
      --space: 0vw;
        min-height: 2vw;
      max-height: 12vw;
      
      white-space: nowrap;
      animation: marquee 10.5s infinite linear;
        animation-timing-function: ease-in-out;
    }
    
    
    .vignette{
        position: absolute;
        height:6vw; 
        align-items:baseline;
        bottom: 25%;
    }


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


    @keyframes marquee {
        0% {
            transform: translateX(0);
            opacity: 1;
      }
        33% {
        
            opacity: 1;
        }

        50% {
            transform: translateX(-10%) ;
            opacity: 1;
        }

        66% {
            
            opacity: 1 ;
        }

      100% {
            transform: translateX(0%);
          opacity: 1 ;
      }
    }



        #list {
            margin-top:10px;
            bottom:0px; 
            z-index:-10; 
            overflow:auto;
            font-family: sector, ibm-plex-mono, helvetica, sans-serif;
            padding-top: 5vw;
            width: 100vw;
          
            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;
/*         transition: 01s;*/
         text-decoration: none;
         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;
            font-weight: 900;
        }


        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: 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;
                background-color: #e7e7e7;

    }



    .project{
        border-bottom: 1px solid black; 
        overflow: auto;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration: none;
        text-align:left;
        padding-left: 2rem;
    }

    .m{
      display: inline-flex;
      align-items: center;
      --space: 0vw;
        min-height: 2vw;
      max-height: 6vw;
      font-size: 3vw;
      white-space: nowrap;
      animation: marquee 10.5s infinite linear ;
        animation-timing-function: ease-in-out;
    }
    


    .vignette{
        position: absolute;
        height:3.5vw; 
        align-items:baseline;
        bottom: 25%;
    }

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


    @keyframes marquee {
        0% {
            transform: translateX(0);
            opacity: 1;
            letter-spacing: 0px;
      }
        33% {
        
            opacity: 1;

        }

        50% {
            transform: translateX(-10%)  ;
            opacity: 1;

        }

        66% {
            
            opacity: 1 ;

        }

      100% {
            transform: translateX(0%);
            opacity: 1 ;


      }
    }



        #list {
            top:0;
            bottom:0;  
            z-index:-10; 
            overflow:auto;
            font-family: Sector, sans-serif;
            font-weight: 100;
            padding-top: 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;
         text-decoration: none;
         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:cell;
            transition: 0.5s;
            font-weight: 900; 
            

        }


        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%;
        }

}