:root{
    background-color: black;
    color: #eff0f0;

    --speed: 18;
}

* {
    box-sizing: border-box;
}

.roboto-narrow {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 75;
}

.roboto-narrowbold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 75;
}

.roboto-cond {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 87.5;
}

.roboto-condbold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 87.5;
}

.roboto-condbolder {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 87.5;
}

.roboto-fullbold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-full {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body{
    margin: 0;
    padding: 0;
}

#catchall{
    background-image: url("images/blakeback.png");
    background-size: contain;
    aspect-ratio: 16/9;
    width: 1;
    max-height: 100vh;
    margin: auto;
    container: main / size;
    position: relative;
}

#catchall * {
    position: absolute;
}

.border {
    border: 1px solid white;
}

.border-for-children > * {
    border: 1px solid white;
}

.de-emph {
    color: #cfdbe9;
}

.sub {
    color: #163d7e;
}

.dark {
    color: #091a37;
}

.inline-block {
    display: inline-block;
}

@container main (height > 100px){
    .size1 {
        font-size: 9.75cqh;
    }

    .size3 {
        font-size: 5.5cqh;
    }

    .size4 {
        font-size: 4cqh;
    }

    .size5 {
        font-size: 4.5cqh;
    }

    .size6 {
        font-size: 3.65cqh;
    }

    .tight{
        letter-spacing: -0.02em;
    }

    #title {
        top: 0.45cqh;
        left: 2cqh
    }

    #clock {
        top: 0.45cqh;
        right: 0;
        width: 16cqw;
        text-align: center;
        letter-spacing: -0.02em;
    }

    #date {
        top: 14cqh;
        left: 75cqw;
        text-align: left;
        letter-spacing: -0.02em;
    }
    
    #contentarea1 {
        top: 18cqh;
        height: 71cqh;
        width: 74cqw;
    }

    #contentarea2 {
        top: 21cqh;
        right: 0cqh;
        height: 68cqh;
        width: 26cqw;
        overflow: hidden;
    }

    #calendaritems-div{
        height: 63cqh;
    }

    #sidetitle {
        margin: 1.7cqh;
    }

    #products {
        top: 12cqh;
        width: 74cqw;
        height: 6cqh;
        overflow: hidden;
        text-wrap: nowrap;
    }

    #ticker {
        top: 89cqh;
        width: 100cqw;
        height: 8cqh;
        padding: 0.7cqh;
    }

    .tickeritem{
        margin-left: 10cqw;
    }

    .altlist * {
        padding: 0.7cqw 3cqh;
        line-height: 1em;
    } 

    #image-content {
        margin: 3cqh;
    }

    #display-image {
        width: 71cqw;
        height: 65cqh;
    }

    #weather-icon{
        width: 10cqw;
        aspect-ratio: 1 / 1;
        top: 13cqh;
        left: 9cqw;
        border-radius: 1.5cqh;
    }

    .weather-forecast-icon{
        height: 8cqh;
        aspect-ratio: 1 / 1;
        top: 13cqh;
        left: 9cqw;
        border-radius: 1cqh;
    }

    #weather-content {
        width: 74cqw;
        height: 71cqh;
    }

    #weather-temp {
        top: 24cqh;
        left: 14cqw;
    }

    #weather-status {
        top: 34cqh;
        left: 10cqw;
    }

    #weather-etc {
        top: 42cqh;
        left: 10cqw;
        width: 20cqw;
        height: 30cqh;
    }

    #weather-forecast{
        width: 34cqw;
        height: 60cqh;
        top: 6cqh;
        left: 58cqh;
    }

    .weather-forecast-segment {
        padding: 2cqh;
        line-height: 8cqh;
    }

    .weather-forecast-day {
        width: 10cqw;
        text-overflow: ellipsis;
        text-wrap: nowrap;
    }

    .list.horizontally li {
        margin: 0 0.5cqw;
    }

    #next-up{
        width: 50cqw;
        height: 17cqh;
        top: 5cqh;
        left: 12cqw;
        border-radius: 1cqh;
    }

    #next-up-time {
        min-width: 18cqw;
        width: fit-content;
        height: 100%;
        padding: 3cqh 1.5cqw;
        text-align: center;
        border-radius: 0 1cqh 1cqh 0;
    }

    #next-up-label {
        padding: 5.5cqh 1.5cqw;
    }

    #schedule {
        top: 25cqh;
        left: 12cqw;
        width: 50cqw;
        min-height: 38cqh;
        border-radius: 1cqh;
        overflow: hidden;
    }

    .schedule-element > *, .dual-schedule-element > *{
        padding: 0.75% 5%;
    }
}

