@import "../common.css";
:root {
  --size: 50vw;
  --clr_menu: #158;
  --bk_menu: lightgray;
}

html,
body {
  padding: 2rem;
  background-color: antiquewhite;
  height: 100vh;
  width: 100vw;
  font-family: "Courier New", Courier, monospace;
}

.container {
  width: 100%;
  height: fit-content;
  position: relative;
}

/* ***********  Clock labels for 12, 3, 6 & 9 O'clock ************** */
.txt {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  font-size: 4rem;
  color: gold;
  position: absolute;
}

.t12 {
  top: 0%;
}

.t3 {
  right: 3%;
}

.t6 {
  bottom: 0%;
}

.t9 {
  left: 3%;
}

/* ********** This is used for sending debug info to screen ********** */
.temp {
  display: fixed;
  position: absolute;
  bottom: 100px;
  background-color: lightgray;
}

/* ********** Displa the date on the face of clock ********** */
.date {
  position: absolute;
  top: 70%;
  /* left: 18vw; */
  background-color: lightgrey;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  width: fit-content;
  /* height: auto; */
  padding: 0.7em;
  align-items: center;
  border-radius: 50%;
  z-index: 0;
}

/* ********** Draw to clock with face and second, minute & hour hands *********** */
.clkcontainer {
  display: flex;
  position: absolute;
  top: 20px;
  margin: 0 20vw;
  /* width: 100%; */
  justify-content: center;
}

.clock {
  border: 0.5rem solid black;
  height: var(--size);
  width: var(--size);
  /* align-self: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
  background-size: var(--size) var(--size);
  z-index: 0;
}

.clksquare {
  border-radius: 3%;
}

.clkround {
  border-radius: 50%;
}

.wood {
  background-image: url("../pix/wood.jpg");
}

.oza5n {
  background-image: url("../pix/nFam.png");
}

.ozafam {
  background-image: url("../pix/ozaFam.png");
}

.hand {
  position: absolute;
  border: 0.15rem solid black;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.second-hand {
  background-color: #fe6d73;
  height: 0.25rem;
  width: 45%;
  z-index: 3;
}

.sec-on-border {
  display: none; 
  position: fixed;
  background-color: #fe6d73;
  border-radius: 50%;
  height: 1.5rem;
  width: 2rem;
  /* transform: -100% -100%; */
  z-index: 3;
}

.minute-hand {
  background-color: #89a6fb;
  height: 0.5rem;
  width: 35%;
  z-index: 2;
}

.hour-hand {
  background-color: #98ce00;
  height: 1rem;
  width: 25%;
  z-index: 1;
}

/* ********** Center gold button for menu ********** */
.clock-center {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  border: 0.1rem solid black;
  background-color: gold;
  position: absolute;
  z-index: 5;
}

/***********  Menu stuff ***********************/

.navbar {
  display: none;
  position: absolute;
  top: 2vh;
  left: 1vw;
  width: fit-content;
  height: fit-content;
}

.caret {
  margin-top: 0.1rem;
  margin-left: 1rem;
}

.dropdown {
  width: 20vw;
  height: fit-content;
  box-shadow: 0px 5px 36px 1px lightblue;
}

.dropdown a,
.dropdown div.smenu1,
.dropdown div.smenu2,
.dropdown div.smenu3,
.item1 a,
.item2 a,
.item3 a {
  display: block;
  float: left;
  font-size: 1em;
  margin: 0;
  padding: 0.5rem;
  height: fit-content;
  width: 100%;
  color: var(--clr_menu);
  background-color: var(--bk_menu);
  border: none;
}

.dropdown div.smenu1:hover,
.dropdown div.smenu2:hover,
.dropdown div.smenu3:hover,
.dropdown a:hover,
.item1 a:hover,
.item2 a:hover,
.item3 a:hover {
  background-color: gray;
  color: white;
  /* text-decoration: none; */
}

.item1,
.item2,
.item3 {
  display: none;
  position: fixed;
  margin-left: 50px;
  width: 20vw;
  top: 100px;
  left: 0px;
}

.item2 {
  top: 130px;
}

.item3 {
  top: 155px;
}

.smenu1:hover .item1,
.smenu2:hover .item2,
.smenu3:hover .item3 {
  display: block;
  transform: translate3d(50px, 0, 0);
  transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1);
}
/* display: flex;       
  flex-direction: column;
  position: relative;
  top: -5%;
  left: 5%;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-top: -10px;
  padding: 1rem;
  padding-top: 0.5rem;
} */

/* .subMenuGrp1 { */
/* padding: 1rem; */
/* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-top: -20px;
} */

.show {
  display: block;
}

.hide {
  display: none;
}