/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Monda:wght@400..700&display=swap');

body {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background-image: url("windows_vista_background.jpg");
    background-size: cover; /* Scale the image to cover the entire screen */
    cursor: url('cursors/wii-pointer.cur'), auto;
}

.decoration {
    position: absolute; /* Position relative to the nearest positioned ancestor (container) */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('cursors/wii-open.cur'), grab; /* Shows a grab cursor to indicate drag capability */
    user-select: none;
    pointer-events: auto; /* Ensure it can be interacted with */
}

.decoration:active {
  cursor: url('cursors/wii-grab.cur'), grabbing; /* Changes cursor when the user is dragging */
}

/* Optional: Default positioning */
.default-position {
    top: 0;
    left: 0;
}

.double-box {
    display: flex; /* Arrange image and text side by side */
    align-items: center; /* Vertically align the image and text */
    gap: 20px; /* Space between the image and the text */
    margin-top: 20px; /* Space from the paragraph above */
}

.image-box {
    flex: 1; /* Make the image box take up 50% of the width */
    display: flex; /* Ensure the image is centered inside */
    justify-content: center; /* Horizontally center the image */
    align-items: center; /* Vertically center the image */
}

.image-box img {
   max-width: 100%; /* Ensure the image fits within its box */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional: Rounded corners for the image */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.text-box {
    flex: 1; /* Make the text box take the remaining space */
    padding: 10px;
    background-color: #ffffff; /* Light background for subboxes */
    border-radius: 8px;
    border: 1px solid #515151;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.text-box p {
    padding: 10px;
    margin: 0;
    font-size: 1.4em;
    text-align: justify
}

h1 {
    margin: 0 0 10px;
    font-size: 5.5em;
    font-family: 'Michroma', sans-serif;
    text-align: center;
    color: white;
    text-shadow: 
        -1px -1px 2px #0D8438,  /* Top-left shadow */
        1px -1px 2px #0D8438,   /* Top-right shadow */
        -1px 1px 2px #0D8438,   /* Bottom-left shadow */
        1px 1px 2px #0D8438;    /* Bottom-right shadow */
}

h2 {
    margin: 0 0 10px;
    font-size: 2.9em;
    font-family: 'Michroma', sans-serif;
    color: white;
    text-shadow: 
        -1px -1px 2px #0D8438,  /* Top-left shadow */
        1px -1px 2px #0D8438,   /* Top-right shadow */
        -1px 1px 2px #0D8438,   /* Bottom-left shadow */
        1px 1px 2px #0D8438;    /* Bottom-right shadow */
    text-align: left;
    margin-left: 10px;
}

h3 {
    margin: 0 0 10px;
    font-size: 2.0em;
    font-family: 'Michroma', sans-serif;
    color: #0D8438;
    text-align: left;
    margin-left: 10px;
}

p {
    margin: 0;
    font-size: 1.2em;
    font-family: "Monda", serif;
    text-align: justify;
}

ul {
    list-style-type: none; /* Remove default bullets */
    font-family: "Monda", serif;
    padding: 0; /* Remove padding from the left */
    margin: 20px 0; /* Add space above and below the list */
    margin-left: 20px;
}

li {
    font-size: 1.2em;
    display: flex; /* Enable flex for alignment */
    align-items: center; /* Center-align text and icons */
}

/* Custom Bullet Points with Icons */
li::before {
    content: '✽'; /* Add a checkmark or any other symbol */
    margin-right: 10px; /* Space between icon and text */
    color: #98d146; /* Icon color */
    font-size: 1.2em; /* Icon size */
}

dl {
  list-style-type: none; /* Remove default bullets */
  font-family: "Monda", serif;
  padding: 0; /* Remove padding from the left */
  margin: 20px 0; /* Add space above and below the list */
  margin-left: 20px;
}

dt {
  font-size: 1.2em;
    display: flex; /* Enable flex for alignment */
    align-items: center; /* Center-align text and icons */
}

dt::before {
  content: '✽'; /* Add a checkmark or any other symbol */
    margin-right: 10px; /* Space between icon and text */
    color: #98d146; /* Icon color */
    font-size: 1.2em; /* Icon size */
}

dd {
  font-size: 1.2em; /* Icon size */
}

a {
    color: #0D676E;
    text-decoration: none; /* Remove underline */
}

/* Hover state (when mouse is over the link) */
a:hover {
    color: #d97b24; /* Orange color */
    text-decoration: underline; /* Add underline */
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
}

.audio-player {
    position: relative; /* Needed for absolute positioning inside */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    margin: 35px auto 20px auto;
}

#play-pause-btn {
    border-radius: 5px;
    padding: 5px 10px;
    width: 50px;
    height: 50px;
    /*background-image: url('play.png');*/
    background-size: cover;/* Ensure the image covers the button */
    background-repeat: no-repeat;
    border: none; /* Remove default border */
    cursor: url('cursors/wii-cd.cur'), pointer; /* Change cursor to pointer */
}

