:root {
    --background: #4b6144;
    --main: #1a1a1a;
    --highlight: #f0f057;
}

/* :root {
    --background: rgb(247, 220, 208);
    --main: #1a1a1a;
    --highlight: #ec6d8b;
} */

::selection {
    background: var(--background); 
    color: var(--highlight);
}

body {
    background-color: var(--background);
    color: var(--main);
    font-family: monospace;
    font-size: small;
    /* align-items: center;      */
    /* margin-top: 50%; */
    /* height: 100vh;  */
    margin: 0;  
    line-height: 100%;
    /* text-transform: capitalize; */
    display: flex;
    align-items: center;  
    justify-content: center;  
    /* align: center; */
    min-height: 100vh;
    transition: background-color 0.2s ease;
}

#page {
    /* height: 5cm;
    width: 5cm; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

a {
    color: inherit;         
    text-decoration: none;   
    /* cursor: default;       */
    font-weight: normal;
}

#name {
    text-align: left;
    font-size: medium;
    font-weight: 800;
    margin-top: 0px;   
    padding: 4px;
    width: 200px;             
    text-align: center;
}

#clock {
    text-align: left;
    font-size: medium;
    padding-bottom: 8px;
}

#main_table {
    border-collapse: separate;
    border-spacing: 0; 
    width: 280px;
    table-layout: fixed;
}

#main_table th {
    font-weight: normal; 
}

#main_table th,
#main_table td {
    text-align: left;
    padding: 8px;
    /* border-bottom: 1px solid var(--main);  */
}

#main_table th:nth-child(1),
#main_table td:nth-child(1) { width: 20%; }
#main_table th:nth-child(2),
#main_table td:nth-child(2) { width: 25%; }

#main_table tr {
  transition: background-color 0.1s ease, color 0.1s ease;
}

#main_table tr:hover {
    color: var(--highlight);
    cursor: pointer;
}

#about {
    text-align: center;
    width:280px;
}

.glow {
    font-family: monospace;
    font: inherit;     
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    padding: 0px 8px;
    transition: color 0.2s ease;
    
    /* Fix button size */
    display: inline-block;
    width: 200px;         
    text-align: center;
    white-space: nowrap;
}

.glow:hover {
    color: var(--background);
}