/* ########### */
/* # Generic # */
/* ########### */
* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
/*! Variables */
:root {
    --fontSize: 8vh;
}

/* ############## */
/* # Containers # */
/* ############## */
/* Container with overflow hidden, sizes to viewport */
#viewport {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
    overflow: hidden;
}
/* Grid layout for crab images */
#grid-container {
    display: grid;
    width: 100vw; /*! Change for img export? */
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 1fr auto 1fr;
    height: 100vh;
}
/* Upper background */
#bg-upper {
    height: 70vh;
    grid-area: 1 / 1 / 3 / 4;
    background-image: url(./background_upper.png);
    background-size: auto 100%;
    background-position: center;
}
/* Crab overlay */
#crab-overlay {
    position: relative;
    height: 70vh;
    grid-area: 1 / 1 / 3 / 4;
    z-index: 4;
    background-image: url(./overlay_upper.png);
    background-size: auto 100%;
    background-position: center;
}
/* Lower background */
#bg-lower {
    height: 30vh;
    grid-area: 3 / 1 / 4 / 4;
    background-image: url(./background_lower.png);
    background-size: auto 100%;
    background-position: center;
}

/* ############# */
/* # Crab sign # */
/* ############# */
/* Div containing background image */
#sign-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3vh;
    /* Starting with no text */
    min-width: 35vh;
    min-height: 15vh;
    /* Fully expanded dimensions */
    max-width: 100vh;
    max-height: 65vh;
    /* Actual */
    /* width: auto; */
    /* height: auto; */
    grid-area: 1 / 2 / 3 / 3;
    align-self: end;
    background-image: url(cardboard_texture.jpg);
    background-size: 70vh;
    overflow: hidden;
}
/* Change max sign width on smaller screens */
@media (max-width: 640px) {
    #sign-container {
        max-width: 90vw;
    }
}
/* Text displayed in container */
#sign-container span {
    font-family: 'Permanent Marker', cursive;
    font-size: var(--fontSize);
}
/* Phantom div used as click target */
#click-target {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#click-target:hover {
    background-color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
}