/* 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." */
@font-face {
  font-family: 'YouMurderer BB';
  src: url('youmurdererbb.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

body {
  background-image: url("Autumnroad.jpeg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-family: "Times New Roman", Times, serif;
}

header {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-family:"Times New Roman";
}

.murder-header, 
.sidebar-title {
  font-family: 'YouMurderer BB';
}

.left-sidebar {
  width: 150px ;
  max-width: 150px;
  min-width: 150px; 
  height: 380px; /*Note to self: this locks in the sidebar at a specific height */
  display: block ; 
  border: 2px solid white;
}

.left-sidebar2 {
  width: 150px ;
  max-width: 150px;
  min-width: 150px; 
  height: 300px; /*Note to self: this locks in the sidebar at a specific height */
  display: block;
  margin-top: 20px;
  border: 2px solid white;
}

.left-sidebar3 {
  width: 150px ;
  max-width: 150px;
  min-width: 150px; 
  height: 130px; /*Note to self: this locks in the sidebar at a specific height */
  display: block;
  margin-top: 20px;
  border: 2px solid white;
}

.left-sidebar4 {
  width: 150px ;
  max-width: 150px;
  min-width: 150px; 
  height: 100px; /*Note to self: this locks in the sidebar at a specific height */
  display: block;
  margin-top: 20px;
  border: 2px solid white;
}

.main-content {
  width: 400px ;
  max-width: 400px;
  min-width: 400px; 
     border: 2px solid white;
    font-family:"Times New Roman", Times, serif;
}

.right-clock-sidebar {
  width: 150px ;
  max-width: 150px;
  min-width: 150px; 
  display: block;
  height: 50px; /*Note to self: this locks in the sidebar at a specific height */
  border: 2px solid white;
}

.right-sidebar {
  width: 150px ;
  max-width: 150px;
  min-width: 150px; 
  display: block;
  height: 480px; /*Note to self: this locks in the sidebar at a specific height */
  border: 2px solid white;
}

/* LINKS n COLORS */
/* LINK DEFAULT COLOR */
a:link {
  color: #ff0000; 
  text-decoration: underline;
}

/* LINK WHEN VISITED */
a:visited {
  color: #ff0000;
}

/* LINK WHEN HOVERED OVER*/
a:hover {
  color: #FFFFFF; 
  text-decoration: none; 
}

/* LINK WHEN CLICKED ON*/
a:active {
  color: #ffffff; 
}

.blinkie-parade-box {
    border: 1px solid #FF0000;
    background-color: #000000;
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; 
}

.blinkie-parade-title {
    color: #FF0000;
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    margin-bottom: 6px;
}

.blinkie-parade-track {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.blinkie-parade-content {
    display: flex;
    flex-wrap: nowrap; 
    width: max-content; 
    gap: 4px; 
    animation: parade-scroll 24s linear infinite;
}


.blinkie-parade-content img {
    flex-shrink: 0; 
    display: block;
}


.blinkie-parade-box:hover .blinkie-parade-content {
    animation-play-state: paused;
}


@keyframes parade-scroll {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}


/*JavaScript Stuff */

/* Music Player */ 
#musicplayer {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: flex-start;
  width: 149px;
  font-size: 16px;
  line-height: 140%;
  background: black;
  border: 1px double black;
  border-radius: 15px;
  margin-right: 50px;
  margin-top: 20px;
}

#musictitle {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: calc(100% - 10px - 1px);
  margin-left: calc(10px + 1px);
}

#musicpixel {
  width: 100%;
  padding: 5px;
  position: relative;
  min-height: 20px;
  border-right: 1px solid black;
}

.overlay {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  text-align: center;
  width: 100%; height: 100%;
  transition: 0.3s ease;
  background: black;
}

#musicplayer:hover .overlay {
  opacity: 1;
  transition: 0.3s ease;
}

.playpause {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.playpause:hover {
  cursor: help;
}

#musicpixel img {
  display: block;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/*Clock*/
.styling {
    background-color: black;
    color: #FF0000;              
    font-family: "MS Sans Serif", Geneva, sans-serif;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;      
    border: 1px solid #FF0000;   /* Small border, maybe i'll delete it Idk right now */
    display: inline-block;  
}

/*CALENDAR */ /*how the hell do people even make these, maybe i should learn javascript too? */
#calendar-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 15px 0;
}

#calendar-wrapper table {
    background-color: #000000;
    border: 2px solid #FF0000;
    border-collapse: collapse;
    font-family: "MS Sans Serif", Geneva, sans-serif;
    color: #FFFFFF;
    height: 200px;
    width: 200px; 
}

#calendar-wrapper td {
    border: 1px solid #333333;
    padding: 4px 2px;     /* Normal cozy retro padding */
    font-size: 10px;      /* Sharp, clear text size */
    text-align: center;
    vertical-align: middle; 
}

/* Format the Month and Year Header Row */
#calendar-wrapper tr:first-child b {
    color: #FF0000;
    font-size: 11px;       
    text-transform: uppercase;
}

/* TARGETS THE DAY HEADINGS ROW (Sun, Mon, Tue...) */
#calendar-wrapper tr:nth-child(2) td {
    font-size: 9px;  
    font-weight: bold;
    color: #FF0000;
}

/* Highlights the current active day */
#calendar-wrapper .today-highlight {
    background-color: #FF0000;
    color: #000000;
    font-weight: bold;
}