/* bg class */

#background.bg {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: url(../background.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1
}

/* data classes */

h1.txt {
    font-family: 'Comic Sans MS';
    display: flex;
    flex-direction: column;
    justify-self: center;
    font-size: 38px;
    color: white;
    cursor: pointer;
}

/* aesthetic containers */

.box {
    position: relative;

    display: inline-block;
    width: fit-content;
    height: fit-content;

    padding: 10px;

    --outline-color: lightblue;
    --outline-width: 5px;
    --corner-radius: 20px;
    --corner-size: 40px;

    background: transparent;
    border: var(--outline-width) solid var(--outline-color);
    border-radius: var(--corner-radius);

    box-sizing: border-box;
    transition: 0.3s;
}

.box::before {
    content: "";
    position: absolute;

    /* Extend beyond the box */
    inset: calc(var(--corner-size) / -2);

    background:
        url("top-left.png") top left
            / var(--corner-size) var(--corner-size) no-repeat,

        url("top-right.png") top right
            / var(--corner-size) var(--corner-size) no-repeat,

        url("bottom-left.png") bottom left
            / var(--corner-size) var(--corner-size) no-repeat,

        url("bottom-right.png") bottom right
            / var(--corner-size) var(--corner-size) no-repeat;

    pointer-events: none;
    z-index: 2;
}

.box:hover {
    transform: rotate(2deg) scale(1.03);
}

/* positional containers */

.container {
    width: 100vw;
    height: 100vh;

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