:root {
  --size1w: 1520px;
  --size1h: 855px;
  --size2w: 1320px;
  --size2h: 742.5px;
  --size3w: 1140px;
  --size3h: 641.25px;
  --size4w: 960px;
  --size4h: 540px;
}


.audio { 
  position: absolute;
  top: 0;
  right: 0;
}
body {
  background: url("../images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

main {
  position: relative;
  display: grid;
  place-items: center;
  border: none;
  width: 1920px;
  height: 1080px;
}

.nav {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 1%;
  height: 10%;
  top: -5%;
}

.nav a {
  display: grid;
  place-items: center;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  border-radius: 20px;
  width: 10%;
  height: 50%;
  transition: 0.2s;
}

.nav p {
  font-size: var(--font1);
  background: var(--color1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.4s;
}

.nav a:hover {
  background: var(--color1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.nav a:hover p {
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 10%;
  width: calc(10% / 1.777777777777778);
  left: calc((-10% / 1.777777777777778) / 2);
  top: -5%;
  cursor: pointer;
}

.logo img {
  position: absolute;
  height: 60%;
  transition: 0.2s;

}

.logo:hover img {
  height: 65%;
}

@keyframes logoAnim {
  from {
    top: 15%;
  }
  to {
    top: 25%;
  }
}

.tools {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 5.625%;
  height: calc(5.625% * 1.777777777777778 * 2 + 10%);
  left: -2.8125%;
}

.tool {
  width: 100%;
  height: 32.5%;
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: 0.2s;
  cursor: pointer;
}

.tool img {
  width: 50%;
  transition: 0.2s;
}

.tool:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  transform: scale(+102%);
}

.active {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.color {
  position: absolute;
  border-radius: 50%;
  width: 5.625%;
  height: calc(5.625% * 1.777777777777778);
  bottom: calc(5.625% * 1.777777777777778 / -2);
  left: calc(5.625% / -2);
  display: grid;
  place-items: center;
}

.picker {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  /* outline: 2.5px solid aqua;
  outline-offset: 7.5px; */
  overflow: hidden;
}

input[type="color"]::-moz-color-swatch {
  border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

.board {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  width: 75%;
  height: 75%;
  left: 5%;
}

.board canvas {
  width: 100%;
  height: 100%;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  width: 10%;
  height: 75%;
  right: 5%;
}

.btn {
  width: 100%;
  height: 32.5%;
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: 0.2s;
  cursor: pointer;

}

.btn p {
  opacity: 0;
  width: 65%;
  transition: 0.2s;
  text-align: center;
  font-weight: 500;
  background: var(--color1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn img {
  width: 50%;
  transition: 0.2s;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  transform: scale(+102%);
}




.brushSettings {
  position: absolute;
  width: 56.25%;
  height: calc((56.25% / 10) * 1.777777777777778);
  left: 5%;
  bottom: 1.25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.widthSlider {
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widthSlider .icon {
  display: grid;
  place-items: center;
  width: 10%;
  height: 100%;
  border-radius: 50%;
}

.widthSlider .icon .size {
  width: 50%;
  height: 50%;
  background: var(--color1);
  border-radius: 50%;
  /* outline: 2.5px solid aqua;
  outline-offset: 7.5px; */
}

.slider {
  -webkit-appearance: none;
  width: 80%;
  height: 50%;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: var(--color1);
  border-radius: 50%;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 1vw;
  height: 1vw;
  background: var(--color1);
  border-radius: 50%;
  cursor: pointer;
}

@media only screen and (max-width: 2110px) {
  main {
    width: var(--size1w);
    height: var(--size1h);
  }
}
@media only screen and (max-width: 1620px) {
  main {
    width: var(--size2w);
    height: var(--size2h);
  }
  .nav p {
    font-size: var(--font4);
  }
  .btn p {
    font-size: var(--font3);
  }
}
@media only screen and (max-width: 1420px) {
  main {
    width: var(--size3w);
    height: var(--size3h);
  }
  .btn p {
    font-size: var(--font4);
  }
}
@media only screen and (max-width: 1210px) {
  main {
    width: var(--size4w);
    height: var(--size4h);
  }
  .nav p {
    font-size: var(--font5);
  }
  .btn p {
    font-size: var(--font5);
  }
}