* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: goldenrod;
    font-family: consolas;
    align-content: center;
}

body {
    background-color: rgb(4, 4, 5);
    display: flex;
    height: 100vh;
    margin: 0vh 0vh;
    align-items: center;
    align-self: center;
}
.contain_bg {
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    object-fit: fill;
    user-select: none;
}

.skygradient {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.bgcity {
    height: 50%;
    position: fixed;
    bottom: 20%;
    left: 50%;
    object-fit: cover;
    pointer-events: none;
}

.poles {
    height: 50%;
    width: 50%;
    position: fixed;
    bottom: 20%;
    left: 0%;
    object-fit: fill;
    pointer-events: none;
}

.sand {
    width: 100%;
    height: 25%;
    position: fixed;
    bottom: 0%;
    left: 0%;
    object-fit: fill;
    pointer-events: none;
}

.sandbk {
    width: 100%;
    height: 5%;
    position: fixed;
    bottom: 19%;
    left: 0%;
    object-fit: fill;
    pointer-events: none;
}

.cardbuttons {
    height: 70%;
    position: fixed;
    bottom: 15%;
    left: 10%;
    pointer-events: none;
}

.guy {
    height: 37%;
    position: fixed;
    bottom: 11%;
    left: 21%;
    pointer-events: none;
}

.wires {
    height: 10%;
    position: fixed;
    bottom: 6%;
    left: 0%;
    pointer-events: none;
}

.toolbox {
    height: 37%;
    position: fixed;
    bottom: 10%;
    left: 21%;
    pointer-events: none;
}

.glow {
    height: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
    opacity: 0%;
    transition: opacity 0.5s;
    cursor: pointer;
}

.glow:hover {
    opacity: 100%;
    transition: opacity 1s cubic-bezier(0.16, 2.49, 0, -0.24);
}

.screendiv {
    position: fixed;
    width: 32.5vh;
    height: 40%;
    bottom: 17%;
    left: 40%;
}

.screen {
    height: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
    pointer-events: none;
}

#mydiv {
    display: none;
    background-color: #831406;
    border-style: double;
    border-width: 1vh;
    border-color: #b34e0b;
    position: fixed;
    left: 20%;
    height: calc(100% - 40%);
    width: calc(100% - 40%);
    min-width: 228px;
    z-index: 9;
    resize:both;
    align-items: center;
    overflow:auto;
    opacity: 0%;
}

#mydivheader {
    width: -webkit-fill-available;
    border-bottom-style: double;
    border-width: 1vh;
    border-color: #b34e0b;
    background-color: #911808;
    padding: 10px;
    cursor: move;
    z-index: 10;
    align-self: baseline;
    font-weight: 700;
    overflow: hidden;
}

#mydiv.show {
    display: flex;
    opacity: 100%;
}

.mydivcontext {
    width: 100%;
    height: -webkit-fill-available;
    position: absolute;
    top: 6vh;
    padding: 10px;
    flex-wrap: wrap;
    align-content: baseline;
    flex-direction: row;
    display: flex;
}

.mydivcontext img {
    width: 89%;
    height: auto;
}

@media (max-width: 700px) {
    .mydivcontext {
        top: 9vh;
    }

    #mydiv {
        left: 14%;
    }
}