:root {
    /* Default: Light Grey */
    --primary: #d50000;

    /* Default: Light Grey */
    --primary_light: #370000;

    /* Default: Dark Blue */
    --primary_dark: #370000;

    /* Default: White */
    --secondary: #370000;

    /* Default: Dark Blue */
    --tertiary: #370000;

    /* Default: Blue */
    --link: #b40000;
}




html {
  		      cursor: url("cursor.png"), auto;
  		      /* Table Styling */
  		      
}		      
table {
    border-collapse: collapse;
    width: 100%;
}

table td, table th {
    border: 1px solid var(--primary);
    padding: 4px;
}

table th {
    text-align: left;
    background-color: var(--primary_light);
}

/* List Styling */
ul {
    list-style-image: url('img/heart_bullet.gif');
    list-style-position: inside;
    margin: 5px;
    padding: 0;
}

.container {
    background: var(--secondary);
    border: 1px solid var(--tertiary);
    border-radius: 2px;
    width: 800px;
    box-shadow: 2px 2px 0px var(--primary);
    margin: 5px auto;
    cursor: move;
}

.box {
    border: 1px solid var(--primary);
    background-color: black;
    padding: 12px;
	  color: white;
    font-family: "Courier Prime", monospace;
}

.box_header {
    border: 1px solid var(--primary);
    background-color: var(--primary_light);
    height: 20px;
    padding: 5px;
    /* This centers the text vertically. */
    line-height: 20px;
    color: white;
    font-family: "Courier Prime", monospace;
}

/* Changes the brightness of the fake buttons on hover. Also changes the cursor. */
.box_header img:hover {
    filter: brightness(103%);
    cursor: pointer;
}

/* Darkens and saturates the buttons on click. Also changes the cursor. */
.box_header img:active {
    filter: brightness(97%) saturate(125%);
    cursor: pointer;
}

/* Mobile Support */
@media only screen and (max-width: 890px) {
    .container {
        position: static;
        width: 100%;
        margin: unset;
        margin-bottom: 5px;
    }
}