@media (prefers-color-scheme: light) {
  :root {
    --bgcolor: #fff;
    --textcolor: #000;
    --navbg: rgb(0, 204, 255);
    --navtxt: rgb(88, 155, 255);
    --body: rgb(0, 162, 255);
    --bodyh: rgb(0, 17, 255);
    --imgbg: black;
    --imgm: rgba(255, 255, 255, 0);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor: #000;
    --textcolor: #fff;
    --navbg: rgb(2, 27, 102);
    --navtxt: rgb(0, 204, 255);
    --body: rgb(62, 139, 255);
    --bodyh: rgb(105, 195, 255);
    --imgbg: white;
    --imgm: rgba(255, 255, 255, 0);
  }
}

body a {
  color: var(--body);
}

body a:hover {
  color: var(--bodyh);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--navbg)
}

body {
  background-color: var(--bgcolor);
  color: var(--textcolor);
}

nav ul {
  display: flex;
}

.nav li {
  list-style: none;
}

a {
  transition: 0.5s;
  display: block;
  text-decoration: none;
  margin-right: 35px;
}

.nav a {
  color: white;
}

.nav a:hover {
  transition: 0.5s;
  color: var(--navtxt);
}

body {
  margin-top: 70px;
}

.img {
  width: 3em;

}

.imgbg img {
  transition: 0.5;
  display: block;
  opacity: 1;
}
.imgbg{
    border-radius: 50px;
  transition: 0.5s;
  background-color: var(--imgm);
}
.imgbg :hover {
  border-radius: 50px;
  transition: 0.5s;
  background-color: var(--imgbg);
}
textarea{
  background-color: var(--bgcolor);
  color: var(--textcolor);
}