@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

body {
   background-color: #aee3f8;
   color: #000000;
   padding: 0px;
   font-family: 'Jost', cursive;
   background-image: url('bluecog.png');
   background-repeat: repeat;
}

table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;

}

td {
   border: 1px solid #FFFFFF;
   padding: 8px;
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.1);
}

#submitButton {
   background-image: url('Empty-Treasure-Chest.png');
   background-size: cover;
   border: none;
   color: #FFFFFF;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   border-radius: 5px;
}

#submitButton:hover {
    background-color: #45a049;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin: 0 0 1rem 0;
    }

    td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "Clue"; }
    td:nth-of-type(2):before { content: "Answer"; }
    td:nth-of-type(3):before { content: "Click to Check"; }
    td:nth-of-type(4):before { content: "???"; }
}