/* Ready, get set, go! */
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Variables */
:root {
	/* Colors */
  --lemon-yellow: #fff200;
  --soft-cream: #fff9b0;
  --leaf-green: #3f9e4d;
  --zesty-orange: #ffa500;
  --off-white: #f9f9f9;
  --cool-gray: #d0d3d4;
  --light-mid-gray: #999;
  --mid-gray: #666;
  --dark-gray: #333;

  /* Fonts */
  --font-family: 'Roboto', sans-serif;
  --font-family-heading: 'Racing Sans One', sans-serif;

  /* Font sizes */
  --font-size-xsmall: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 3rem;

  /* Spacing */
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-xlarge: 4rem;
  --spacing-xxlarge: 8rem;

  /* Breakpoints */
  --breakpoint-small: 400px;
  --breakpoint-medium: 800px;
  --breakpoint-large: 1200px;

  /* Shadows */
  --shadow-small: 0 0 10px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 6px 12px rgba(0, 0, 0, 0.3);

  /* Border radius */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;
  --border-radius-oval: 50%;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-family);
  background-color: var(--off-white);
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  border-top: 60px solid var(--dark-gray);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "article aside"
    "footer footer";
  gap: var(--spacing-medium);
  max-width: 900px;
  margin: 0 auto;
}

@keyframes tiltRace {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


@keyframes body {
    from {
        right: 0;
    }
    to {
        right: 100%;
    }
}

@keyframes staggeredRace {
    0% {
        right: 0;
    }
    50% {
        right: 50%;
    }
    100% {
        right: 130%;
    }
}

body::before {
	content: '🚗 \00A0\00A0 🚙 \00A0\00A0\00A0\00A0\00A0\00A0 🚕';
	font-size: var(--font-size-xlarge);
	position: absolute;
	top: -50px;
	right: 20px;
	animation: tiltRace 5s ease-in-out infinite, body 10s linear infinite, staggeredRace 10s linear infinite;
}

article {
  grid-area: article;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-large);
  background-color: var(--soft-cream);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-small);
}

article::before {
  content: '🏁';
  font-size: var(--font-size-xlarge);
  position: absolute;
  top: -50px;
  left: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  line-height: normal;
}

img,
video {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: var(--font-size-xxxlarge);
  text-align: center;
  margin: var(--spacing-large) 0 var(--spacing-xlarge);
  color: var(--lemon-yellow);
  -webkit-text-stroke: 1px black;
}

p {
	margin: var(--spacing-medium) 0;
}

p:first-of-type {
  font-size: 1.125rem;
  text-align: center;
  color: var(--mid-gray);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  padding-left: 12px;
}

article p:first-of-type::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px; /* The width of the SVG */
  height: 24px; /* The height of the SVG */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M7.17 18H10V6H4v8.17C4 16.7 5.3 18 6.83 18H7.17zM14.17 18H17V6h-6v8.17C11 16.7 12.3 18 13.83 18H14.17z"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
}

a {
  color: var(--zesty-orange);
  text-decoration: none;
}

a[rel='author'],
time:first-of-type {
  color: var(--dark-gray);
  text-decoration: none;
  text-align: center;
  display: block;
}

a[rel='author'] {
  font-size: var(--font-size-large);
  margin: var(--spacing-medium) auto 0;
  color: var(--zesty-orange);
  font-family: var(--font-family-heading);
}

time:first-of-type {
  font-size: var(--font-size-small);
  margin: 0 auto var(--spacing-medium);
  color: var(--mid-gray);
}

aside {
  grid-area: aside;
  max-width: 300px;
  padding: var(--spacing-large);
  background-color: var(--leaf-green);
  box-shadow: var(--shadow-small);;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: var(--spacing-xlarge);
}

aside p:first-of-type {
  font-size: .85rem;
  text-align: left;
  color: var(--lemon-yellow);
  padding-left: 0;
}

aside button {
  background-color: var(--zesty-orange);
  color: black;
  font-size: var(--font-size-medium);
  padding: 10px 20px;
  margin-top: 10px;
  border: 2px solid var(--dark-gray);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
}

aside img {
  border-radius: var(--border-radius-oval);
  border: 30px solid transparent; /* Space for the border image */
  border-image-source: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2250%22 height%3D%2250%22 viewBox%3D%220 0 50 50%22%3E%3Ccircle cx%3D%2225%22 cy%3D%2225%22 r%3D%2220%22 fill%3D%22%23FFD700%22 /%3E%3Cpath d%3D%22M15 20 C20 10, 30 10, 35 20 Q40 30, 30 35 Q20 40, 15 20 Z%22 fill%3D%22%23329A3B%22 /%3E%3C/svg%3E');
  border-image-slice: 30;
}

