@import url("https://fonts.googleapis.com/css?family=Lato");
:root {
  --bg: #000;
  --fg: #fff;
  --md: #ccc;
  --wr: #8a0202;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  transition: 1s;
}
body {
  background: var(--bg);
  color: var(--fg);
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  text-align: center;
}
.time {
  font-size: 25vh;
}
.date {
  font-size: 5vh;
}
.imggg {
  width: 10vw;
  height: 10vw;
}
.nodisp {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(3vh);
}
.cont {
  width: 20vw;
  height: 70vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--bg);
  border: var(--fg) solid 2px;
  border-radius: 5px;
}
.grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template: "1fr 1fr" 10vh "1fr 1fr" 10vh "1fr 1fr" 10vh;
  grid-gap: 2vh;
}
.option {
  height: 10vh;
  width: 5vw;
  border: var(--md) solid 1px;
  cursor: pointer;
}
.white {
  background: #fff;
}
.black {
  background: #040404;
}
.blue {
  background: #023e8a;
}
.red {
  background: #8a0202;
}
.green {
  background: #028a02;
}
.orange {
  background: #ff5c00;
}
.yellow {
  background: #fff200;
}
.purple {
  background: #55028a;
}
.cont h1 {
  margin-bottom: 2vh;
}
.settings {
  position: fixed;
  bottom: 5vh;
  right: 2.5vw;
  height: 5vh;
  width: 5vh;
  cursor: pointer;
}
.cog {
  color: var(--fg);
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.cog svg {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.x {
  height: 2vw;
  width: 2vw;
  background: var(--wr);
  border-radius: 5px;
  padding: 1vh;
  cursor: pointer;
}
.x svg {
  width: 100%;
  height: 100%;
}
.xsect {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 2vw;
}
.popup {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(3vh);
}
.cog path {
  fill: var(--fg);
}