/* Set the variables */
:root {
    --griff-dark-red: #740001;
    --griff-red: #ae0001;
    --griff-yellow: #eeba30;
    --griff-gold: #d3a625;
    --slith-dark-green: #1a472a;
    --slith-green: #2a623d;
    --slith-dark-silver: #5d5d5d;
    --slith-light-silver: #aaaaaa;
    --raven-dark-blue: #0e1a40;
    --raven-blue: #222f5b;
    --raven-grey-lady: #bebebe;
    --raven-gold: #946b2d;
    --huffle-canary: #ecb939;
    --huffle-light-canary: #f0c75e;
    --huffle-light-brown: #726255;
    --huffle-dark-brown: #372e29;
}

/* Stretch is to the max */
html, body {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Main colours and background */
.text-griff-gold { color: var(--griff-gold); }
.text-slith-light-silver { color: var(--slith-light-silver); }
.text-raven-grey { color: var(--raven-grey-lady); }
.text-huffle-canary { color: var(--huffle-canary); }
.text-griff-dark-red { color: var(--griff-dark-red); }
.text-slith-dark-green { color: var(--slith-dark-green); }
.text-raven-dark-blue { color: var(--raven-dark-blue); }
.text-huffle-dark-brown { color: var(--huffle-dark-brown); }

.bg-griff-dark-red { background: var(--griff-dark-red); }
.bg-slith-dark-green {background: var(--slith-dark-green); }
.bg-raven-dark-blue {background: var(--raven-dark-blue); }
.bg-huffle-dark-brown {background: var(--huffle-dark-brown); }
.bg-huffle-light-brown {background: var(--huffle-light-brown); }
.bg-griff-gold { background: var(--griff-gold); }
.bg-slith-light-silver {background: var(--slith-light-silver); }
.bg-raven-grey {background: var(--raven-grey-lady); }
.bg-huffle-canary {background: var(--huffle-canary); }

/* Different backgrounds */
.pancras { background: url('/img/stpancras.jpg') no-repeat bottom left; }
.dorms { background: url('/img/dormitory.webp') no-repeat bottom left; }
.privet { background: url('/img/privet.jpg') no-repeat bottom left; }
.platform_934 { background: url('/img/platform_9_3_4.jpg') no-repeat bottom left; }
.inside_hogwarts_express { background: url('/img/inside_hogwarts_express.jpg') no-repeat bottom left; }
.hogwarts-castle-outside { background: url('/img/hogwarts-castle-outside.jpeg') center center fixed; }
.greathall { background: url('/img/greathall.png') no-repeat bottom left; }
.fireplace { background: url('/img/greathall-fireplace.png') no-repeat bottom left; }
.secret-passage { background: url('/img/secret-passage.jpg') no-repeat bottom left; }
.common-room { background: url('/img/commonroom-fireplace.png') no-repeat bottom left; }
.dorms { background: url('/img/dorms.jpg') no-repeat center center; }
.bathroom { background: url('/img/bathroom.png') no-repeat bottom right; }
.greathall-party { background: url('/img/greathall-party.png') no-repeat center center; }
.potions-center { background: url('/img/potions-center.png') no-repeat center center; }
.potions-left { background: url('/img/potions-left.png') no-repeat center center; }
.potions-right { background: url('/img/potions-right.png') no-repeat center center; }

/* Other important stuff */
.hidden { display: none !important; }
.hp-mask {
    margin-top: 50px;
    border-radius: 15px;
    padding: 10px;
}
.hp-bg-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width:1350px;
    max-height: 1200px;
}
.hp-bg-black {
    background-color: rgba(0, 0, 0, 0.5)
}

body.debug [class^="popup-number-"],
body.debug [class^="click-"] {
    border: 1px solid pink;
}

[class^="popup-number-"]  {
    position: absolute;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

[class^="click-"] {
    cursor: pointer;
    position: absolute;
}

.the-clickables {
    position: relative;
}
.click-fireplace {
    width: 325px;
    height: 350px;
    top: calc(100% - 700px);
    left: 0;
}
.click-main-door {
    width: 93px;
    height: 142px;
    top: calc(100% - 515px);
    left: 622px;
}
.click-bookcase {
    width: 30px;
    height: 60px;
    top: calc(100% - 450px);
    left: 350px;
}
.click-plate {
    width: 30px;
    height: 30px;
    top: calc(100% - 290px);
    left: 505px;
}
.click-candles {
    width: 450px;
    height: 140px;
    top: calc(100% - 700px);
    left: 410px;
}
.click-slyth {
    width: 50px;
    height: 75px;
    top: calc(100% - 450px);
    left: 420px;
}
.click-huff {
    width: 50px;
    height: 75px;
    top: calc(100% - 450px);
    left: 525px;
}
.click-raven {
    width: 50px;
    height: 75px;
    top: calc(100% - 450px);
    left: 633px;
}
.click-doorpanel {
    width: 50px;
    height: 63px;
    top: calc(100% - 106px);
    left: 267px;    
}
.click-fireplace-close {
    width: 500px;
    height: 300px;
    top: calc(100% - 300px);
    left: 325px;
}
.click-hogwarts-shield {
    width: 158px;
    height: 150px;
    top: calc(100% - 645px);
    left: 525px;
}
.click-goback {
    width: 50px;
    height: 50px;
    top: calc(50%);
    left: 0;
    background: rgba(0,0,0,0.5);
    font-size: 4em;
    padding: 0;
    margin: 0;
    line-height: 40px;
    border: 1px dotted gold;
}

.popup-number-one { top: 147px; left: 140px; }
.popup-number-two { top: 147px; left: 180px; }
.popup-number-three { top: 147px; left: 220px; }
.popup-number-four { top: 147px; left: 259px; }
.popup-number-five { top: 147px; left: 299px; }
.popup-number-six { top: 235px; left: 140px; }
.popup-number-seven { top: 235px; left: 180px; }
.popup-number-eight { top: 235px; left: 220px; }
.popup-number-nine { top: 235px; left: 258px; }
.popup-number-zero { top: 235px; left: 298px; }

/* Playable options  */
.warning-info { display: none; }
/* media layouts and information */
@media screen and (max-width: 800px) {
    .game-info { display: none;}
    .warning-info { 
        display: block; 
        position: absolute;
        height: 100vh;
        width: 100%;
        z-index: 1000;
        background-color: var(--slith-dark-green);
        color: var(--slith-light-silver);
    }
}