*:focus { outline: none; }

    #hat-animation {
    position: absolute;
    display: block;
    margin: auto;
    left: calc(50vw - 4vh);
    top: 46vh;
    z-index: 1;
    width: 8vh;
    height: 8vh;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    }
    
    .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
           -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Old versions of Firefox */
              -ms-user-select: none; /* Internet Explorer/Edge */
                  user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Opera and Firefox */
      }
      
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (orientation:portrait)
  { 


      #info-box  {

        position:absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 25vh;
        background-color: white;
        margin: 0 0 0 0;
        padding: 0 0 0 0; 
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        display: flex;
        flex-direction: row;
         }


         
       #name-box {
        box-sizing: border-box;
        margin-top: 0.5vh ;
        margin-bottom: 0.5vh;
        margin-left: 1vw;
        margin-right: 1vw ;

        background-color: white;
        overflow:hidden;
        display: flex;
        flex-direction: column;
        order: 1;
        flex-grow: 0;
        flex-shrink:1;
        flex-basis: auto;
        }
       
        #image-box {
        box-sizing: border-box;
        height: 25vh;
        xwidth: auto;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background-color: white;
        flex-grow: 0;
        flex-shrink:0;
        flex-basis: auto;
        display:flex;
        flex-direction: row;
         order: 2;
        
       }

        #name-para {
        font-size: 2.5vw;
        margin:0;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        line-height: 120%;
        flex-grow: 0;
        flex-shrink:0;
        flex-basis: auto;
        }
        
         
        #qualifications-para {
        font-size: 1.75vw;
        margin: 0;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        flex-grow: 0;
        flex-shrink:0;
        flex-basis: auto;
        }

        #dates-para {
        font-size: 2vw;
        margin: 0;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        flex-grow: 0;
        flex-shrink:0;
        flex-basis: auto;
        }

        #displayed-image {
        box-sizing: border-box;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        xpadding: 0 0 0 0; 
        height: 25vh;
        width: auto;
        max-width: 80vw;
        flex-grow: 0;
        flex-shrink:0;
        flex-basis: auto;
        xorder: 1;
        }

        #image-credit-container{
           writing-mode: vertical-rl;
          transform-origin: 50% 50%;
            transform: rotate(180deg);
          z-index: 600;
          xtop: 25vh;
          height: auto;
       
        padding: 0 0 0 0 ;
        margin: 0 0 0 0;

        flex-grow: 0;
        flex-shrink:0;
        flex-basis: auto;
        xorder: 2;
        
        }
        
         #image-credit-para {

         white-space: wrap;
         display: block;
         overflow: visible;
          z-index: 600;
          height: 25vh;
        padding: 0 0 0 0 ;
        margin: 0.25vh 0.25vh 0.25vh 0.5vh;
        
        font-size: 1.2vh;
        font-family: Arial, Helvetica, sans-serif;

        }
        
        #description-para-nb {
        font-size: 2vw;
        text-align: justify;
        margin-top: 0.7vh;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        overflow-y: auto;

        }     
 
        #description-para {
          display: none;
        }
        
       #connectionsNetwork {
        position:absolute;
        width: 100vw;
        height: 75vh;
        top: 25vh;
        left: 0;
        margin: 0;
        background-color: white;
        overflow:hidden;
          }
               
      #boundaryLine {
        position:absolute;
        top: 25vh;
        left: 0;
        z-index: 400;
        width: 100vw;
        height: 0.25vh;
        background-color: lightgray;
        margin: 0;
        padding:0;
        overflow: hidden;
        } 
        
         
        #navigation-menu  {
        position:absolute;
        z-index:500;
        width:  auto;
        height: auto;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }
        
        #Span1Button  {
        position:absolute;
        z-index:600;
        top: 27vh;
        left: 3vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }

        #Span2Button  {
        position:absolute;
        z-index:600;
        top: 27vh;
        left: 11vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }
        
        #Span3Button  {
        position:absolute;
        z-index:600;
        top: 27vh;
        left: 19vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }

        #NodeSearchMenu {
          z-index:500;
          position:absolute;
          z-index:600;
          top: 27vh;
          left: 27vw;
          width: 38vw;
          height: 6vw;
          margin: 0;
          padding: 0;
          border: none;
          border-radius: 0.5vw;
          background-color: rgb(241, 180, 133);

        }

        #NodeSearchInputFrame {
          position:absolute;
          z-index:600;
          top: 1vw;
          left: 0.5vw;
          width: 30vw;
          height: 3vw;
          margin: 0;
          padding: 0;
          background-color: transparent;
          font-family: "Segoe UI", Arial, Helvetica, sans-serif;
          font-size: 2.5vw;
          vertical-align: middle;
          line-height: 3vw; 
              }
        
         #NodeSearchInputBox {
          background-color: transparent;
          border: none;
          height: 3vw; }

         #NodeSearchCancelButton {
            position: absolute;
            right: 0.5vw;
            top: 0.5vw;
            width: 5vw;
            height: 5w;
            padding: 0;
            margin: 0;
            border: none;
            background-color: rgb(184, 139, 104);
            text-align: center;
            vertical-align: middle;
            line-height: 5vw; 
            font-size: 6vw;
            color: rgb(241, 180, 133);
            border-radius: 0.6vw;
          
         }
        #BackButton  {
        position:absolute;
        z-index:600;
        top: 27vh;
        right: 27vw;
        }
        
        #SearchButton  {
        position:absolute;
        z-index:600;
        top: 27vh;
        right: 19vw;
        }
        
         #RestartButton  {
        position:absolute;
        z-index:600;
        top: 27vh;
        right: 11vw;
        }
        
        #AboutButton  {
        position:absolute;
        z-index:600;
        top: 27vh;
        right: 3vw;
        }
        
      


        
      .navigation-button {
         margin: 0;
         padding: 0;
         width: 6vw;
         height: 6vw;
         background: none;
         border: none;

         }


         
  
  }

