style.css

body {
  margin: 0;
  height: 100vh;
  display: flex;

  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}

/* Background */
.wrapper {
  z-index: -1;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  position: absolute;
}
.bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #2c3e50 50%, #3498db 50%);
}

/* Country and description */
h1 {
  width: 50%;
  margin: auto;

  font-size: 3em;
  text-align: center;
}
#desc {
  color: #2c3e50;
  margin-left: 216px;
}
#country {
  color: #3498db;
  margin-right: 216px;
}

/* Clock "image" */
#clock {
  width: 400px;
  height: 400px;

  top: calc(50% - 200px);
  left: calc(50% - 200px);

  transform: rotate(90deg);
}
#clock,
#clock div {
  position: absolute;
  border-radius: 50%;
  background: #424242;
  transition: all .218s ease-in;
}
#clock .clock-bg {
  height: 400px;
  width: 400px;
}
#clock .clock-fg {
  height: 370px;
  width: 370px;
  margin: 15px;

  background: #fafafa;
  transform: rotate(-90deg);
}
#clock .clock-center {
  height: 20px;
  width: 20px;
  margin: 175px;
}
#clock .clock-needle {
  height: 170px;
  width: 10px;
  top: 15px;
  left: 180px;

  border-radius: 0;
}
#clock .clock-center,
#clock .clock-needle {
  transition:  all .218s ease-in 0s, opacity .218s ease-in .218s !important;
}

/* Clock dialog */
#clock:hover {
  cursor: pointer;
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1), 5px 0 13px 0 rgba(0,0,0,0.1), -5px 0 10px 0 rgba(0,0,0,0.1);
}
#clock.dialog,
#clock.dialog > .clock-bg {
  border-radius: 5px;
  transform: rotate(0deg);
}
#clock.dialog .clock-fg {
  width: 0;
  height: 0;
  margin: 200px;
}
#clock.dialog .clock-center,
#clock.dialog .clock-needle {
  transition: opacity 0s ease-in 0s !important;
  margin: 0;
  opacity: 0;
}
.dialog .info {
  opacity: 1;
  transition-delay: .218s;
}

/* Dialog message */
.info {
  position: absolute;
  top: 105px;
  margin: 20px;

  text-align: center;
  line-height: 50px;
  font-size: 1.5em;
  color: #e0e0e0;

  opacity: 0;
}
.info > span{
  text-transform: uppercase;
  font-weight: 700;
}

/* Medium Screens */
@media (max-width: 840px) {
  .bg {
    transform: rotate(90deg);
    transform-origin:bottom left;

    position:relative;
    top:-100vw;

    height:100vw;
    width:100vh;
  }

  h1 { position: absolute; width: 100%; }
  #country { top: 50px; margin: 0 auto; }
  #desc { bottom: 50px; margin: 0 auto; }
}

/* Small Screens */
@media (max-width: 500px), (max-width: 840px) and (max-height: 750px) {
  h1 { font-size: 2em; }
  #country { top: 25px; }
  #desc { bottom: 25px; }

  #clock {
    width: 300px;
    height: 300px;

    top: calc(50% - 150px);
    left: calc(50% - 150px);
  }
  #clock .clock-bg { width: 300px; height: 300px; }
  #clock .clock-fg { width: 280px; height: 280px; margin: 10px; }
  #clock .clock-center { width: 16px; height: 16px; margin: 132px; }
  #clock .clock-needle { width: 8px; height: 125px; left: 136px; }
  #clock .info { top: 35px; }

  #clock.dialog .clock-fg { margin: 150px; }
}

/* Screens I don't want to support */
@media (max-width: 300px), (max-height: 450px) {
  body > * {
    display: none
  }
  body {
    text-align: center;
    background: #212121;
    color: #fafafa;
  }
  body:after {
    content: 'Your screen is so small, you found an easter egg!';
    position: absolute;
    opacity: 1;

    text-transform: uppercase;
    top: 50%;
    width: 100%;
  }
}