/* 
    SET YOUR STYLES IN THIS FILE
    For help, see the style.css documentation: https://www.notion.so/style-css-cac459cc9c384da08f561394bcee4cbf
*/

/* FONTS */
/* add any @import statements for novelty fonts you want to use here ↓ */

/* COLORS */
:root {
  /* --mycolor: #your color here; */
  --idsred: #990000;
  --darkgray: rgb(80, 80, 80);
}

* {
  scroll-behavior: smooth;
}

header {
}

/* 
  SET ANY MORE STYLES YOU WANT BELOW
  Be sure to delete empty declarations
*/

/* 
TYPOGRAPHY
*/
h1 {
  /* top headline */

}

h2 {
  /* second headline */

}

h1,
h2 {
  /* alignment */
  text-align: center;
  /* width of text */
  max-width: var(--width-xl);
  /* text color */
  color: black;
  font-size: 50px;
  margin-top: 2rem;
}

.headline-container {
  /* top: auto;
  bottom: 15vh; */
}

h3 {
  /* section header */
  text-align: center !important;
}

.dropcap:first-letter {
  /* change the font/style of the dropcap if you wish to use them */

}

/* 
media queries helper
*/
.helper {
  /* comment out next line to get visual help with media queries while you code */
  display: none !important;

  width: 60px;
  height: 60px;
  background-color: red;
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.helper::after {
  content: 'XS';
  color: white;
  font-family: Lato, sans-serif;
  font-weight: bold;
  font-size: 25px;
}

/* MEDIA QUERIES FROM SMALLEST TO LARGEST = MOBILE FIRST */
/* use these for responsive design — you can set different styles based on how wide the screen is */
/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .helper {
    background-color: orange;
  }

  .helper::after {
    content: 'S';
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  header {
    /* adjust header image positioning for larger devices if needed */
    /* you can also change the header image for mobile here */
    /* background-position: 50% 50%; */
  }

  .helper {
    background-color: yellow;
  }

  .helper::after {
    content: 'M';
    color: black;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .helper {
    background-color: green;
  }

  .helper::after {
    content: 'L';
    color: white;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .helper {
    background-color: blue;
  }

  .helper::after {
    content: 'XL';
  }
}

/* Election Components */
article {
  padding-top: 4rem;
}

.methodology-header {
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  justify-content: space-between;
  box-sizing: border-box;
}

.methodology-header img {
  margin-left: auto;
  max-width: 128px;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-container h1 {
  margin-top: 0;
}

.header-image {
  height: 150px;
  width: 150px;
  margin: 0 auto;
}

.live-container {
  display: none;
}

.stories {
  display: flex;
  flex-direction: row;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  /* Hide scrollbar in Firefox */
  scrollbar-width: none;

  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}

/* Hide scrollbar in webkit */
.list::-webkit-scrollbar {
  display: none;
}

.story-wrapper {
  border: none !important;
  display: flex;
  max-width: 90%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .story-wrapper {
  max-width: 30%;
  }
}

.coverage {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.1);
  margin: 1rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
}

.coverage:hover {
  box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.2);
}

.story-info {
  display: flex;
  flex-direction: column;
  margin: 1rem 1rem 1rem;
  justify-content: space-between;
  flex-grow: 1;
  gap: 1rem;
}

.story-headline {
  margin-bottom: 0;
  font-family: 'Inter', sans-serif;
  margin: 0;
  font-weight: bold;
  border: none !important;
}

.story-footer {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.story-author, .story-date {
  color: var(--gray50);
  font-size: 12px;
  font-weight: bold;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.race {
  /* border: 1px solid black; */
  border-radius: 15px;
  /* thanks matei */
  /* box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.1); */
  /* background-color: var(--gray05); */
  margin-bottom: 1rem;
}

.race-name {
  text-align: center;
  padding: 1rem;
  margin: 0;
  font-size: 22px;
}

.candidates {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-evenly;
  padding: 1rem 0 1rem;
}

.candidate-list {
  padding: 0 0 1rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  list-style-type: none;
}

li > h4 {
  margin-top: 0;
  margin-bottom: 0;
}

.candidate {
  /* border: 1px solid black; */
  padding: 0 1rem;
  border-radius: 15px;
  max-width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candidate-img {
  width: 128px;
  height: 128px;
  border-radius: 90rem;
  overflow: hidden;
}

.candidate-name {
  text-align: center;
}

.candidate-img > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.candidate-dem {
  border: 3px solid #0044C9;
}

.candidate-gop {
  border: 3px solid #d71f27;
}

.candidate-lp {
  border: 3px solid #FED000;
}

.candidate-ind {
  border: 3px solid var(--darkgray);
}