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

abbr {
    background-color: #ffe45c;
}

#container {
    background-color: white;
    height: 600px;
    width: 900px;
    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: 90%;
    left: 86%;
    z-index: 5;
}

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

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

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

.center {
    margin-left: 20%;
    margin-right: 20%;
}

#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: 15px;
    margin-left: 15px;
    margin-right: 10px;
}

.indent50 {
    padding-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    color: #096;
}*/

.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: 750px;
}

.noshow {
    display: none;
}

#page {
    width: 900px;
    height: 540px;
}

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

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

#text1 {
    position: absolute;
    top: 400px;
    left: 40px;
    color: navajowhite;
    font-size: 20px;
}

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

.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: 5px;
    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: 54.5%;
    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;
}