html,
body {
    margin: 0;
    padding: 0;
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    /* Cool monospace font */
    font-family: 'Roboto Mono', monospace;
    font-size: 22px;
    background-color: #000000;
    color: #161616;
}

#hypertextual a {
    text-decoration: none;
    color: inherit;
}


.flex-container {
    display: flex;
    flex-wrap: wrap;
    /* gap: 10px; */
    /* padding: 10px; */
    margin-top: -20px;
    margin-left: -100%;
    margin-right: -100%;
    margin-bottom: -10px;
    overflow: hidden;
}

.tile {
    /* flex: 1; */
    /* padding: 10px; */
    /* margin-right: -50px; */
    /* margin-bottom: -50px; */
    /* margin-top: -20px; */
    /* margin-left: -20px; */
    /* width: 100px; */
    /* height: 100px; */
    /* min-height: 100px; */
    overflow: hidden;
}

#tile1001 {
    color: #ffffff;
    position: absolute;
    top: 28vh;
    left: 25vw;
    white-space: pre-wrap;

    }
#tile1002 {
    color: #ffffff;
    position: absolute;
    bottom: 5vh;
    right: 5vw;
    width: 50vw;
    
}

#tile1003 {
    color: #ffffff;
    position: absolute;
    bottom: 5vh;
    right: 5vw;
    /* No button, look just like the rest of the text */
    /* transparent background */
    background-color: transparent;
    border: none;
    font-size: 20px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
}

button {
    background-color: transparent;
    border: none;
    font-size: 20px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
}

/* Media query for tablets */
@media (max-width: 768px) {

    html,
    body {
        font-size: 18px;
        /* Smaller font size */
    }

    #tile1001,
    #tile1002,
    #tile1003 {
        font-size: 18px;
        /* Adjust font size */
        width: auto;
        /* Adjust width for better fit */
        right: 25vw;
        /* Adjust positioning for better visibility */
        left: 25vw;
    }
}

/* Media query for mobile phones */
@media (max-width: 480px) {

    html,
    body {
        font-size: 16px;
        /* Even smaller font size */
    }

    #tile1001,
    #tile1002,
    #tile1003 {
        font-size: 16px;
        /* Adjust font size */
        /* center */
        width: auto;
        /* Adjust width for better fit */
        right: 25vw;
        left: 25vw;

    }

    .flex-container {
        margin-top: 0;
        /* Adjust margins */
        margin-left: -5%;
        /* Slight adjustment for smaller screens */
        margin-right: -5%;
        margin-bottom: 0;
    }
}