body{
    margin:auto;
    text-align: center;
    background:white;
}

h1{
    color:rgb(0, 229, 255);
    font-size:50px;
}

.explain{
    font-size:20px;
}

#explaindiv{
    width:1000px;
    margin:auto;
    text-align: left;
}

#link{
    width:500px;
    height:200px;
    font-size:50px;
    background-color:pink;
    border: solid;
    border-radius: 10px;
}

#standard{
    width:1920;
    height:1080;
    position: relative;
}

#canvas{
    border:solid;
}

#characanvas {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    top:28px;
    right:0;
    left:0;
}@media screen and (max-width:600px) {
    #characanvas{
        position:absolute;
        margin-left:auto;
        top: 30px;
        bottom:0;
        right:0;
        left:0;
    }
}

#title{
    font-size: 100px;
    font-family: serif;
    position: absolute;
    top: 50px;
    right:0;
    left:0;
    margin-right:auto;
    margin-left:auto;
    background: linear-gradient(90deg,pink, white,aqua);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}@media screen and (max-width:600px) {
    #title{
        width:350px;
        font-size: 50px;
        font-family: serif;
        position: absolute;
        top:50px;
        right:0;
        left:0;
        margin-right:auto;
        margin-left:auto;
    }
}

#newbtn{
    position:absolute;
    width:300px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#returnbtn{
    position:absolute;
    width:300px;
    visibility: hidden;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.returnbtnMove {
    animation: slideinTop 3s;
}
@keyframes slideinTop {
    0% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

#continuearea{
    width:500px;
    height:300px;
    background:brown;
    border-radius: 5%;
    position: absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#hukkatunojumonn{
    color:white;
    font-size: 30px;
}

#hukkatunojumonntext{
    font-size: 30px;
    height:70px;
    border-radius: 30px;
}

#hukkatunojumonnenter{
    position:absolute;
    width:200px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    top:200px;

}

#storydiv{
    background:brown;
    position:absolute;
    width: 1100px;
    height:170px;
    left:0;
    right:0;
    margin-right:auto;
    margin-left:auto;
    top:450px;
    border: ridge 10px pink;
}@media screen and (max-width:600px) {
    #storydiv{
        width:300px;
        height:170px;
        left:0;
        right:0;
        margin-right:auto;
        margin-left:auto;
        top:450px;
        border: ridge 10px pink;
    }
}

#storytext{
    width:1000px;
    height:150px;
    font-size: 30px;
    color:white;
    text-align: left;
    margin-top:20px;
    margin-left:10px;
}@media screen and (max-width:600px) {
    #storytext{
        width:300px;
        height:150px;
        font-size: 30px;
        color:white;
        text-align: left;
        margin-top:5px;
        margin-left:5px;
    }
}

#selectdiv{
    width:1000px;
    height:650px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align: left;
    display: flex;
    flex-direction: column;
}@media screen and (max-width:600px) {
    #selectdiv{
        width:350px;
        height:600px;
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
        text-align: left;
        display: flex;
        flex-direction: column;
    }
}

.selectbtn{
    width:600px;
    height:70px;
    margin-top:10px;
    font-size: 30px;
    color:white;
    background:brown;
    border: ridge 5px pink;
}@media screen and (max-width:600px) {
    .selectbtn{
        width:300px;
        height:50px;
        margin-top:10px;
        font-size: 15px;
        color:white;
        background:brown;
        border: ridge 5px pink;
    }
}