:root {
    --square-size: 50px;
    --light: #eeeed2;
    --dark: #769656;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-size: 18px;
    font-family: 'Times New Roman', Times, serif;
    padding: 0;
}

html {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-image:
        linear-gradient(45deg, var(--dark) 25%, transparent 25%),
        linear-gradient(-45deg, var(--dark) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--dark) 75%),
        linear-gradient(-45deg, transparent 75%, var(--dark) 75%);
    background-size: var(--square-size) var(--square-size);
    background-color: var(--light);
}

.bg {
    /* background-image: linear-gradient(to bottom, rgba(247, 1, 1, 0.1), rgba(0, 4, 255, 0.4)); */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.096), rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.322), rgba(0, 0, 0, 0.637));
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
}

.textbox {
    width: 700px;
    height: auto;
    padding: 20px;
    padding-top: 0%;
    border: 2px solid black;
    background-color: #89b857;
    white-space: pre-line;
    z-index: 2;
}

.fixed-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    /* Allows clicking through the images */
}

.fixed-images img {
    position: absolute;
    opacity: 0.7;
    /* Make them slightly transparent */
}

.piece-1 {
    left: 10%;
    top: 15%;
    transform: rotate(35deg);
    width: 50px;
    position: absolute;
}

.piece-2 {
    left: 15%;
    top: 45%;
    transform: rotate(-25deg);
    width: 80px;
    position: absolute;
}

.piece-3 {
    left: 20%;
    bottom: 15%;
    transform: rotate(15deg);
    width: 55px;
    position: absolute;
}

.piece-4 {
    right: 10%;
    top: 20%;
    transform: rotate(-35deg);
    width: 50px;
    position: absolute;
}

.piece-5 {
    right: 15%;
    top: 50%;
    transform: rotate(25deg);
    width: 80px;
    position: absolute;
}

.piece-6 {
    right: 20%;
    bottom: 20%;
    transform: rotate(-15deg);
    width: 65px;
    position: absolute;
}

.top-left-image {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  border: 3px solid rgb(0, 0, 0);
  width: 400px;
  height: auto;
}

.url a:hover {
    color: #0e69df;
    text-decoration: underline;
    align-items: center;
}