a {
    text-decoration: none;
    color: black;
    font-size: 24px;
}

abbr {
    background-color: #ffe45c;
}

#container {
    background-color: white;
    height: 692px;
    width: 921px;
    margin: auto;
    box-shadow: 10px 10px 15px #000000;
    font-family: 'Shadows Into Light';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.arrow {
    position: absolute;
    top: 91%;
    left: 86%;
    z-index: 5;
}

body {
    height: 768px;
    width: 1024px;
    background-image: url(../game_art/backgrounds/tile.jpg);
    font-size: 20px;
}

.brown {
    color: saddlebrown;
    border: 10px solid brown;
}

.center {
    text-align: center;
}

.exp {
    color: darkgreen;
    border: 10px solid darkolivegreen;
    font-size: 28px;
}

@font-face {
    font-family: 'Shadows Into Light';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/ShadowsIntoLight.ttf);
}

.green {
    color: darkgreen;
    border: 10px solid darkolivegreen;
}

h2 {
    font-size: 1.5em;
}

.indent15 {
    padding-top: 1%;
    margin-left: 1%;
    margin-right: 1%;
}

.indent50 {
    padding-top: 3%;
    margin-left: 3%;
    margin-right: 3%;
    color: #096;
}

.lft {
    float: left;
}

.language {
    position: absolute;
    top: 0;
    left: 0;
}

#next_arrow {
    position: absolute;
    bottom: 0;
    left: 83.3%;
}

.noshow {
    display: none;
}

#page {
    width: 98%;
    height: 90%;
}

#pagetext {
    margin-left: 1%;
    padding-top: 1%;
}
#playButton, .playButton{
    position: absolute;
    left: 10vw ;
    top: 10vh ;
    z-index: 10;
}
.rt {
    float: right;
}

#txt {
    margin-top: 38%;
    font-size: 24px;
    font-weight: bold;
    color: black;
}

#text1 {
    position: absolute;
    top: 67%;
    left: 4%;
    color: navajowhite;
    font-size: 20px;
}

#textbox {
    position: absolute;
    top: 81%;
    font-size: 24px;
    width: 70%;
    background-color: navajowhite;
    padding: 1%;
    margin: 1%;
}

.und {
    text-decoration: underline;
}

#span_button,
#eng_button,
#explain,
#goback,
#span_button1,
#eng_button1 {
    background-color: transparent;
    border: none;
}

.yellow {
    background-color: yellow;
}


/* Needed for fractions display */

.bottom {
    border-top: 1px solid #000;
    display: block;
}

.fraction,
.top,
.bottom {
    padding: .5%;
    font-size: 01.0em;
}

.fraction {
    display: inline-block;
    text-align: center;
    font-size: 14px;
}


/*
* Bubble class is used as a text
* container for the narrative 
* part of the game
*/

.bubble {
    position: relative;
    margin-top: 61.6%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 96%;
    height: 15%;
    background-color: #fff;
    box-shadow: 2px 2px 4px #888;
    border-radius: 30px;
    border: 5px solid darkolivegreen;
    color: black;
}


/*
The classes below are used to create "tables" with divs. 
*/

.div_Table {
    display: table;
    /*Let the element behave like a <table> element*/
    width: 100%;
    padding-left: 6.6%;
}

.div_TableRow {
    display: table-row;
}

.div_TableBody {
    display: table-row-group;
}


/*
*The classes below are used to create a box
*/

.box {
    width: 250px;
    height: 200px;
    float: left;
    margin-left: 5px;
    margin-top: 15px;
    font-size: 40px;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
}


/* txt box is used to
* display the txt at the 
* bottom of the icon
* found in learn more pages
*
*/

.txt_box {
    color: white;
    margin-top: 47%;
    font-size: 51%;
    font-family: 'Oswald', sans-serif;
}


/* Clink link is used to 
* display the box without
* transparent background
*
*/

.click_link {
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
}


/* Box click is used to display
* a transparent box to see the box
*
*/

.boxclick {
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    /*background-color: rgba(0, 0, 0, 0.2);*/
}

.boxclick:hover {
    color: white;
}


/* custom box is used to 
*  display the box for the
*  icons that are used in
*  one row
*/

.largeBox {
    width: 386px;
    height: 273px;
    float: left;
    margin-left: 52px;
    margin-top: 40px;
    font-size: 40px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
}