/* Include your @font-face rules here */
@font-face {
  font-family: 'Vesterbro-Light';
  src: url('../fonts/TRYVesterbro-Light.eot');
  src: url('../fonts/TRYVesterbro-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/TRYVesterbro-Light.woff2') format('woff2'),
       url('../fonts/TRYVesterbro-Light.woff') format('woff'),
       url('../fonts/TRYVesterbro-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Vesterbro-Poster';
  src: url('../fonts/TRYVesterbro-Poster.eot');
  src: url('../fonts/TRYVesterbro-Poster.eot?#iefix') format('embedded-opentype'),
       url('../fonts/TRYVesterbro-Poster.woff2') format('woff2'),
       url('../fonts/TRYVesterbro-Poster.woff') format('woff'),
       url('../fonts/TRYVesterbro-Poster.ttf') format('truetype');
  font-weight: 900; /* Adjusted the weight to match poster */
  font-display: swap;
}

@font-face {
  font-family: 'Vesterbro-Regular';
  src: url('../fonts/TRYVesterbro-Regular.eot');
  src: url('../fonts/TRYVesterbro-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/TRYVesterbro-Regular.woff2') format('woff2'),
       url('../fonts/TRYVesterbro-Regular.woff') format('woff'),
       url('../fonts/TRYVesterbro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

html, body {
  height: 100%;
  margin: 0;
}

/* Include your @font-face rules here */
.dot {
  height: 15px;
  width: 15px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  margin: 0 0px; /* Space out the dots */
}

.vertical-text {
  font-family: 'Vesterbro-Light', sans-serif;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0; /* Remove default margins */
  padding-bottom:5px;
}

/* Ensure the column takes full available height */
.col-4 {
  height: 100%;
  padding: 0;
  width: 40%;
}

.col-2 {
  padding-left: 40px;
}

/* Additional styles for date and name */
.date, .name {
  text-align: center;
  margin: -10px; /* Remove default margins */
}

/* Styles for your fonts */
.date {
  font-family: 'Vesterbro-Regular', sans-serif;
  inline-size: max-content;
  padding-bottom:5px;
}
.name {
  padding-top:5px;
  font-size: 30px;
  font-family: 'Vesterbro-Poster', sans-serif;
}
.description {
  padding-top:5px;
  font-family: 'Vesterbro-Light', sans-serif;
}


@media screen and (min-width: 768px) {
  .dot {
    height: 15px;
    width: 15px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    margin: 0 0px; /* Space out the dots */
  }
  
  .vertical-text {
    font-family: 'Vesterbro-Light', sans-serif;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0; /* Remove default margins */
    padding-bottom:5px;
  }
  
  /* Ensure the column takes full available height */
  .col-4 {
    height: 100%;
    padding: 0;
  }
  
  .col-2 {
    padding-left: 40px;
  }
  
  /* Additional styles for date and name */
  .date, .name {
    text-align: center;
    margin: -10px; /* Remove default margins */
  }
  
  /* Styles for your fonts */
  .date {
    font-family: 'Vesterbro-Regular', sans-serif;
    inline-size: max-content;
    padding-bottom:5px;
  }
  .name {
    padding-top:5px;
    font-size: 30px;
    font-family: 'Vesterbro-Poster', sans-serif;
  }
  .description {
    padding-top:5px;
    font-family: 'Vesterbro-Light', sans-serif;
  }
}