.display-datetime-nameday>div {
  width: 90%;
}

.display-datetime-nameday #calendar-date-text {
  font-size: 12vh;
}

.display-datetime-nameday #calendar-month-text {
  font-size: 4vh;
}

.display-datetime-nameday .datetime {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.display-datetime-nameday .date-wrapper {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
}

.display-datetime-nameday .date-wrapper img {
  width: 30vh;
}

.display-datetime-nameday .day-wrapper>div {
  margin-left: 4vh;
}

.display-datetime-nameday .date-wrapper .day-name {
  font-size: 14vh;
}

.display-datetime-nameday .date-wrapper .day-value {
  font-size: 8.5vh;
}

.display-datetime-nameday .time-wrapper {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-end;
}

.display-datetime-nameday .time-wrapper img {
  width: 30vh;
  margin-right: 2vh;
}

.display-datetime-nameday .time-wrapper .time-value {
  font-size: 30vh;
}

.display-datetime-nameday .nameday {
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.display-datetime-nameday .nameday-content {
  display: flex;
  flex-flow: row;
  align-items: center;
  background-color: rgba(247, 247, 247, 0.2);
}

.display-datetime-nameday .nameday-wrapper-img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
}

.display-datetime-nameday .nameday-wrapper-img img {
  width: 25vh;
  margin-right: 2vh;
}

.display-datetime-nameday .nameday-today {
  font-size: 9vh;
}

.display-datetime-nameday .nameday-today-value {
  font-size: 9vh;
}

.display-datetime-nameday #loader {
  display: none;
}

.display-datetime-nameday .weather {
  display: none;
}

@media (max-aspect-ratio: 152/63) {
  .display-datetime-nameday>div {
    width: 85%;
  }

  .display-datetime-nameday #calendar-date-text {
    font-size: 5vh;
  }
  
  .display-datetime-nameday #calendar-month-text {
    font-size: 1.3vh;
  }

  .display-datetime-nameday .date-wrapper img {
    width: 20vh;
  }

  .display-datetime-nameday .day-wrapper>div {
    margin-left: 4vh;
  }

  .display-datetime-nameday .date-wrapper .day-name {
    font-size: 9vh;
  }

  .display-datetime-nameday .date-wrapper .day-value {
    font-size: 5vh;
  }

  .display-datetime-nameday .time-wrapper img {
    width: 20vh;
    margin-right: 2vh;
  }

  .display-datetime-nameday .time-wrapper .time-value {
    font-size: 20vh;
  }

  .display-datetime-nameday .nameday-wrapper-img img {
    width: 20vh;
    margin-right: 2vh;
  }

  .display-datetime-nameday .nameday-today {
    font-size: 8vh;
  }

  .display-datetime-nameday .nameday-today-value {
    font-size: 8vh;
  }
}

@media (max-aspect-ratio: 25/15) {
  .display-datetime-nameday .date-wrapper img {
    width: 15vh;
  }

  .display-datetime-nameday .day-wrapper>div {
    margin-left: 4vh;
  }

  .display-datetime-nameday .date-wrapper .day-name {
    font-size: 7vh;
  }

  .display-datetime-nameday .date-wrapper .day-value {
    font-size: 5vh;
  }

  .display-datetime-nameday .time-wrapper img {
    width: 15vh;
    margin-right: 2vh;
  }

  .display-datetime-nameday .time-wrapper .time-value {
    font-size: 15vh;
  }

  .display-datetime-nameday .nameday-wrapper-img img {
    width: 20vh;
    margin-right: 2vh;
  }

  .display-datetime-nameday .nameday-today {
    font-size: 7vh;
  }

  .display-datetime-nameday .nameday-today-value {
    font-size: 7vh;
  }
}

@media (max-aspect-ratio: 15/11) {
  .display-datetime-nameday .date-wrapper img {
    width: 10vh;
  }

  .display-datetime-nameday .day-wrapper>div {
    margin-left: 4vh;
  }

  .display-datetime-nameday .date-wrapper .day-name {
    font-size: 5vh;
  }

  .display-datetime-nameday .date-wrapper .day-value {
    font-size: 3vh;
  }

  .display-datetime-nameday .time-wrapper img {
    width: 10vh;
    margin-right: 2vh;
  }

  .display-datetime-nameday .time-wrapper .time-value {
    font-size: 10vh;
  }

  .display-datetime-nameday .nameday-wrapper-img img {
    width: 10vh;
    margin-right: 2vh;
  }

  .display-datetime-nameday .nameday-today {
    font-size: 5vh;
  }

  .display-datetime-nameday .nameday-today-value {
    font-size: 5vh;
  }
}

@media (orientation: portrait) {
  .display-datetime-nameday>div {
    width: 90vw;
  }

  .display-datetime-nameday #calendar-date-text {
    font-size: 5vw;
  }
  
  .display-datetime-nameday #calendar-month-text {
    font-size: 1.5vw;
  }

  .display-datetime-nameday .datetime {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .display-datetime-nameday .date-wrapper img {
    width: 10vw;
  }

  .display-datetime-nameday .day-wrapper>div {
    margin-left: 2vw;
  }

  .display-datetime-nameday .date-wrapper .day-name {
    font-size: 4vw;
  }

  .display-datetime-nameday .date-wrapper .day-value {
    font-size: 2.8vw;
  }

  .display-datetime-nameday .time-wrapper img {
    width: 10vw;
    margin-right: 1vw;
  }

  .display-datetime-nameday .time-wrapper .time-value {
    font-size: 10vw;
  }

  .display-datetime-nameday .nameday {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .display-datetime-nameday .nameday-wrapper-img img {
    width: 15vw;
    margin-right: 1vw;
  }

  .display-datetime-nameday .nameday-today {
    font-size: 4vw;
  }

  .display-datetime-nameday .nameday-today-value {
    font-size: 4vw;
  }
}