video { margin: auto;
       position: absolute;
       top: 50%;
       left: 0%;
       transform: translate(0%, -50%);
       visibility: visible;
       opacity: 1;
       width: 100%;
       height: 100%;
       z-index: -1; }
h1{ z-index: 1; }
img { width: 100%; height: 100%; }
* { font-family: "MS Sans Serif", Geneva, sans-serif;  }
h1 { font-family:'KG WhY yOu GoTtA Be So MeAn', sans-serif;
     text-align: center;
     color: white;
     font-size: 7.0em;
     position: relative;
     top: 2.5em; }

nav { width: 95%;
      margin: auto; }
    
nav ul { display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0; }

nav ul li { width: 20%;
        box-sizing: border-box; }
    
nav ul li:first-of-type{ border-left: none; }
    
nav ul li a { text-decoration: none;
        display: block;
        color: #fff;
        text-transform: uppercase;
        font-weight: bold;
        padding: 10px;
        background: #98AFC7;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        position: relative; 
        left: 100%; }

#species, #facts, #game { padding: 0em 5em; }

#species { position: relative; 
           top: 5em; }
#facts { margin-right: 30em; }
h2 { font-family:'KG WhY yOu GoTtA Be So MeAn', sans-serif; 
     font-size: 3em; }

.row1 { grid-column: 1/3;
        grid-row: 1/1 }
.row2 {grid-column: 2/3; grid-row: 1/1 }
.row3 { grid-column: 3/3; grid-row: 1/1 }
ol { font-size: 1.5em;
     display: grid;
     grid-template-rows: 17em;
     grid-template-columns: 15em; }
ol, p { line-height: 1.5em; 
        font-weight: bold; 
        font-style: italic; }
p { font-size: 1.25em; }

#wrapper { height: 140em; }

.circular-progress-bar { position:relative;
          margin: 0 auto;
          transform: rotate(-90deg);}
        
.progress-percentage, .progress-text { position:absolute;
          width:100%;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%) rotate(90deg);
          text-align:center;
          padding: 0px 60px; }

.progress-percentage { font-size:60px;
                       left:60%; }
      
.progress-text { left:35%;
                color:#585858;
                font-size:21px; }
.my-progress-bar { position: relative; 
                   top: 25em;
                   left: 40em; 
                   color: #98AFC7; }

#gentoo { width: 225px;  height: 300px; }
#macaroni { width: 400px; height: 300px; 
            position: relative;
            right: 3em; }
#yelloweyed { width: 450px; height: 300px; }
#penguinpics { display: grid;
        grid-template-rows: 20em;
        grid-template-columns: 20em;  }
#game { position: relative; 
        bottom: 4em; }
#button1, #button2, #button3 { position: relative; top: 0.6em; left: 1.0em; }