header {
    background-color: #e35a83;
    height: 75px;
    top: 0;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    
}

body {
    background-color: #8ed892;
    font-family: "Jersey 20", sans-serif;
    font-size: 50px;
    margin: 0;
    width: 100%;
    height: 100%; 

}

p {
    text-align: center;
    background-color: rgb(242, 163, 217);
    font-size: 35px;
    padding: 20px;
    border-radius: 10px;

}

h1 {
  
    text-align: center;
    font-size: 50px; 
    background-color: rgb(252, 84, 176);
    width: 100%; 
    margin: 0;

}

h2 {
    text-align: center;
    font-size: 30px; 
    background-color: rgb(245, 140, 198);
    width: 100%;
    margin: 0;
   padding: 5px;
}

button {
    background-color: rgb(252, 84, 176);
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    font-family: "Jersey 20", sans-serif;
    margin: 10px;
    width:300px;
   
}

.select{
    width:200px;
}

/* this applies to the character images only */
img {
    width: 370px; 
    margin: 10px;
}

.hover{
    transition: transform .2s;
}

.hover:hover {
    /* zooms in on hover and makes picture bigger by 120% */
    transform: scale(1.2); 

  }

.character img:hover {

   background-color: #8ed89200;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    flex-direction: column;
    position: relative
}


.character{
    display: flex;
    justify-content: center;
    margin-top: 150px;
}



#player {
    position:fixed;
    z-index: 100000;
    left:400px;
    bottom: 150px;
}

#partner {
    position:fixed;
    z-index: 100000;
    right:400px;
    bottom: 150px;
    transform: scaleX(-1);
    /* https://www.w3schools.com/howto/howto_css_flip_image.asp */
}


.story-section{
    height: 90vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.text-container{
    width:900px;
    display: table;
    margin: auto;
 
}

footer {
    background-color: #e35a83;
    height: 50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0 auto; 
}


 #section1, #section2, #section3, #section4, #section5, #section6{
    background-image:url(../img/hearts_background.png);
}

#section7, #section9, #section12{
    background-image:url(../img/apartment1.png);
  
}

#section10 {
    background-image:url(../img/Cafe.png);
 
}


#section11 {
    background-image:url(../img/Park.png);

}

#section15{
    background-image:url(../img/parknight.png);
}

#section16, #section28 {
    background-image:url(../img/diaaspointment.png);
   
}

#section17{
    background-image:url(../img/jail.png);
}


#section8, #section13, #section14, #section18, #section19, #section20, #section23, #section24, #section25, #section26{
    background-image:url(../img/apartnemnt2.png);
    
}

#section21{
    background-image:url(../img/Happy_ending.png);
 
}