/* Ready, get set, go! */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

:root {
  /* Colors */
  --color-primary: #f9f9f9;
  --color-secondary: #ffec1c;
  --dark-yellow: #8d8100;
  --off-white: #f5f5f5;
  --cool-gray: #d0d3d4;
  --light-mid-gray: #999;
  --mid-gray: #666;
  --dark-gray: #333;

  /* Fonts */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Russo One', sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  --font-size-xxxl: 3.5rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-xxxl: 4rem;
  --spacing-xxxxl: 6rem;

  /* Break points */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 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;
}

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.5;
}

h1 {
  font-size: var(--font-size-xxl);
  font-family: var(--font-secondary);
  text-align: center;
  padding: var(--spacing-xxl);
}

article,
aside {
  background-color: var(--color-primary);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--cool-gray);
}

aside {
  span[data-category='premium'] {
    font-style: italic;
    font-size: var(--font-size-sm);
    background-color: bisque;
    padding: 5px 8px;
    border-radius: var(--border-radius-small);
  }

  button {
    background-color: var(--color-secondary);
    color: var(--dark-gray);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--dark-gray);
    border-radius: var(--border-radius-small);
    margin-bottom: var(--spacing-md);
    font-style: normal;
    font-weight: 700;
  }
}

a,
button {
  cursor: pointer;
}

a {
  color: var(--dark-yellow);
  text-decoration-color: var(--dark-gray);
}

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

p {
  font-size: var(--font-size-md);
  padding: var(--spacing-ls);
  background-color: var(--color-primary);
  opacity: 1;
  margin: var(--spacing-md) 0;
}

article > p:first-of-type {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: 100;
  margin-bottom: var(--spacing-lg);
  display: block;
}
article > p:first-of-type::first-letter {
  font-size: inherit;
  font-weight: 100;
}

article > a:first-of-type,
time {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 100;
  // margin-bottom: var(--spacing-xl);
  margin: 0 auto;
  display: block;
}

article p:nth-of-type(2) {
  margin-top: var(--spacing-xxxxl);
}

article p:nth-of-type(2)::first-letter {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

article > aside {
  color: var(--color-primary);
  background-color: var(--dark-gray);
  border-bottom: none;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);

    a {
      color: var(--dark-gray);
      font-size: var(--font-size-sm);
      font-style: italic;
      background-color: cadetblue;
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: var(--border-radius-small);
    }
  }

  .content {
    margin-bottom: var(--spacing-md);

    a {
      color: var(--color-secondary);
      font-size: var(--font-size-sm);
      font-style: italic;
    }
  }
}

body > article > aside > a > img {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  html {
    background: linear-gradient(
      90deg,
      #eee 25%,
      white 25%,
      white 50%,
      #eee 50%,
      #eee 75%,
      white 75%
    );
    background-size: 300px 300px; /* Size of each checkered square */
    animation: slide 60s linear infinite; /* Animate the background */
  }

  /* Animation keyframes */
  @keyframes slide {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 300px 0;
    }
  }

  h1 {
    font-size: var(--font-size-xxxl);
    padding: var(--spacing-xxxxl);
  }

  article > p:first-of-type {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xl);
  }

  article > a:first-of-type,
  time {
    font-size: var(--font-size-md);
  }
}

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

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

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);
}

footer {
  background-color: var(--dark-gray);
  color: var(--color-primary);
  text-align: center;
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);

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

article {
  position: relative;
  overflow: hidden;
}

article::before {
  content: '🍋';
  position: absolute;
  top: -2%;
  left: 3%;
  font-size: 2rem;
  animation: fall 8s linear infinite;
}

@keyframes fall {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, 200vh);
  }
}

hr {
  border: 1px solid var(--cool-gray);
  margin: var(--spacing-xxxl) 0;
}

.controls {
	display: flex;
	justify-content: space-between;
	padding: var(--spacing-md);
}

progress {
	width: 400px;
	max-width: 100%;
}

button[aria-controls="video"] {
	background-color: var(--color-secondary);
	color: var(--dark-gray);
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--dark-gray);
	border-radius: var(--border-radius-small);
	margin-bottom: var(--spacing-md);
	font-style: normal;
	font-weight: 700;
}

@media screen and (max-width: 768px) {
	.controls {
		flex-direction: column;
		align-items: start;
		justify-content: space-between;
		gap: var(--spacing-md);
	}

	progress {
		width: 200px;
	}

	button[aria-controls="video"] {
		margin: 0;
	}
	
}