/* Make page occupy entire browser window */
html, body {
    height: 100%;
    margin: 0;
    color: white;
}

a {
    color: cyan;
}

a:visited {
    color: teal;
}

/* Center everything */
.layout {
    width: 100vw;
    height: 100vh;
    background: #222222;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container that will match the size of the rendered image */
.image-container {
    max-width: 100vw;
    max-height: 100vh;
    position: relative;
    display: inline-block;
}

/* The image itself */
.bg-image {
    width: 100%;
    height: auto;
    max-height: 100vh;
    max-width: 100vw;
    display: block;
}

/* Screens positioned relative to the *image container* */
.screen {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    /*border: 2px solid red;*/
}

.screen-neocities {
    top: 90%;
    left: 30%;
    width: 20%;
    height: 9%;
}

.screen-small {
    top: 5%;
    left: 4%;
    width: 24%;
    height: 21%;
}

.screen-big {
    top: 9%;
    left: 35%;
    width: 59%;
    height: 67%;
}