/* css for new game page */
.containercharselect {
    display: grid;
    grid-template-columns: 30vw 30vw 30vw;
    grid-template-rows: 30vh 30vh 30vh;  
    box-sizing: border-box;
    width: 100vw;
    height:100vh;

    position:fixed;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
} 
.charselect {
    box-sizing: border-box;
    width: 300px;
    height: 300px;
    font-family: 'Comic Sans MS';
    font-size: large;
}
.charselect:hover {
    background-color: gray;
    cursor: pointer;
}

#titlecard, #authorcard, #characterchoose, #keyError {
    text-align: center;
    color:#ffffff;
    margin: 0 0 0 0;
}
#titlecard {
    font-size: 2vw;
}
#authorcard {
    font-size: 0.6vw;
}
#characterchoose{
    font-size: 1vw;
}
#titlecard:hover, #authorcard:hover {
    transform: scale(-1, 1);
}

.lowermainheading, .lowermain {
    color:#ffffff;
    margin: 0 0 0 0;
}
.lowermainheading {
    font-size: 1vw;
    text-align: center;
}

.lowermain {
    margin-left: 5%;
    text-align:inherit;
    font-size: 0.6vw;
}
.lowermain > a, .lowermain > a:visited {
    color:#ffffff;
}

.lowermain > a:hover {
    color: lightgray;
}
.lowermain > button {
    border-style: none;
    background-color: #ffffff;
    font-family: 'Comic Sans MS';
    font-size: 0.6vw;
    border-radius: 10px;

}
.border {
    width:100%;
    /* border-style: solid;
    border-color:white; */
}

/* css for main page */

body {
    font-family: 'Comic Sans MS';
}
#character {
    display: block;
    position:fixed;
    width: 5%;
    top: 50px;
    left: 47.5%;
}

.charDialogueBG {
    height: fit-content;
    width: fit-content;
    max-height: 110px;
    max-width: 500px;
    background-color: #ffffff;
    border-radius: 20px;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    display: none;
    position:fixed;
    top: 50px;
    left: 54%;
    z-index: 1;
}
.gameDialogueBG {
    height: 110px;
    width: 60vw;
    background-color: #ffffff;
    border-radius: 20px;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    display: none;
    position:fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1;
}

.charDialogue, .gameDialogue {
    margin: 10px;
    display: none;
    white-space: pre-line;
}
.gameDialogue {
    font-size: 20px;
}

.stats {
    height: fit-content;
    width: fit-content;
    background-color: #ffffff;
    border-radius: 20px;
    position:fixed;
    top: 50px;
    left: 50px;
    z-index: 1;
}
.stats > p {
    margin: 10px;
    white-space: pre-line;
    font-size: 20px;
}
.scene1 {
    height:105vh;
    width:99vw;
    border-style: solid;
}
.scene0, .scene2, .scene3, .scene4 {
    height:120vh;
    width:99vw;
    border-style: solid;
}
.scene0 {
    border-color: blueviolet;
}
.scene1 {
    border-color: pink;
}
.scene2 {
    border-color: lightseagreen;
}
.scene3 {
    border-color: lightgreen;
}
.scene4 {
    border-color: lightskyblue;
}
.tempScenes {
    display: none;
}
#topend {
    height:105vh;
    width:99vw;
    /* border-style: solid;
    border-color: white; */
}
#bottomend {
    height:105vh;
    width:99vw;
    /* border-style: solid;
    border-color: black; */
}

.checkpointImg {
    width: 6vw;
    margin-left: 55vw;
    margin-top: 40vh;
}

.letterImg {
    width: 2vw;
    margin-left: 49vw;
    margin-top: 50vh;
}

.graveImg {
    width: 5vw;
    position:absolute;
}
.flowerImg {
    width: 5vw;
    position:absolute;
}

/* css for load game page */

input {
    width: 100%;
    text-align: center;
}
form {
    width: 320px;
}

.containerloadgame {
    display: grid;
    grid-template-columns: 10vw 80vw 10vw;
    grid-template-rows: 30vh 30vh 30vh;  
    box-sizing: border-box;
    width: 100vw;
    height:100vh;

    position:fixed;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
} 
#send {
    margin-left: 45%;
}

#savecontainer {
    position: fixed;
    width: 100%;
    height:100%;

    display: none;
    text-align: center;
    margin-top: 50%;
}