@media screen and (orientation:landscape) { 
             

    #hat-animation {
    position: absolute;
    display: block;
    margin: auto;
    left: calc(60vw - 4vh);
    top: 46vh;
    z-index: 1;
    width: 8vh;
    height: 8vh;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    }
    
    
    
    #TopLeftCorner {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    z-index: 1;
    width: 4vmin;
    height: 4vmin;
    }
    

       #connectionsNetwork {
        position:absolute;
        width: 80vw;
        height: 100vh;
        top: 0;
        left: 20vw;
        margin: 0;
        background-color: #ffffff;
        overflow:hidden;
          }
               
      #boundaryLine {
        position:absolute;
        top: 0;
        left: 20vw;
        z-index: 400;
        width: 0.25vw;
        height: 100vh;
        background-color: lightgray;
        margin: 0;
        padding:0;
        overflow: hidden;
        } 
       
      #info-box  {
        
        position:absolute;
        top: 0;
        left: 0;
        width:18vw;
        height: 96.5vh;
        background-color: white;
        margin: 0 0 0 0;
        padding:0.5vh 0 0 0.75vw;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        display: flex;
        flex-direction: column;
         }
        
        #name-box {
          flex-shrink:0;
          order:-1;  
        }
        #name-para {
        font-size: 1.5vw;
        margin-top: 0 ;
        margin-bottom: 0;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        line-height: 120%;
        flex-shrink: 0;
                }
        
        #qualifications-para {
        font-size: 1vw;
        margin-top: 0em;
        margin-bottom: 0em;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        flex-shrink: 0;
                }

        #dates-para {
        font-size: 1.4vw;
        margin-top: 0.25em;
        margin-bottom: 0.25em;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
            flex-shrink: 0;
                }
                
        #image-box {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        width: 100%;
        flex-shrink: 0;
         }
        
        #displayed-image {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        width:100%;
        height: auto;
        flex-shrink:0;
                }

         #image-credit-para {
        font-size: 0.75vw;
        text-align: left;
        margin-top: 0;
        font-family: Arial, Helvetica, sans-serif;
                }
        
        #description-para {
        font-size: 1.2vw;
        text-align: justify;
        margin-top: 1em;
        margin-bottom: 0;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;   
        overflow-y: auto;
                }
                
        #description-para-nb {
          display: none;
        }

        
         #menu-bar  {
        position:absolute;
        z-index:5000;
        width:  79.75vw;
        height: 8vw;
        top: 0vh;
        left: 20.25vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }       
      

        
        #navigation-menu  {
        position:absolute;
        z-index:500;
        width:  auto;
        height: auto;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }
        
        #Span1Button  {
        position:absolute;
        z-index:600;
        top: 2vw;
        left: 22vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }

        #Span2Button  {
        position:absolute;
        z-index:600;
        top: 2vw;
        left: 27vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }
        
        #Span3Button {
        position:absolute;
        z-index:600;
        top: 2vw;
        left: 32vw;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        }

        #NodeSearchMenu {
          z-index:500;
          position:absolute;
          z-index:600;
          top: 2vw;
          left: 37vw;
          width: 38vw;
          height: 4vw;
          margin: 0;
          padding: 0;
          border: none;
          border-radius: 0.5vw;
          background-color: rgb(241, 180, 133);

        }

        #NodeSearchInputFrame {
          position:absolute;
          z-index:600;
          top: 1vw;
          left: 0.5vw;
          width: 30vw;
          height: 2vw;
          margin: 0;
          padding: 0;
          background-color: transparent;
          font-family: "Segoe UI", Arial, Helvetica, sans-serif;
          font-size: 1.8vw;
          vertical-align: middle;
          line-height: 2vw; 
              }
        
         #NodeSearchInputBox {
          background-color: transparent;
          border: none;
          height: 2vw; }

         #NodeSearchCancelButton {
            position: absolute;
            z-index:610;
            right: 0.3vw;
            top: 0.3vw;
            width: 3.4vw;
            height: 3.4vw;
            padding: 0;
            margin: 0;
            border: none;
            background-color: rgb(184, 139, 104);
            text-align: center;
            vertical-align: middle;
            line-height: 3.4vw; 
            font-size: 4vw;
            color: rgb(241, 180, 133);
            border-radius: 0.4vw;
          
         }
        
         #BackButton  {
        position:absolute;
        z-index:600;
        top: 2vw;
        right: 17vw;
        }
        
        #SearchButton  {
        position:absolute;
        z-index:600;
        top: 2vw;
        right: 12vw;
        }
        
         #RestartButton  {
        position:absolute;
        z-index:600;
        top: 2vw;
        right: 7vw;
        }
        
        #AboutButton  {
        position:absolute;
        z-index:600;
        top: 2vw;
        right: 2vw;
        }

        #HomeButton  {
          position:absolute;
          z-index:500;
          bottom: 2vw;
          right: 7vw;
        }

        #ExitButton  {
          position:absolute;
          z-index:500;
          top: 2vw;
          right: 2vw;
          }  
        
        
      .navigation-button {
         
         margin: 0;
         padding: 0;
         width: 4vw;
         height: 4vw;
         border: none;
         background: none;
         }
         
        }