html {
    padding: 0.2vw;
    padding-bottom: 3vw;
}

body {
    font-family: AR One Sans;
}

/* p5js setup */
canvas { 
    display: block;
}

#start-screen h1 {
    text-align: center;
    font-size: 4.3vw;
    padding-top: 2vw;
    padding-left: 3.3vw;
}

#start-button {
    background-color: rgba(0, 0, 0, 0.858);
    padding: 1vw 2vw;
    border-radius: 1vw;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 48vw;
    left: 45.7vw;
    font-size: 1.4vw;
}

#start-button:hover {
    transform: scale(1.1);
}

#mission {
    width: 4vw;
    position: absolute;
    right: 0;
    top: 10vw;
}

#worldsign {
    width: 17vw;
    position: absolute;
    top: 42.5vw;
    left: 5.5vw;
    transform: rotate(-5deg);
}

#worldsign:hover {
    transform: scale(1.1);
}

#mission:hover {
    transform: scale(1.11);
}

#worldintro, .iteminfo {
    /* text-align: center; */
    width: 60%;
    margin: 7vw auto;
    border: 2px solid rgb(143, 143, 143);
    padding: 4.5vw;
    border-radius: 2vw;
    background-color: white;
}

#worldintro h1, .iteminfo h1, #gotpen h1, #happypage h1, #usepenpage h1, #prisonpage h1, #freepage h1, #listpage h1, #scrutinizepage h1, .againpage h1, #miserablepage h1 {
    font-size: 2.9vw;
    margin: 0;
}

#worldintro p, .iteminfo p, #gotpen p, #happypage p, #usepenpage p, #prisonpage p, #freepage p, #listpage p, #scrutinizepage p, .againpage p, #miserablepage p {
    font-size: 1.5vw;
}

.donebutton {
    /* background-color: rgba(0, 0, 0, 0.858); */
    padding: 0.9vw 2.5vw;
    border: 0.2vw solid black;
    border-radius: 1vw;
    color: black;
    text-decoration: none;
    font-size: 1.5vw;
}

.donebutton:hover, .usepen:hover, .continue:hover, .startover:hover   {
    background-color: rgba(0, 0, 0, 0.858);
    color: white;
}

#missionpage {
    display: grid;
    grid-template-columns: 36% 58%;
    grid-gap: 6%;
    align-items: center;
    /* text-align: center; */
    width: 70%;
    margin: 7vw auto;
    border: 2px solid rgb(143, 143, 143);
    padding: 2vw 3vw 4vw 3vw;
    border-radius: 2vw;
    background-color: white;
}

#missionpage h3 {
    font-size: 2vw;
    margin: 0;
    padding: 0.8vw;
    text-align: center;
}

#missionpage h1 {
    font-size: 3vw;
}

#missionpage p {
    font-size: 1.7vw;
}

#player {
    width: 100%;
}

.roomname {
    border: 0.25vw solid black;
    width: 17.5vw;
    font-size: 1.5vw;
    background-color: white;
    padding: 0.5vw;
    border-radius: 1vw;
    text-align: center;
    margin-left: 0.5vw;
}

#help {
    margin-left: 0.5vw;
    background-color: rgba(0, 0, 0, 0.654);
    color: white;
    padding: 1.5vw;
    width: 15.7vw;
    border-radius: 1vw;
    font-size: 1.4vw;
}

.backbutton {
    background-color: rgba(0, 0, 0, 0.858);
    padding: 1.2vw 2vw;
    border-radius: 1vw;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 64.2vw;
    right: 40vw;
    font-size: 1.4vw;
}

.backbutton:hover {
    transform: scale(1.08);
}

#door1 {
    position: absolute;
    top: 29.3vw;
    left: 42.2vw;
}

#door1 img{
    width: 15.6vw;
}

#door2 {
    position: absolute;
    top: 25.8vw;
    left: 4.7vw;
}

#door2 img{
    width: 13.1vw;
}

#door3 {
    position: absolute;
    top: 25.5vw;
    right: 5.3vw;
}

#door3 img{
    width: 12.3vw;
}

#door1:hover, #door2:hover, #door3:hover {
    transform: scale(1.08);
}

#sword {
    width: 30vw;
    position: absolute;
    top: 25.3vw;
    left: 35.2vw;
}

#manuscript {
    width: 21.8vw;
    position: absolute;
    top: 31.5vw;
    left: 39.5vw;
}

.displaycase {
    width: 31vw;
    position: absolute;
    top: 25vw;
    left: 34.5vw;
}

#pen {
    width: 8vw;
    position: absolute;
    top: 32.7vw;
    left: 46.1vw;
    animation: upanddown 1.4s;
    animation-iteration-count: infinite;
}

#pen:hover {
    transform: scale(1.11);
}

#paintbrush {
    width: 8vw;
    position: absolute;
    top: 32.7vw;
    left: 46.5vw;
    animation: upanddown 1.4s;
    animation-iteration-count: infinite;
}

@keyframes upanddown {
    0% {
        top: 32.7vw;
    }
    50% {
        top: 32.4vw;
    }
    100% {
        top: 32.7vw;
    }
}

