body {
  background-color: #008080;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: monospace;
}
body:hover {
  cursor: url("./img/pointer.png"), auto;
}
a,
button {
  cursor: url("./img/clicker.png"), auto;
}

:root {
  --lightGrey: rgb(192, 196, 200);
  --darkGrey: #84888c;
  --borderWhite: rgb(228, 226, 226);
  --borderGray: gray;
}

.windowModal.show {
  visibility: visible;
}
/* Make components */
/* .sixPer {
  flex-basis: 60%;
  background-color: violet;
  display: flex;
}
.fourPer {
  flex-basis: 40%;
  background-color: yellowgreen;
  position: relative;
  bottom: 0;
} */

/* icons Start */
@media (min-width: 1200px) {
  /* XLarge */
  .icons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 5%;
    height: 100%;
    margin-top: 2%;
    margin-left: 1%;
    text-align: center;
    cursor: url("./img/clicker.png"), auto;
  }
  .icons img {
    width: 75%;
    height: 70%;
  }
  .icons a {
    text-decoration: none;
  }
  .icons p {
    color: white;
    margin: 0;
  }
}
@media (max-width: 1200px) {
  /* large, medium, small */
  .icons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 5%;
    height: 100%;
    margin-top: 1%;
    margin-left: 1%;
    text-align: center;
    cursor: url("./img/clicker.png"), auto;
  }
  .icons img {
    width: 80%;
    height: 50%;
  }
  .icons a {
    text-decoration: none;
  }
  .icons p {
    color: white;
    margin: 0;
  }
}
/* icons End */

/* comment Start */
#cmtModal {
  /* OnOff */
  visibility: hidden;
}
@media (min-width: 992px) {
  /* large */
  .modal {
    background-color: var(--darkGrey);
    width: 65%;
    height: 60%;
    overflow: scroll;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    /* onoff */
    visibility: hidden;
  }
}
.cmt {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--lightGrey);
  overflow: hidden;
  position: relative;
}
.cmtRes {
  position: relative;
  flex-basis: 50%;
  width: 70%;
  position: relative;
  margin-top: 1%;
  margin-bottom: 2%;
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-bottom: 3px solid var(--borderGray);
  border-right: 3px solid var(--borderGray);
  background-color: #ffecaf;
  color: black;
  left: 50%;
  transform: translateX(-50%);
}
.cmtWriteDiv {
  background-color: var(--lightGrey);
  flex-basis: 50%;
}
#cmtWrite {
  width: 70%;
  position: relative;
  /* bottom: 0; */
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1200px) {
  /* XLarge */
  #cmtBtn {
    position: absolute;
    bottom: 15%;
    right: 10%;
    width: 8%;
    height: 8%;
    overflow: inherit;
    /* background-color: var(--lightGrey); */
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  /* large */
  #cmtBtn {
    position: absolute;
    bottom: 10%;
    right: 8%;
    width: fit-content;
    height: 8%;
    overflow: inherit;
    background-color: var(--lightGrey);
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  /* medium */
  #cmtBtn {
    position: absolute;
    bottom: 25%;
    right: 5%;
    width: fit-content;
    height: 8%;
    overflow: inherit;
    background-color: var(--lightGrey);
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
  }
}
@media (max-width: 576px) {
  /* small */
  #cmtBtn {
    position: absolute;
    bottom: 10%;
    right: 1%;
    width: fit-content;
    height: 8%;
    overflow: inherit;
    background-color: var(--lightGrey);
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
  }
}
/* comment End */

