* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 45.5%;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

p,
label,
button {
  font-size: 1.8rem;
  font-weight: 300;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 2.6rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 2.2rem;
}

h4 {
  font-size: 2rem;
}

header {
  height: 10vh;
  background: #1b1b1b;
  background: linear-gradient(180deg, #1b1b1b 0%, #2a2a2a 50%, #323232 100%);
  color: #eeedf0;
}

header .logo-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-family: "Abril Fatface", cursive;
  font-weight: 400;
  height: 100%;
  margin: auto;
  margin-left: 2.3rem;
  letter-spacing: 0.2rem;
}

header .dot {
  color: #fc6e20;
  font-size: 3rem;
  margin-left: 0.2rem;
}

header nav {
  position: relative;
  height: 100%;
}

header .burger {
  position: absolute;
  top: 42%;
  right: 3%;
  transition: all 200ms ease;
}

header .burger:hover {
  transform: scale(1.2);
}

.burgerline {
  width: 2rem;
  height: 0.4rem;
  background: #eeedf0;
  margin-bottom: 0.2rem;
  pointer-events: none;
}

main {
  height: 85vh;
  width: 100vw;
  margin: auto;
}

.current {
  height: 50vh;
  width: 100%;
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  grid-template-rows: 1;
  background: #323232;
}