#seek-bar {
    position: absolute;
    top: -15px; /* Adjust this value to move the seek bar above*/
    left: -2px;
    width: 100%;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
}

#volume-bar {
    flex: 1;
    margin: 0 10px;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
}

#current-time, #duration {
    margin: 0 10px;
    font-size: 0.9em;
    color: #333;
}

/* Style the range slider track */
input[type="range"] {
    -webkit-appearance: none; /* Remove default styling */
    appearance: none;
    width: 100%; /* Full-width slider */
    height: 4px; /* Track height */
    background: #ddd; /* Track color */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Remove outline */
    opacity: 0.9; /* Slight transparency */
    transition: opacity 0.2s; /* Smooth transition */
}

input[type="range"]:hover {
    opacity: 1; /* Increase visibility on hover */
}

/* Style the slider thumb (the handle) */
input[type="range"]::-webkit-slider-thumb {
   width: 7px;
    height: 7px;
    background: #ffffff;
    border: none; /* Remove border */
    outline: none; /* Remove focus outline */
    border-radius: 50%;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
    box-shadow: -2px 0 8px 4px #ffffff;
}

input[type="range"]::-moz-range-thumb {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border: none; /* Remove border */
    outline: none; /* Remove focus outline */
    border-radius: 50%;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
    box-shadow: -2px 0 8px 4px #ffffff;
}

input[type="range"]::-ms-thumb {
   width: 7px;
    height: 7px;
    background: #ffffff;
    border: none; /* Remove border */
    outline: none; /* Remove focus outline */
    border-radius: 50%;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
    box-shadow: -2px 0 8px 4px #ffffff;
}

/* Add a gradient to the track */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    border-radius: 5px;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    border-radius: 5px;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 4px;
    background: transparent;
    border-color: transparent;
    color: transparent;
    cursor: url('cursors/wii-pointer-blue-ccw.cur'), pointer;
}


.no-select {
  user-select: none; /* Disable text selection */
}

.blog-container {
    position: relative;
    display: flex; /* Arrange children in a row */
    align-items: flex-start; /* Align windows to the top */
    width: 85%; /* Take up 90% of the viewport width */
    margin: 5vh auto; /* Center the container in the viewport */
    justify-content: space-between;
    gap: 20px; /* Space between the timeline and blog */
}

.timeline {
    width: 25%
}

.blog {
    width: 70%; /* Set a maximum width */
}

.navigation-buttons {
    position: absolute;
    top: 2em;
    left: 2em;
    display: grid;
    row-gap: 1em;
  }
  
/* General Quote Styling */
.quote {
    font-family: Georgia, serif; /* Use a serif font for a classic look */
    font-size: 1.5em; /* Increase the font size for emphasis */
    font-style: italic; /* Italicize the text */
    color: #555; /* Subtle gray text color */
    line-height: 1.6; /* Add spacing between lines */
    margin: 20px auto; /* Center the quote with some spacing */
    max-width: 600px; /* Limit the width for readability */
    padding: 20px 20px; /* Add some padding around the text */
    border-left: 5px solid #ccc; /* Create a vertical bar on the left */
    background-color: #f9f9f9; /* Light background to make it stand out */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: relative; /* Enable pseudo-element positioning */
}

/* Add Quotation Marks */
.quote:before {
    content: "“"; /* Open quote */
    font-size: 2.5em; /* Larger than the text */
    color: #ccc; /* Subtle color */
    position: absolute; /* Position relative to the blockquote */
    top: -10px;
    left: 10px;
}

.quote:after {
    content: "”"; /* Close quote */
    font-size: 2.5em; /* Larger than the text */
    color: #ccc; /* Subtle color */
    position: absolute; /* Position relative to the blockquote */
    bottom: -20px;
    right: 10px;
}

/* Cite Styling */
.quote cite {
    display: block; /* Display the citation on a new line */
    text-align: right; /* Align the citation to the right */
    font-size: 0.9em; /* Slightly smaller font size */
    color: #888; /* Muted text color */
    margin-top: 10px; /* Space above the citation */
}

.main-blog {
  display: flex;
  flex-direction: column; /* Arrange children in a column */
}