/* imgModal Start*/
#imgModal {
  /* OnOff */
  visibility: hidden;
}
@media (min-width: 1200px) {
  /* XLarge */
  .modal {
    background-color: var(--darkGrey);
    width: 65%;
    height: 60%;
    overflow: scroll;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .colors > button {
    width: 10%;
    height: 8vh;
    border-color: var(--borderWhite);
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  /* large */
  .modal {
    background-color: var(--darkGrey);
    width: 65%;
    height: 60%;
    overflow: scroll;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .colors > button {
    width: 100%;
    height: 8vh;
    border-color: var(--borderWhite);
  }
}

@media (min-width: 576px) and (max-width: 992px) {
  /* medium */
  .modal {
    background-color: var(--darkGrey);
    width: 70%;
    height: 40%;
    overflow: scroll;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    visibility: hidden;
  }
  .colors > button {
    width: 10%;
    height: 5vh;
    border-color: var(--borderWhite);
  }
}
@media (max-width: 576px) {
  /* small */
  .modal {
    background-color: var(--darkGrey);
    width: 70%;
    height: 45%;
    overflow: scroll;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    visibility: hidden;
  }
  .colors > button {
    width: 10%;
    height: 5vh;
    border-color: var(--borderWhite);
  }
}

.topBar {
  background-color: var(--darkGrey);
  display: flex;
  justify-content: space-between;
}
.topBarRight {
  color: black;
  background-color: var(--darkGrey);
}
.topBarRight button {
  background-color: var(--lightGrey);
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-bottom: 3px solid var(--borderGray);
  border-right: 3px solid var(--borderGray);
}
._Btn {
  font-weight: bold;
}
.xBtn {
  /* xBtn */
  margin-right: 10px;
}
.topBarLeft {
  margin-left: 1%;
  color: white;
  font-size: large;
}
img {
  width: 100%;
  height: 80%;
}
.colors {
  background-color: var(--darkGrey);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

#btn1 {
  background-color: aquamarine;
}
#btn2 {
  background-color: pink;
}
#btn3 {
  background-color: palegreen;
}
#btn4 {
  background-color: plum;
}
#btn5 {
  background-color: paleturquoise;
}
#btn6 {
  background-color: lemonchiffon;
}
#btn7 {
  background-color: violet;
}
#btn8 {
  background-color: sandybrown;
}
#btn9 {
  background-color: steelblue;
}
#btn10 {
  background-color: slateblue;
}
/* imgModal End */

/* bottomBar Start */
@media (min-width: 1200px) {
  /* XLarge */
  .bottomBar {
    width: 100%;
    height: 7%;
    position: absolute;
    bottom: 0;
    background-color: var(--lightGrey);
    display: flex;
    justify-content: space-between;
    border-top: 3px solid white;
    flex-direction: row;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .bottomBar {
    width: 100%;
    height: 7%;
    position: absolute;
    bottom: 0;
    background-color: var(--lightGrey);
    display: flex;
    justify-content: space-between;
    border-top: 3px solid white;
    flex-direction: row;
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  /* medium */
  .bottomBar {
    width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
    background-color: var(--lightGrey);
    display: flex;
    justify-content: space-between;
    border-top: 3px solid white;
    flex-direction: row;
  }
}
@media (max-width: 576px) {
  /* small */
  .bottomBar {
    width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
    background-color: var(--lightGrey);
    display: flex;
    justify-content: space-between;
    border-top: 3px solid white;
    flex-direction: row;
  }
}

.bottomBarLeft {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--lightGrey);
}
#windowBtn {
  width: 100%;
  height: 100%;
  background-color: var(--lightGrey);
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-bottom: 3px solid var(--borderGray);
  border-right: 3px solid var(--borderGray);
}
#windowBtn img {
  cursor: url("./img/clicker.png"), auto;
  height: 100%;
  width: 100%;
}
#prcs1 {
  width: 100%;
  background-color: var(--lightGrey);
  border-right: 2px solid var(--borderGray);
  /* OnOff */
  display: none;
}
#prcs2 {
  width: 100%;
  background-color: var(--lightGrey);
  border-right: 2px solid var(--borderGray);
  /* OnOff */
  visibility: hidden;
}
.bottomBarRight {
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: row;
  margin-right: 1%;
  justify-content: flex-end;
  position: relative;
}
.bottomBarRight img {
  margin-right: 5%;
  width: 40%;
  height: 100%;
}
#time {
  /* line-height: 100%; */
  flex-wrap: wrap;
  position: relative;
  top: 30%;
  font-size: medium;
}
/* bottomBar End */

/* windowModal Start */