#clock {
    color: #ffd456
}

.yellow {
    color: #ffd456
}

#ticker {
    overflow: hidden;
}

#ticker span{
    position: static;
}

#contentarea2 * {
    position: relative;
}

.list{
    list-style-type: none;
    margin: 0;
    padding: 0; 
}

.altlist{
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #cfdbe9
}

.altlist *:nth-child(odd){
    background-color: #091a37;
}

.marquee {
   display: flex;
   flex-flow: row nowrap;
   justify-content: end;
}

#ticker-content {
   animation: marquee var(--speed) 0s linear normal infinite;
   position: relative;
   display: inline-block;
   text-wrap: nowrap;
}

@keyframes marquee {
   0% {
      right: -1rem;
      transform: translate(100%, 0%);
   }
   100% {
      right: calc(100% + 1rem);
      transform: translate(0%, 0%);
   }
}

#display-image {
    image-rendering: optimizeSpeed;
    object-fit: contain;
}

.transitional {
    opacity: 0%;
    transition: opacity 1s;
}
.post-transitional {
    opacity: 100%;
    transition: opacity 1s;
}

.static-for-children * {
    position: static !important;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.flex.vertically {
    flex-direction: column;
}

.weather-forecast-segment {
    flex: 1;
}

.flex-one {
    flex: 1
}

.weather-forecast-temp, .weather-forecast-chance {
    flex: 1;
    text-align: center;
}

.weather-forecast-segment:nth-child(odd){
    background-color: #091a3744;
}

.transitional .weather-forecast-segment {
    opacity: 0%;
    transition: opacity 1s;
}

.post-transitional .weather-forecast-segment {
    opacity: 100%;
    transition: opacity 1.1s;
}

.post-transitional .weather-forecast-segment:nth-child(2) {
    transition-delay: 0.2s;
}

.post-transitional .weather-forecast-segment:nth-child(3) {
    transition-delay: 0.4s;
}

.post-transitional .weather-forecast-segment:nth-child(4) {
    transition-delay: 0.65s;
}

.post-transitional .weather-forecast-segment:nth-child(5) {
    transition-delay: 1s;
}

#next-up{
    background-color: #588be444;
    background-size: cover;
    display: flex;
}

#next-up-time{
    background-color: #0b0e0e;
}

.altflex > *:nth-child(even){
    background-color: #0f254b44;
}

.altflex > *:nth-child(odd){
    background-color: #091a3744;
}

#next-up-time-readout[data-TIME="1"] {
    animation: flashy 2s step-start 0s infinite;
}

#schedule {
    background-image: url(/images/schedback.png);
    background-size: cover;
    background-position: 50%;
}

@keyframes flashy {
    0%{
        color: #ffd45688;
    }
    50%{
        color: #ffd456ff;
    }
    100%{
        color: #ffd45688;
    }
}

#calendaritems {
    animation: calendar var(--calendarspeed) linear 2s infinite;
    container: calendar size;
}

.hide-overflow{
    overflow: hidden;
}

@keyframes calendar {
    0%{
        top: var(--calendarinitoff)
    }
    100%{
        top: var(--calendarheight);
    }
}

.flipout {
    transform: rotateX(90deg);
    transition: transform 0.5s ease-in;
}

.flipin {
    transform: rotateX(0deg);
    transition: transform 0.5s ease-out;
}