

body{
    overflow:hidden;
    background-color: #90CEC3;
    font-family: 'Marmelad', sans-serif;
}

.background{
    margin: auto;
    position: relative;
    display: table;
}

img {
  content: normal !important;
}

.center-img{
    display: block;
    margin: auto;
}

.elephant-button{
    width: 62vh;
    margin-top: 4vh;
    max-width: 90vw;
    content:'viewport-units-buggyfill;' 
            'width: 62vh;'
            'margin-top: 4vh;'
            'max-width: 90vw'; 
}

.button-button{
    height: 54vh;
    margin-top: -8vh;
    max-height: 80vw;
    content:'viewport-units-buggyfill;' 
            'height: 54vh;'
            'margin-top: -8vh;'
            'max-height: 80vw';
}


.bookshelves {
    position: relative;
    height: 100vh;
    width:auto;
    content: 'viewport-units-buggyfill;'
            'height: 100vh';
}

.book-wrap{
    width:141vh;
    max-width: 81vw;
    margin: 15vh auto;
    content: 'viewport-units-buggyfill;'
            'width:141vh;'
            'max-width: 81vw;'
            'margin: 15vh auto';
}

.book-page {
    height: 70vh;
    max-height: 40vw;
    width: 70vh;
    max-width: 40vw;
    background-color: white;
    float: left;
    content: 'viewport-units-buggyfill;'
            'height: 70vh;'
            'max-height: 40vw;'
            'width: 70vh;'
            'max-width: 40vw';    
}

.left-page{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

.word{
    margin: 10px;
}

.word-part{
    font-size: 20px;
    text-transform: uppercase;
}
.word-part:hover{
    color:red;
    cursor: help;
}

.thing{
    position: absolute;
    width:auto;
    cursor:pointer;
}

.number{
    height:17%;    
}

.number-one{
    bottom:5%;
    left:37.5%;
}

.number-two{
    bottom:29%;
    right:21%;
}

.number-three{
    bottom:53.5%;
    right:35.5%;
}

.number-four{
    top:5%;
    left:21.5%;
}  

.book3_3{
    left: 18.2%;
    top: 4.6%;
    height: 19.9%;
}
.book3_3_fly{    
    left: 78%;
    top: 3.8%;
}

.book3_2{
    left: 22%;
    top: 6.8%;
    height: 18%;
}
.book3_2_fly{
    left: 83.6%;
    top: 7.2%;
}

.book3_1{
    left: 24.5%;
    height: 20%;
    top: 3.9%;
}
.book3_1_fly{
    left: 88%;
    top: 4.7%;
}
.book3_0{
    left: 28%;
    top: 5.5%;
    height: 18%;
}
.book3_0_fly{
    left: 92.6%;
    top: 6.5%;
}

.book2_0{
    height: 17%;
    top: 32.5%;
    left: 51.5%;
}
.book2_0_fly{
    left:2%;
}
.book2_1{
    height: 24%;
    top: 25.8%;
    left: 54.7%;
}
.book2_1_fly{
    left:5%;
}

.book2_2{
    height: 23%;
    top: 27.2%;
    right: 32%;
}
.book2_2_fly{
    top: 34.3%;
    right:8%;
}
.book2_3{
    height: 20%;
    top: 29.5%;
    right: 35.8%;
}
.book2_3_fly{
    right: 18%;
    top: 33.3%;
}
.book1_3{
    height: 23%;
    bottom: 25%;
    right: 17.5%;
}
.book1_2{
    height: 21%;
    bottom: 26.8%;
    right: 21%;
}
.book1_1{
    height: 20%;
    bottom: 26.5%;
    right: 25%;
}
.book1_0{
    height: 22.5%;
    bottom: 26.2%;
    right: 25%;
}

.book0_2{
    height: 23%;
    bottom: 2.3%;
    left: 44.5%;
}
.book0_2_fly{
    left:58.8%;
}
.book0_3{
    height: 18%;
    bottom: 3%;
    left: 41.7%;
}
.book0_3_fly{
    left:55.5%;
}

.book0_1{
    height: 18%;
    bottom: 2.4%;
    left: 38.5%;
}
.book0_1_fly{
    left:7.3%;
}
.book0_0{
    height: 23%;
    bottom: 2.4%;
    left: 33.9%;
}
.book0_0_fly{
    left: 1.4%;
    bottom: 2.4%;
}
.glasses{
    height: 14%;
    left:28%;
}

.glassesOut{
    top: -50%;
}

.glassesShelf{
   top:34%;
}

.duck{
    height: 13%;
    bottom:28.5%;
    right:3%;
}

.button{
    height: 9%;    
}

.buttonOut{
    right: 45%;
    bottom : -10%;
}

.rightButton{
    bottom:4.5%;
    right: 3.5%;
}

.leftButton{
    bottom:4.5%;
    right: 30%;
}

@media screen and (min-width : 340px){
    .word-part{
        font-size: 25px;
    }
}

@media screen and (min-width : 410px){
    .word-part{
        font-size: 30px;
    }
}

@media screen and (min-width : 560px){
    .word-part{
        font-size: 40px;
    }
}


@media screen and (min-width : 690px){
    .word-part{
        font-size: 50px;
    }
}

button{
    width: 50%;
    margin: 10px 25%;
}