footer {
  grid-area: footer;
  width: 100%;
	padding: 20px;
	text-align: center;
	background-color: var(--leaf-green);
}

figure wacky-video video {
  width: 100%;
  max-width: 800px;
  border: 5px solid var(--lemon-yellow);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-large);
}

/* Style the container (wacky-video) */
figure wacky-video {
  display: block;
  position: relative;
  background-color: var(--dark-gray);
  padding: var(--spacing-small);
  border-radius: var(--border-radius-medium);
}

figure wacky-video progress {
  width: 100%;
  height: 10px;
  border-radius: var(--border-radius-small);
  background-color: var(--cool-gray);
}

/* Style the video buttons */
figure wacky-video video::-webkit-media-controls-play-button, 
wacky-video button[data-wacky-video="playpause"],
wacky-video button[data-wacky-video="mute"] {
  background-color: var(--leaf-green);
  border-radius: var(--border-radius-oval);
  width: 40px;
  height: 40px;
  font-size: 0; /* Hide the text */
  cursor: pointer;
}

wacky-video button[data-wacky-video="playpause"]::before {
  content: '\f04b'; /* Play icon */
  font-size: var(--font-size-medium);
  color: var(--lemon-yellow);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: inline-block;
}

wacky-video button[data-wacky-video="mute"]::before {
  content: '\f6a9'; /* Mute icon */
  font-size: var(--font-size-medium);
  color: var(--lemon-yellow);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: inline-block;
}

/* Style the volume slider */
figure wacky-video video::-webkit-media-controls-volume-slider {
  accent-color: var(--leaf-green);; /* Matches play button */
}

.controls {
  display: grid;
  grid-template-columns: auto 1fr auto; /* Two buttons on ends, progress in the middle */
  grid-template-rows: auto auto; /* First row for buttons, second for progress */
  align-items: center; /* Vertically align items */
  gap: var(--spacing-small);
}

.controls button:nth-child(1) {
  grid-column: 1; /* Place the first button in the first column */
  grid-row: 1; /* Place it in the first row */
}

.controls .progress {
  grid-column: 1 / -1; /* Span all columns */
  grid-row: 2; /* Place in the second row */
}

.controls button:nth-child(3) {
  grid-column: 3; /* Place the second button in the last column */
  grid-row: 1; /* Place it in the first row */
}

/* Default grid layout */
div[data-gallery] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-medium);
}

/* Special case: when there are exactly 3 items */
div[data-gallery]:has(:nth-child(3):last-child) {
  grid-template-columns: 1fr 1fr; /* Two columns */
  grid-template-rows: auto auto; /* Automatic rows */
}

/* First item spans the first column */
div[data-gallery]:has(:nth-child(3):last-child) > :nth-child(1) {
  grid-column: 1; /* First column */
  grid-row: span 2; /* Span two rows */
}

/* Second item in second column */
div[data-gallery]:has(:nth-child(3):last-child) > :nth-child(2) {
  grid-column: 2; /* Second column */
  grid-row: 1; /* First row */
}

/* Third item in second column */
div[data-gallery]:has(:nth-child(3):last-child) > :nth-child(3) {
  grid-column: 2; /* Second column */
  grid-row: 2; /* Second row */
}

figure {
    border: 1px solid var(--cool-gray);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-small);
    background-color: var(--off-white);
    max-width: 700px;
    margin: var(--spacing-medium) auto;
    text-align: center;
    box-shadow: var(--shadow-medium);
}

img {
    max-width: 100%;
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--spacing-small);
}

figcaption {
    font-size: var(--font-size-small);
    color: var(--mid-gray);
    line-height: 1.4;
    font-weight: bold;
}

figcaption span:last-child {
    font-style: italic;
    font-weight: normal;
    color: var(--light-mid-gray);
}

div[data-gallery] {
  figure {
    margin: 0;
  }
}

/* Style the hr element to look like a checkered flag */
hr {
  height: 12px; /* Set the height for the flag stripes */
  border: none; /* Remove the default border */
  background: linear-gradient(
    90deg, 
    var(--dark-gray) 25%, 
    var(--off-white) 25%, 
    var(--off-white) 50%, 
    var(--dark-gray) 50%, 
    var(--dark-gray) 75%, 
    var(--off-white) 75%
  );
  background-size: 42px 12px; /* Adjust the size of the checkered pattern */
  margin: var(--spacing-large) 0;
}