/* CSS changes the colors, shapes, and styles of all of the HTML elements.
   try changing some variables to see how it affects the webpage! */

/* body edits the entire webpage! */
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
}

/* '.something' becomes associated with anything in HTML with the
   CLASS 'something'. Line 13 in the HTML has the class 
   timeline-container that .timeline-container is associated with. */
.timeline-container {
    width: 80%;
    margin: 20px 0;
    position: relative;
}

/* Edits specifically the timeline INSIDE of the timeline container. */
.timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid #ccc;
    height: 2px;
}

/* Edits the controls for adding dots to the timeline. */
.controls {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls input, .controls button {
    margin: 10px 0;
}

/* These lines edit each individual dot that appears on the
	 timeline after the user adds one. For example
   'background-color' changes the color of the dot. Try
   chaning it to 'red'! */
.timeline-dot {
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    background-color: #007bff;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
}

/* This changes the color of the dot when the user hovers over it. */
.timeline-dot:hover {
    background-color: green;
}

.timeline-dot .tooltip {
    display: none;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
}

/* The display of the description of the dot once hovered over. */
.timeline-dot:hover .tooltip {
    display: block;
}