@font-face {
        font-family: "whyte";
        src: url("whyte.woff") format('woff');
        }

        @font-face {
        font-family: "nplate";
        src: url("nplate.woff") format('woff');
        }

        body{
            font-family:"whyte";
            margin:0;
        }

        #selectedResult,#moreInfo{
              width:50vw;
             /* height: 30vh;*/
              margin: 0 auto;
        }

        .nplate{
             font-family:"nplate";
        }

        #selectedResult h1{
            font-family:"nplate";
            margin-bottom: 2px;
        }
        #selectedResult p{
            margin: 0;
             /*text-transform: lowercase;*/
        }

        /*#selectedResult p:first-letter,
        #selectedResult p:first-line {
            text-transform: uppercase;
        }*/

        .fadeText{
            opacity: 0.5;
        }
        .nList{
            font-size: 70%;
            max-height: 115px;
            overflow-y: scroll;
        }
        .nList li{
            float: left;
            margin-right: 15px;
        }

        .legend{
            font-size: 70%;
        }

        .redText{
            color: #ff0000;
        }

        #search-input{
            font-family: "nplate";
            font-size: 250%;
            position: relative;
            margin: 10px auto 10px auto;
            width: 50vw;
            text-align: center;
            border: 2px #000 solid;
            border-radius: 2em;
            display: flex;
            bottom: 0;
        }
        #search-input::placeholder{
          font-size: 50%;
          opacity: 0.3;
        }

        #yResults{
            background-color: #f7ecb4;
        }

        #wResults{
            background-color: #000;
            color: #fff;
        }

        #yResults,#wResults{
            width: 50%;
            padding: 5px 10px;
            /*overflow-y:scroll;*/
            min-height: 100px;

        }

        .active{
            background-color: rgba(150,150,150,0.5);
        }

        #result-container{
            width: 50vw;
            display: flex;
            margin: 0 auto;
            /*height: 50vw;*/
            /*padding-top: 40vh;*/
            min-height: calc(100vh - 174px);
        }

        #fixed-top{
            /*position:fixed;*/
            background: #fff;
            width: 100%;
            margin: 0;
            z-index: 2;
            text-align: center;
        }

        .header-not-at-top{
            position: fixed;
            padding-top: 44px;
        }

        #relatedWorks{
            display: flex;
            width: 50vw;
            margin: 20px auto 0 auto;
            justify-content: center;
        }

        .work{
           text-align: center;
           margin: 0 15px;
        }

        .work img{
            border-radius: 100%;
            height: 80px;
            width: 80px;
        }

        img.asterisk{
            border: 2px #ff0000 solid;
        }

        .work p{
            margin: 0;
            text-align: center;
        }

        #moreInfo .deets{
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
        }

        #moreInfo .deets p{
            margin: 0 10px 0 0;
            font-size: 75%;
            cursor: pointer;
            /*animation-name: fadeIn;
           animation-duration: 0.5s;*/
        }

        ul{
            padding-left:0;
        }

        #result-container li{
            list-style: none;
            border-bottom: 1px solid #999;
        }

        h2.yellow{
            transform: rotate(-180deg);
            color:#f7ecb4;
        }
        h2.white{
            color: #ccc;
            /*
            color: #fff;
            -webkit-text-stroke: 1px black;*/
        }

        h2.white, h2.yellow{
            writing-mode: vertical-lr;
            text-orientation:mixed;
            margin: 0 -8px;
            text-align: center;
        }

        #anchor{
            position: absolute;
            width: 1px;
            height: 1px;
            top: 800px;
            left: 0;
        }
        #loadingBorder{
            position: absolute;
            width: 50vw;
            height: 50px;
            top: 50vh;
            left: 24vw;
            border: #999 3px solid;
            background-color: #fff;
        }

        #loadingBorder p{
            position: absolute;
            color: #999;
            z-index: 2;
            font-family: 'nplate';
            font-size: 42px;
            margin: 0;
        }

        #loadingBar{
            background-color: #000;
            text-align: center;
            padding: 25px 0;
            width:0%;
        }

        #footer{
            width:100%;
            height: 50px;
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 25px 0;
            display:flex;
            justify-content: center;
            column-gap: 50px;
            align-items: center;
        }

        #footer a{
            color: #fff;
        }

        #footer img{
            max-height: 60px;
            max-width: 250px;
        }

        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 100;}
        }

        @media all and (orientation: portrait) {
            #result-container{
                width: 95vw;
                min-height: calc(100vh - 60px);
            }
            #selectedResult, #relatedWorks{
              width: 80vw;
            }
            #relatedWorks{
              flex-wrap: wrap;
            }
            #search-input{
                width:95vw;
            }
            #footer{
                height: 100px;
                flex-wrap: wrap;
            }
            #search-input{
                font-size: 200%;
            }
        }