.intro {
  grid-area: 2/1/2/2;
  text-align: center;
  background: lightcoral;
  height: 80%;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.wrapper {
  height: 100%;
  width: 100%;
  margin: auto;
  grid-area: 1/2/2/3;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: repeat(2, 1fr);
}

.clock-numbered {
  height: 100%;
  width: 100vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
}

.clock-numbered .info-wrap {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-style: italic;
  color: #e4d7cc;
  letter-spacing: 0.1rem;
}

.time-wrap {
  color: #eeedf0;
  width: 75%;
  height: 40%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.time-wrap span {
  font-size: 4rem;
}

.time-wrap .delimiter {
  margin-inline: 3rem;
}

.other-tz {
  height: 35vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 0.3fr;
  background: #323232;
}

.selected {
  grid-area: 1/2/1/3;
  text-align: center;
  align-self: center;
}

.selected p {
  margin-top: 2rem;
}

.clock-edt,
.clock-jst,
.clock-msk {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: #323232;
}

.clock-jst {
  grid-area: 1/2/1/2;
}

.clock-est {
  grid-area: 1/2/1/2;
}

.clock-msk,
.msk-div {
  display: none;
}

.timezone {
  color: #fd772e;
}

.clock {
  width: 19rem;
  height: 19rem;
  background: #212529;
  border-radius: 50%;
  border: 4px solid #353333;
  position: relative;
  box-shadow: -6px -6px 12px rgba(44, 44, 44, 0.5), inset 6px 6px 12px rgba(0, 0, 0, 0.5), inset -6px -6px 12px rgba(67, 67, 67, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.outer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #323232;
  border-radius: 100%;
}

.outer::after {
  transform: rotate(90deg);
}

.outer::after,
.outer::before,
.line {
  content: "";
  position: absolute;
  width: 0.25rem;
  height: 100%;
  background: #ffd5ad;
  z-index: 0;
  left: 49%;
}

.line {
  width: 1.5px;
  background: #696666;
}

.line1 {
  transform: rotate(30deg);
}

.line2 {
  transform: rotate(60deg);
}

.line3 {
  transform: rotate(120deg);
}

.line4 {
  transform: rotate(150deg);
}

.inner {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: #323232;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  z-index: 1;
}

.inner::before {
  content: "";
  position: absolute;
  top: 47%;
  right: 48%;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: #2b2929;
  z-index: 20;
}

.hand {
  z-index: 19;
  position: absolute;
  right: 50%;
  top: 50%;
  height: 0.7rem;
  width: 50%;
  background: #4c5458;
  border-radius: 1rem;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.11, 2.7, 0.59, 1.01);
}

.hour-hand {
  width: 30%;
  height: 0.45rem;
  z-index: 4;
}

.minute-hand {
  height: 0.45rem;
  width: 45%;
  z-index: 10;
}

.second-hand {
  background: #fc6e20;
  width: 45%;
  height: 0.3rem;
}

.select-wrapper {
  grid-area: 2/2/2/3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1;
}

.drop-down-area,
.drop-down-city {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  height: 80%;
  width: 100%;
  margin: auto;
}

.new-tz {
  color: #fc6e20;
}

footer {
  background: #1b1b1b;
  background: linear-gradient(0deg, #282626 0%, #2a2a2a 47%, #323232 100%);
  color: #e4d7cc;
  height: 5vh;
}

.text-wrapper {
  text-align: center;
  color: #e4d7cc;
  letter-spacing: 0.1rem;
}

.text-wrapper p {
  margin-top: 0.5rem;
  font-size: 1.6rem;
  font-style: italic;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.footer-text {
  letter-spacing: 0.1rem;
  font-style: italic;
  color: #eeedf0;
}

.footer-text .name {
  margin-left: 0.3rem;
}

.footer-icon {
  font-size: 2rem;
  margin-left: 1rem;
}

.footer-icon i {
  font-size: 2rem;
  color: #eeedf0;
  transition: all 250ms ease-in-out;
}

.footer-icon i:hover {
  transform: rotate(360deg) scale(1.1) !important;
}

.menu {
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: 99;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 0.35fr 1fr;
  background: white;
  position: relative;
}

.header-wrapper,
.area-wrapper {
  width: 100%;
  height: 100%;
}

.header-wrapper {
  margin: 0 0 2rem 2rem;
}

.header-wrapper h1,
.header-wrapper p {
  color: #e4d7cc;
}

.header-wrapper h1 {
  margin-top: 2.5rem;
  font-size: 2.2rem;
}

.header-wrapper p {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.1rem;
}

.area-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr repeat(4, 1.25fr) 2fr;
  position: fixed;
  left: -100%;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #323232;
}

.area-wrapper a {
  text-decoration: underline;
  color: #eeedf0;
  font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
}

.nav-full-active {
  left: 0;
}

.icon {
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 2%;
  right: 2%;
}

.icon i {
  pointer-events: none;
  font-size: 1.8rem;
  color: #1b1b1b;
}

.logo-header-inactive {
  display: none;
}

.options {
  position: relative;
  z-index: 3;
  display: none;
  margin-top: 1rem;
}

.options select {
  width: 90%;
  font-size: 1.7rem;
  outline: none;
  border: none;
  background: #323232;
  color: white;
  border-radius: 1rem;
  margin-top: 1.5rem;
  appearance: none;
}

.options::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078";
  position: absolute;
  color: #fc6e20;
  top: 46%;
  right: 15%;
  font-size: 1.6rem;
  pointer-events: none;
}

.options-active {
  display: block;
}

.option-area {
  margin: 2rem 0 0 2rem;
}

.region-selector {
  position: relative;
}

.region-selector::before {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  height: 0.25rem;
  left: 50%;
  position: absolute;
  background: #fc6e20;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.region-selector:hover::before {
  width: 100%;
  left: 0;
}

@media screen and (max-width: 240px) {
  .options select {
    margin-top: 0.5rem;
  }
  .options::after {
    right: 15%;
  }
}

@media screen and (min-width: 240px) and (max-width: 302px) {
  html {
    font-size: 29%;
  }
  .logo-header {
    margin-left: 2.7rem;
  }
  .options::after {
    top: 36%;
    right: 15%;
  }
}

@media screen and (min-width: 303px) and (max-width: 319px) {
  html {
    font-size: 36.5%;
  }
}

@media screen and (min-width: 600px) {
  .options::after {
    right: 40%;
  }
}

@media screen and (min-width: 700px) {
  html {
    font-size: 52.5%;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 55.5%;
  }
  h1 {
    font-size: 3rem;
  }
  p {
    font-size: 2rem;
  }
  .text-wrapper p {
    font-size: 2rem;
  }
  .burgerline {
    width: 3rem;
    height: 0.5rem;
  }
  .footer-icon i {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 58.5%;
  }
  .clock {
    height: 25rem;
    width: 25rem;
  }
}

@media screen and (min-width: 900px) {
  html {
    font-size: 59%;
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 62.5%;
  }
  .logo-header h1 {
    font-size: 3rem;
  }
  .clock {
    width: 20rem;
    height: 20rem;
  }
  .header-wrapper h1 {
    font-size: 2.5rem;
  }
  .header-wrapper p {
    font-size: 1.8rem;
  }
  .other-tz {
    grid-template-columns: repeat(3, 1fr);
  }
  .clock-jst {
    grid-area: 1/3/1/4;
  }
  .clock-msk {
    display: block;
    grid-area: 1/2/1/3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .msk-div {
    display: block;
  }
  .edt-div {
    grid-area: 2/1/2/2;
  }
  .msk-div {
    grid-area: 2/2/2/3;
  }
  .jst-div {
    grid-area: 2/3/2/4;
  }
  .info-wrap p {
    font-size: 2.5rem;
  }
  .area-wrapper a {
    font-size: 2.5rem;
  }
  .options select {
    font-size: 2rem;
    width: 60%;
  }
  .options::after {
    right: 55%;
  }
  .footer-text p {
    font-size: 1.4rem;
  }
  .footer-icon i {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 1440px) {
  .options::after {
    right: 63%;
  }
}

@media screen and (min-width: 1700px) {
  html {
    font-size: 67%;
  }
  .text-wrapper p {
    margin-top: 0.6rem;
  }
  .options::after {
    right: 67%;
  }
}
/*# sourceMappingURL=style.css.map */