/*
 * Want to change this website's styes? Learn more about CSS:
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
 */
@font-face { 
    font-family: Akzidenz; src: url('font/AkzidenzL.otf'); 
}
@font-face { 
    font-family: Akzidenzb; src: url('font/AkzidenzB.otf'); 
}
@font-face { 
    font-family: almeria; src: url('font/almeria.ttf'); 
}
@font-face { 
    font-family: AkzidenzE; src: url('font/AkzidenzE.otf'); 
}
@font-face { 
    font-family: AkzidenzME; src: url('font/AkzidenzME.otf'); 
}




/*PLANTS + ANIMALS*/
.name {
    font-style: italic;
    font-family: almeria;
    
}

#species1 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #FFF8E8;
    color:slategrey;  
}

#species2 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: orange;
    color:darkslategrey;  
}

#species3 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: black;
    color:yellow;  
}

#species4 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: springgreen;
    color:brown;  
}

#species5 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #6c5;
    color: navajowhite;  
}

#species6 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #cf8;
    color: green;  
}


#species7 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #cdf;
    color: green;  
}

#species8 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: green;
    color: crimson;  
}

#species9 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #61CE46;
    color: darkgreen;  
}


#species10 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #D4914E;
    color: ghostwhite;  
}

#species11 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #5C6C04;
    color: #FFCA14;  
}

#species12 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #6A6159;
    color:#FEFBDD;  
}

#species13 {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: Akzidenzb;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    background: #32584D;
    color:#FFF8CE;  
}

/*NAV BAR + DEFAULTS*/
.title {
    font-family: Akzidenz;
    
}

body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: black;
    color: white; 
}

#about p {
    margin-top: 0px;
    
}

a {
    color: inherit;
    font-size: 30px;
}

a:hover { 
    font-style: italic;
}

#bg {
    background: #46712A;
    position:absolute;
    top: 34px;
    left: 34px;
    right: 33px;
    bottom: 35px;
    overflow: hidden;
}

#upT { 
    margin: -2px 0px 0px -79px;
    text-align: center;
    position:fixed;
    left: 50%;
}

#leftT {
    margin: -17px 0px 0px 0px;
    transform: rotate(-90deg);
    transform-origin:center;
    position:fixed;
    top: 50%;
    left: -68px;
}

#leftTcord {
    margin: -17px 0px 0px 0px;
    transform: rotate(-90deg);
    transform-origin:center;
    position:fixed;
    top: 50%;
    left: -135px;
}

#rightT {
    margin: -12px 0px 0px 0px;   
    transform: rotate(90deg);
    transform-origin:center;
    position:fixed;
    top: 50%;
    right: -30px;
}

#bottomT {
    margin: 0px 0px 0px -64px; 
    position: fixed;
    bottom: -1px;
    left: 50%;
    
}

#about {
    position: absolute;
    text-align: left;
    top: 35px;
    left: 34px;
    right: 34px;
    bottom: 36px;
    font-size: 200px;
    font-family: almeria;
    text-transform:uppercase;
    overflow-y:auto;
    padding-top: 0px;
    padding-left: 20px;
    line-height: .9;
    letter-spacing: -15px;
    
}








/*INDEX ILLUSTRATION*/
.container {
    margin: 0;
    border: 1px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display:grid;
    grid-template-columns: repeat(20, 100px);
    grid-auto-rows: minmax(20px, auto);
    overflow: scroll;
    padding: 10px 10px;
    
}

#one {
    grid-column: 8/10;
    grid-row: 1/3;
}

#two {
    grid-column: 15/20;
    grid-row: 4/7;
    padding-top: 70px;
}

#three {
    grid-column: 5/11;
    grid-row: 3/7;
}

#four {
    grid-column: 20/21;
    grid-row: 5/7;
}

#five {
    grid-column: 1/4;
    grid-row: 6/8;
    padding: 0px 0px 10px 40px;
}

#six {
    grid-column: 1/6;
    grid-row: 1/3;
}

#seven {
    grid-column: 1/5;
    grid-row: 4/5;
}

#eight {
    grid-column: 17/22;
    grid-row: 1/4;
}


#nine {
    grid-column: 22/25;
    grid-row: 1/6;
}

#ten {
    grid-column: 21/25;
    grid-row: 6/8;
    padding: 0px 20px 10px 90px;
}
#eleven {
    grid-column: 12/16;
    grid-row: 6/8;
    padding: 0px 0px 110px 0px;
}

#twelve {
    grid-column: 12/16;
    grid-row: 1/2;
    padding: 10px 0px 0px 0px;
}

#thirteen {
    grid-column: 11/15;
    grid-row: 3/6;
    padding: 70px 0px 10px 90px;
}

#fourteen {
    grid-column: 5/8;
    grid-row: 7;
    padding: 0px 0px 10px 0px;
}



/*MOUSE STYLING*/
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: yellow; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightgreen; 
}