html::-webkit-scrollbar {
    display: none;
}

html {
    width: 100%;
    height: 100vh;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body {
    margin: 0;

    width: 100%;
    height: fit-content;

    background-image: url("assets/main.webp");
    background-size: cover;
}

#bgp {
    width: 1920px;
    height: 1080px;

    position: relative;
}

#bg {
    width: 100%;
    height: 100%;
}

img {
    user-select: none;
}

.imgcon {
    position: absolute;
}

.imgcon > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

.imgcon img:first-child {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.imgcon img:hover {
    cursor: pointer;
}

.imgcon:hover img:nth-child(2) {
    filter: blur(20px) opacity(0.5) brightness(0) invert(0%) sepia(100%) saturate(14%) hue-rotate(273deg) brightness(99%) contrast(104%);
    scale: 1.1;
}

#x {
    top: 59px;
    left: 600px;
    height: 110px;
}

#dx {
    top: 152px;
    left: 1309px;
    height: 90px;
}

#bunny {
    top: 305px;
    left: 513px;
    height: 137px;
}

#house {
    top: 596px;
    left: 269px;
    height: 122px;
}

#cage {
    top: 502px;
    left: 960.5px;
    height: 102px;
}

#dungeon {
    top: 242px;
    left: 888.5px;
    height: 204px;
}

#shack {
    top: 485px;
    left: 1270px;
    height: 122px;
}

#tg {
    top: 912px;
    left: 1248px;
    height: 101px;
}

/* screens */

#screens div {
    opacity: 0;

    position: fixed;
    
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 0;
    height: 0;

    border-radius: 10px;

    transition-duration: 350ms;

    display: flex;
    justify-content: center;
    align-items: center;
}

#screens div img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    border-radius: 50px;
    border: 5px solid rgba(0, 0, 0, 0.2);

    user-select: none;
}

/* starter */

#starter {
    font-family: 'Jacquard 12', Tahoma, Geneva, Verdana, sans-serif;
    position: fixed;
    
    width: calc(100vw + 5px);
    height: 100vh;

    top: 0;
    left: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);

    transition-duration: 250ms;
}

#starter {
    display: flex;
    flex-direction: column;
    color: white;
}

#starter h1 {
    font-size: 0;
    transition-duration: 250ms;
}

/* infoer */

.infoer {
    color: white;
    font-family: 'Permanent Marker', Tahoma, Geneva, Verdana, sans-serif;
    position: fixed;
}

h1.infoer {
    font-size: calc(1vw + 10px);
}

#title {
    left: 10%;
    top: 3%;
}

#buy {
    right: 10%;
    top: 3%;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-top: 1px solid rgba(0, 0, 0, 0.3);

    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);

    font-size: calc(0.25vw + 10px);
}