#portrait {
    width: 22vw;
    position: absolute;
    top: 16.8vw;
    left: 39.5vw;
}

.learnmore {
    width: 15vw;
    position: absolute;
    top: 41vw;
    right: 24vw;
}

.learnmore:hover {
    transform: scale(1.08);
}

.guard {
    width: 9vw;
    position: absolute;
    top: 35.5vw;
    left: 25.9vw;
}

.guard:hover {
    transform: scale(1.07);
}

#spottedscreen h2{
    color: white;
    font-size: 3vw;
    text-align: center;
}

#spottedscreen h3{
    color: white;
    font-size: 1.8vw;
    text-align: center;
    margin-top: 33vw;
}

#continuebutton {
    padding: 1.2vw 2vw;
    border-radius: 1vw;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 45vw;
    left: 45.08vw;
    font-size: 1.3vw;
}

#gotpen, #happypage, #usepenpage, #prisonpage, #freepage, #listpage, #scrutinizepage, .againpage, #miserablepage {
    width: 65%;
    margin: auto;
}

#gotpen div, #happypage div, #usepenpage div, #prisonpage div, #freepage div, #listpage div, #scrutinizepage div, .againpage div, #miserablepage div {
    display: flex;
}

#stolenpen {
    margin: auto;
    width: 40%;
    padding: 5vw 2vw;
}

.usepen, .continue, .startover {
    padding: 1.2vw 2vw;
    border-radius: 1vw;
    border: 0.2vw solid black;
    color: black;
    font-size: 1.3vw;
    text-decoration: none;
}

#buffplayer, #shadowplayer, #sad {
    width: 69%;
    margin: auto;
}

#happy {
    width: 75%;
    margin: auto;
    padding-top: 3vw;
    padding-bottom: 2.3vw;
}

#sad {
    padding-top: 2.3vw;
}

#prisonpage, #miserablepage, #freepage, #listpage {
    color: white;
}

#prison {
    width: 50%;
    margin: auto;
}

#free {
    width: 60%;
    margin: auto;
    margin-top: 1vw;
}

#listitem {
    width: 60%;
    margin: 2vw auto;
}



#startover2, #gohome, .continue2 {
    padding: 1.2vw 2vw;
    border-radius: 1vw;
    border: 0.2vw solid white;
    color: white;
    font-size: 1.3vw;
    text-decoration: none;
}

#gohome {
    margin-right: 1vw;
}

#startover2:hover, #gohome:hover, .continue2:hover, #continuebutton:hover {
    background-color: white;
    color: black;
}

#swordkey {
    width: 2vw;
    position: absolute;
    left: 30vw;
    top: 15vw;
    transform: rotate(30deg);
}

#swordkey:hover {
    transform: scale(1.12) rotate(30deg);
}

#paintbrushkey {
    width: 2vw;
    position: absolute;
    left: 4vw;
    top: 55vw;
    transform: rotate(50deg);
}

#paintbrushkey:hover {
    transform: scale(1.12) rotate(50deg);
}

#manuscriptkey {
    width: 2vw;
    position: absolute;
    right: 11vw;
    top: 15vw;
}

#manuscriptkey:hover, #penkey:hover {
    transform: scale(1.12);
}

#portraitkey {
    width: 2vw;
    position: absolute;
    right: 28vw;
    top: 7vw;
    transform: rotate(-93deg)
}

#portraitkey:hover {
    transform: scale(1.12) rotate(-93deg);
}

#penkey {
    width: 2vw;
    position: absolute;
    right: 0.5vw;
    top: 58vw;
}

.disabled {
    pointer-events: none;
}

.disabled::after {
    content: "Locked!";
    position: absolute;
    top:32%;
    right: 26%;
    font-size: 1.3vw;
    background-color: rgba(0, 0, 0, 0.491);
    color: white;
    border-radius: 1vw;
    padding: 1vw;   
}

#cloak {
    width: 11vw;
    position: absolute;
    left: 27.5vw;
    top: 27vw;
}

#tape {
    width: 5vw;
    position: absolute;
    left: 5vw;
    top: 55vw;
}


#hammer {
    width: 3vw;
    position: absolute;
    left: 1vw;
    top: 7vw;
}

#cloak:hover, #tape:hover, #hammer:hover {
    transform: scale(1.11);
}

#warning {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.613);
    position: fixed;
    top:0;
    left: 0;
    display: none;
}

#warning-content {
    background-color: #fefefe;
    width: 50%;
    margin: 20vw auto;
    padding: 2vw 4vw;
    border-radius: 1vw;
}

#warning-content h3 {
    font-size: 1.7vw;
}

#warning-content p {
    font-size: 1.4vw;
}

#warning-button {
    font-family: AR One Sans;
    padding: 1vw 1.8vw;
    border-radius: 1vw;
    color: white;
    border:none;
    text-decoration: none;
    font-size: 1.3vw;
    background-color: black;
    margin: 1vw 0vw;
    border: 0.2vw solid black;
}

#warning-button:hover {
    background-color: white;
    color: black;
}