/* .iconSide {
  width: 100%;
  height: 100%;
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.iconSide img {
  width: 50%;
  height: 20%;
  margin: auto;
}
.txtSide {
  width: 100%;
  height: 100%;
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
} */
@media (min-width: 1200px) {
  /* XLarge */
  .windowModal {
    width: 15%;
    height: 40%;
    background-color: var(--lightGrey);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
    position: absolute;
    bottom: 7%;
    overflow: inherit;
    z-index: 3;
    /* OnOff */
    visibility: hidden;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  /* large */
  .windowModal {
    width: 20%;
    height: 40%;
    background-color: var(--lightGrey);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
    position: absolute;
    bottom: 7%;
    overflow: inherit;
    z-index: 3;
    /* OnOff */
    visibility: hidden;
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  /* medium */
  .windowModal {
    width: 30%;
    height: 40%;
    background-color: var(--lightGrey);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
    position: absolute;
    bottom: 5%;
    overflow: inherit;
    z-index: 3;
    /* OnOff */
    visibility: hidden;
  }
}
@media (max-width: 576px) {
  /* small */
  .windowModal {
    width: 35%;
    height: 40%;
    background-color: var(--lightGrey);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid var(--borderGray);
    border-right: 3px solid var(--borderGray);
    position: absolute;
    bottom: 5%;
    overflow: inherit;
    z-index: 3;
    /* OnOff */
    visibility: hidden;
  }
}
.prgm {
  width: 100%;
  height: 100%;
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px solid var(--borderGray);
}
.prgm img {
  width: 30%;
  margin: auto;
}
.prgm p {
  width: 50%;
  margin: auto;
}
.help {
  width: 100%;
  height: 100%;
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px solid var(--borderGray);
}
.help img {
  width: 30%;
  margin: auto;
}
.help p {
  width: 50%;
  margin: auto;
}
.shtDwn {
  width: 100%;
  height: 100%;
  background-color: var(--lightGrey);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.shtDwn img {
  width: 30%;
  margin: auto;
}
.shtDwn p {
  width: 50%;
  margin: auto;
}
/* windowsModal End */

/* shutDown Screen Start*/
@media (min-width: 1200px) {
  /* XLarge */
  .offContents {
    width: 100%;
    height: 100%;
    background-color: #5a7edc;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
  }
  .off img {
    width: 20%;
    height: 30%;
    margin-bottom: 1%;
  }
  #rtrn {
    width: 8%;
    height: 6%;
    background-color: tomato;
    color: white;
    margin-top: 1%;
    font-size: medium;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  /* large */
  .offContents {
    width: 100%;
    height: 100%;
    background-color: #5a7edc;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
  }
  .off img {
    width: 20%;
    height: 30%;
  }
  #rtrn {
    width: 10%;
    height: 7%;
    background-color: tomato;
    color: white;
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  /* medium */
  .offContents {
    width: 100%;
    height: 100%;
    background-color: #5a7edc;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
  }
  .off img {
    width: 25%;
    height: 20%;
  }
  #rtrn {
    width: 10%;
    height: 5%;
    background-color: tomato;
    color: white;
    font-size: medium;
  }
}

@media (max-width: 576px) {
  /* small */
  .offContents {
    width: 100%;
    height: 100%;
    background-color: #5a7edc;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
  }
  .off img {
    width: 35%;
    height: 20%;
  }
  #rtrn {
    width: fit-content;
    height: 5%;
    background-color: tomato;
    color: white;
  }
}

.off {
  width: 100%;
  height: 100%;
  background-color: #5a7edc;
  z-index: 2147483647;
  position: absolute;
  display: none;
  animation: fadein 2s;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
}
.off h1 span {
  color: white;
  font-weight: bold;
  animation: txtup 1.5s infinite;
  position: relative;
}

/* Animation Start */
/* shutDown Animation */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* shutDown Text Animation */
@keyframes txtup {
  0% {
    top: 0;
  }
  20% {
    top: -0.4rem;
  }
  40% {
    top: 0;
  }
  60% {
    top: 0;
  }
  80% {
    top: 0;
  }
  100% {
    top: 0;
  }
}
.off h1 span:nth-of-type(1) {
  animation-delay: 0.1s;
}
.off h1 span:nth-of-type(2) {
  animation-delay: 0.3s;
}
/* Animation Start  End*/