* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Flexbox container */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header,
.footer {
    background-color: #f3f3f3;
    padding: 10px;
    text-align: center;
}

.content {
    flex: 1;
    padding: 20px;;
    background: linear-gradient(to top right, red 50%, black 50%);
    color: white; /* Set text color to white */
    position: relative; /* Make the container a positioning context */
}

section {
    display: none;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 20px;
}

.column.left {
    flex: 0.1;
}

.column {
    flex: 1;
    margin: 0 10px;
}

.column h2 {
    margin-top: 0;
}

#stopButton {
    margin: 7px;
    padding: 7px;
    border-radius: 10px;
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

/* Default link styles */
a {
    color: black; /* Initial color */
    text-decoration: underline; /* none to remove underline by default */
}

/* Hover styles */
a:hover {
    color: red; /* Hover color */
}

/* Visited link styles */
a:visited {
    color: purple; /* Visited color */
}

a:visited:hover {
    color: red; /* Hover color for visited links */
}


#lastEditedTime {
    position: absolute; /* Position the element */
    bottom: 0; /* Align the element to the bottom */
   /* left: 0; /* Align the element to the left */
   left: 50%; /* Center horizontally */
   color: white; /* Set text color to white */
   transform: translateX(-50%); /* Center horizontally */
   font-size: xx-small;
}