:root {
  --color1st: #2C2C2C;
  --color2nd: #F3F4F4;
  --color3rd: #FFF57E;
  --color4th: #853953;
}

* {
  font-family: system-ui;
  transition: .5s;
  border-radius: .5pc;
}

body {
  margin: 0;
  background: var(--color1st);
  color: white;
}

#web-page {
  width: 40pc;
  background: var(--color1st);
}

.myDiv {
  border-radius: 3.5pc;
  min-width: 20pc;
  width: 75%;
  height: 8pc;
  padding: 0.5pc;
  background: var(--color4th);
}

.dBtn {
  background: white;
  font-size: 1.5pc;
  padding: .3pc;
  width: 12pc;
  border-style: none;
  border-radius: 3pc;
}

.dBtn:hover {
  transform: rotateZ(360deg);
}

nav {
  background: var(--color4th);
  padding: .1pc;
  height: 3pc;
  border-radius: 6pc ;
}

nav a {
  text-decoration: none;
}

nav button {
  color: white;
  font-size: 1.2pc;
  padding: .7pc;
  background-color: transparent;
  border-style: none;
}

/* Mobile Design */
@media (max-width: 768px) {
  
  #web-page {
    width: 100%;
  }
}