html, body {
    background-color: rgb(218, 118, 135);


    font-size: 16px;
    color:rgb(75, 26, 18);
}

.header {
    font-size: 30px;
    color: rgb(255, 255, 5);
    text-shadow: 5px 5px 5px rgb(5, 4, 4);
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 4%;
    margin: 2%;
  
   
   background-image: url('../kuvat/shade_red.png');
   background-repeat: no-repeat;
   background-color: rgb(144, 144, 252);
   

    background-size: 90% 300%;
    background-position: 30% 46%;


    border: 3px solid rgb(95, 51, 9);

}

/*.headTextContainer {
    background-color: rgb(248, 244, 238, 0.5); 
    width: 550px;   
}*/



.beginningText {
    font-size: 1.6rem;
    font-weight: bolder;

}

.buttonContainer {
    align-items: center;
    justify-content: center;
    text-align: center;


    display: flex;
    flex-direction: column;

    margin: 1rem;
}
.startButtons {
    margin: 0.4rem;
    width: 90px;
}



.middleArea {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 750px;



    border: 3px solid rgb(95, 51, 9);

    background-color: rgb(124, 54, 54);
    
    background-image: url('../kuvat/shop_sign700.png');
    background-repeat: no-repeat;
    background-size: 110% 120%;
    background-position: 53% 60%;

    margin-bottom: 0px;
}

.timer {
    position: absolute;

    width: 220px;
    height: 20px;
    background-color: grey;
    border: 1px solid black;
    bottom: 5px;
    left: 5px;

}

.timerInner{
    width: 100%;
    height: 20px;
    background-color: rgb(169, 238, 129);

}


.levelContainer {
    position: relative;

    border: 2px solid rgb(95, 51, 9);
    height: 250px;
    width: 250px;
    padding-left: 5px;

  background-color: rgb(166, 223, 220);

}

.textContainer {
   /* position: relative;*/

    height: 250px;
    width: 250px;
    word-wrap: break-word;
    font-weight: bolder;

    text-align: center;
   
    padding: 0px 25px; /* makes the list be on right place, other solutions?*/

   border: 2px solid rgb(95, 51, 9);
   background-color: rgb(166, 223, 220);

}

.displayContainer {

    height: 250px;
    width: 250px;
    word-wrap: break-word;
    font-weight: bolder;
    
   /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
*/
    text-align: center;
    

    border: 2px solid rgb(95, 51, 9);
    background-color: rgb(166, 223, 220);

}


.itemButton {
    margin: 3px;
}



button:hover {
    cursor: pointer;
}



.myList {

    height: 900px;

    top: 25%;
    left: 15%;

}



.footer {
    position: relative;
    
    height: 80px;
    text-align: center;
    background-image: url('../kuvat/tile1.png');
    background-repeat: repeat;
    background-size: auto 190px; /*px no effect?*/
    background-position: 50% 70%;
   
    margin-top: 0px;
    

}
a {
    position: absolute;
    font-size: 1.3rem;
    color: rgb(146, 110, 69);
    top: 12%;
    left: 45%;
}