@import url("colors.css");

#wallpaper {
  position: fixed;
  inset: 0;
  background-color: var(--site_bg_color1);
  background-image:
    radial-gradient(
      rgba(80, 80, 60, 0.08) 0.7px,
      transparent 0.8px
    );
  background-size: 4px 4px;
  z-index: -1;
}


#top_line,
#bottom_line{
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--site_bg_color2);
  pointer-events: none;
  z-index: -1;
}
#top_line {
  top: 60px;
}
#bottom_line {
  bottom: 40px;
}
#dotted_top_line1,
#dotted_bottom_line1 {
  content: "";
  position: absolute;
  left: 80px;
  right: 60px;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--site_bg_color2) 0px,
    var(--site_bg_color2) 8px,
    transparent 1px,
    transparent 45px
  );
  pointer-events: none;
  z-index: -1;
}
#dotted_top_line1{
  top: 63px;
}
#dotted_bottom_line1{
  bottom: 38px;
}
#dotted_top_line2,
#dotted_top_line3,
#dotted_top_line4,        
#dotted_bottom_line2,
#dotted_bottom_line3,
#dotted_bottom_line4 {
  content: "";
  position: absolute;
  right: 60px;
  height: 10px;
  background: radial-gradient(
    circle,
    var(--site_bg_color2) 2.5px,
    transparent 3px
  ) repeat-x;
  background-size: 45px 10px;
  pointer-events: none;
  z-index: -1;
}
#dotted_top_line2{
  top: 64px;
  left: 46px;
}
#dotted_top_line3 {
  top: 64px;
  left: 31px;
}
#dotted_top_line4 {
  top: 75px;
  left: 38.5px;
}

#dotted_bottom_line2{
  bottom: 30px;
  left: 46px;
}
#dotted_bottom_line3 {
  bottom: 30px;
  left: 31px;
}
#dotted_bottom_line4 {
  bottom: 19px;
  left: 38.5px;
}


#top_circle_1,
#top_circle_2,
#bottom_circle_1,
#bottom_circle_2{
  content: "";
  position: fixed;
  border: 2px solid var(--site_bg_color3);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
#top_circle_1 {
  width: 430px;
  height: 430px;
  left: -210px;
  top: -220px;
  
}
#top_circle_2 {
  width: 440px;
  height: 440px;
  left: -210px;
  top: -220px;
}
#bottom_circle_1 {
  width: 430px;
    height: 430px;
    right: -210px;
    bottom: -220px;
}
#bottom_circle_2 {
  width: 440px;
  height: 440px;
  right: -210px;
  bottom: -220px;
}


#top_diagonal_1,
#top_diagonal_2,
#top_diagonal_3,
#bottom_diagonal_1,
#bottom_diagonal_2,
#bottom_diagonal_3 {
  position: fixed;
  height: 2px;
  background: var(--site_bg_color3);
  pointer-events: none;
  transform: rotate(45deg);
  z-index: -1;
}
#top_diagonal_1 {
  width: 800px;
  left: -45px;
  top: 0px;
  transform-origin: left center;
}
#top_diagonal_2 {
  width: 950px;
  left: 0px;
  top:0px;
  transform-origin: left center;
}
#top_diagonal_3 {
  width: 875px;
  left: 0px;
  top: -45px;
  transform-origin: left center;
}
#bottom_diagonal_1 {
  width: 800px;
  right: +45px;
  bottom: 0px;
  transform-origin: right center;
}
#bottom_diagonal_2 {
  width: 900px;
  right: 0px;
  bottom: 0px;
  transform-origin: right center;
}
#bottom_diagonal_3 {
  width: 700px;
  right: 0px;
  bottom: +45px;
  transform-origin: right center;
}