html,
body {
  margin: 0;
  padding: 0;
  background: #262626;
}

#logo {
  position: absolute;
  z-index: 999;
  top: 15px;
  left: 70px;
  width: 18vw;
  min-width: 250px;
  color: #fff;
  font-family: "rampart-one", sans-serif;
  font-size: 50px;
  font-style:italic;
}

#logo p{
  margin: 0;
  padding: 0;
}

#logo .name{
  color: #EBE504;
}

#logo .linetwo{
  transform: translateX(28%) translateY(-36%);
  padding: 0;
  margin: 0;
}

#logo img{
  position: absolute;
}

#logo img.onair{
  bottom: calc(36% - 10px);
  left: -120px;
}

#logo img.typhoon{
  top: 10px;
  left: 185px;
  width: 80px;
}






#map {
  background: #262626;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.time-label {
  background: rgba(0, 0, 0, 0.5);
  color: #ffffffdd;
  border-radius: 50px;
  padding: 2px 5px 0px;
  border: 2px solid #ffffff;
  text-align: center;
  font-size: 12px;
}

.time-label span {
  background: #ffffff;
  color: #000;
  margin-left: 3px;
  padding: 1px 5px;
  border-radius: 50px;
}

.now-label {
  background: #ffffff;
  color: #000000;
  border-radius: 50px;
  padding: 2px 5px 0px;
  border: 2px solid #ffffff;
  text-align: center;
  font-weight: bold;
}

.now-label span {
  color: #ff3333;
  animation-name: breathe;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes breathe {
  0% {
    color: #ff3333;
  }

  50% {
    color: #ffffff;
  }

  100% {
    color: #ff3333;
  }
}

.updatedTime {
  position: absolute;
  color: #fff;
  z-index: 999;
  bottom: 10px;
  right: 15px;
}