#bodyID {
    background: url(jungle.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wrapper1 {
    width: 100%;
    height: 100%;
    margin: 5px;
}

#topDiv {

}

    #title {
        color: rgb(235, 238, 65);
        text-shadow: 3px 3px rgb(223, 58, 8);
        font-size: 70px;
        font-family: 'Skranji', cursive;
        text-align: center;
        margin: 25px;
    }

    #description {
        background-color: #91BF63;
        margin: 10px;
        padding: 12px;
        text-align: center;
        font-size: 30px;
        font-family: 'Bubblegum Sans', cursive;
    }

    .instructions {
        font-size: 20px;
    }

#gridWrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 300px;
}

    #sideMenu {
        background-color: #0D261A;
        width: 300px;
    }

        #gridWrapper2 {
            display: grid;
            grid-gap: 1px;
            grid-template-columns: 1fr 1fr;
            width: 200px;
        }

            #timer {
                display: inline-block;
                background-color: rgb(35, 170, 223);
                margin: 10px;
                width: 100px;
                height: 100px;
                border-radius: 10%;
                text-align: center;
                font-size: 30px;
                font-family: 'Hanalei Fill', cursive;
            }

            #treasures {
                display: inline-block;
                background-color: rgb(173, 224, 35);
                margin: 10px;
                width: 100px;
                height: 100px;
                border-radius: 10%;
                text-align: center;
                font-size: 15px;
                font-family: 'Hanalei Fill', cursive;
            }

            .totalTreasure {
                font-size: 30px;
            }

            #Treasuresinventory {
                font-family: 'Bubblegum Sans', cursive;
            }

        #inventorySpace {
            background-color: rgb(235, 238, 65);
            margin: 10px;
            border-radius: 3%;
            font-family: 'Hanalei Fill', cursive;
        }

        .inventoryHeading {
            font-size: 25px;
        }

        .inventoryContent {
            font-size: 20px;
        }

        #gameWrapper {
            background-color: #B5BF65;
            width: 900px;
            font-size: 30px;
            font-family: 'Bubblegum Sans', cursive;
        }

        /*border graident from https://css-tricks.com/gradient-borders-in-css/*/

        .border-gradient {
            border: 10px solid;
            border-image-slice: 1;
            border-width: 8px;
          }

          .border-gradient-green {
            border-image-source: linear-gradient(to left, #00C853, #B2FF59);
          }

          .border-gradient-purple {
            border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
          }

        /*end border gradient*/

#commandBar {
    text-align: center;
    margin-top: 15px;
}

/*Input styling from http://davidrpoulsen.com/escape-from-castle-cthulhu/*/
#user-input {
    color: black;
    background-color: white;
    /*background-color: transparent;*/
    /*outline: 0;*/
    font-size: 30px;
    font-family: 'Bubblegum Sans', cursive;
    border-radius: 3%;
}

input {
    background-color: black;
    border-color: transparent;
    color: black;
    text-align: center;
}

/*End input styling*/

#status {
    background-color: #0D261A;
    width: 300px;
}

#playerMoves {
    text-align: center;
    background-color: rgb(245, 150, 61);
    display: inline-block;
    margin: 10px;
    width: 100px;
    height: 100px;
    border-radius: 10%;
}

.movesHeading {
    font-size: 20px;
    font-family: 'Hanalei Fill', cursive;
}

#totalMoves {
    font-size: 30px;
    font-family: 'Hanalei Fill', cursive;
}

#EndGameWrapper {
    width: 100%;
    height: 100%;
    margin: 5px;
    text-align: center;
}

#EndGame {
    display: none;
    background-color: #B5BF65;
    width: 900px;
    font-size: 30px;
    font-family: 'Bubblegum Sans', cursive;
}

.scrollable {
    height: 300px;
    overflow-y: scroll;
    padding: 30px;
    background-color: rgb(226, 212, 184);*/
}

/*SCROLLBAR*/

      /* width */
      ::-webkit-scrollbar {
        width: 15px;
      }

      /* Track */
      ::-webkit-scrollbar-track {
        border-radius: 10px;
      }
      
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background-image:  radial-gradient(at 50% 100%, rgba(251, 255, 22, 0.75), rgb(38, 94, 1));
        /*background-image:  radial-gradient(at 50% 100%, rgba(123, 22, 255, 0.75), rgb(15, 1, 94));*/
        border-radius: 10px;
      }

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

a:link {
    text-decoration: none;
    color: rgb(56, 175, 139);
}

a:visited {
    color: rgb(56, 175, 139);
  }

.center {
    padding: 20%;
}


/*Google Fonts
font-family: 'Caveat Brush', cursive;
font-family: 'Bubblegum Sans', cursive;
font-family: 'Nanum Brush Script', cursive;
font-family: 'Frijole', cursive;
font-family: 'Slackey', cursive;
font-family: 'Hanalei Fill', cursive;
font-family: 'Skranji', cursive;
*/