/*@import url("https://fonts.cdnfonts.com/css/lcd");*/

@import url("../cdn/font/lcd/lcd.css");


.boxdbshadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important;
}

.bg-hover:hover,
.bg-hover:focus,
.bg-hover:active,
.bg-hover:target {
  opacity: 0.45 !important;
}



body {
  /*pointer-events: none;*/
  height: 500vh;
  --speed: 1;
  --cursor: grab;
  background: url("../img/woodgrain.jpg") 50% 50%/100vw 100vh no-repeat fixed;
  cursor: var(--cursor);
  margin: 0px;
}

/*body * {
  font-family: "LCD", sans-serif;
  font-family: "LCD2", sans-serif;
  font-family: "LCDMono2", sans-serif;
  font-family: "LCDMono", sans-serif;
  font-family: "Digitalism", sans-serif;
  text-transform: uppercase;
}*/




body::-webkit-scrollbar {
  display: none;
}

body.playing #vinyl {
  pointer-events: all;
  animation-play-state: running;
}

body.playing #needle {
  transform: rotate(0deg);
}
/*
#vinylki:after {
  font-family: "Futura", sans-serif;
  font-size: 13px;
  content: "EFEITO CAFÉ00";
  color: #ccc9c98c;
  position: fixed;
  top: 20.5vmin;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #0000006e;
 padding: 0px 5px;
  /*width: 80px;*
  text-align: center;
}*/

body:before {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 100%;
  top: calc(50% - 37vmin);
  left: calc(50% - 35vmin);
  position: fixed;
  transform: translateY(1vmin);
  background: linear-gradient(to right, #333 25%, #777, #333 75%);
  box-shadow: 0 1.5vmin 3vmin rgba(0, 0, 0, 0.5);
}

#needle {
  position: fixed;
  height: 2vmin;
  width: calc(50vw - 30.5vmin);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001)), linear-gradient(to bottom, #777, #ccc, #777);
  top: calc(50% - 0vmin);
  z-index: 9;
  transform-origin: -5vmin 50%;
  transition: 0.75s ease-in-out;
  transform: rotate(-95deg) scale(1.2);
}

#needle:before {
  content: "";
  position: absolute;
  left: calc(100% - 0.5vmin);
  top: calc(50% - 1.5vmin);
  height: 3vmin;
  width: 6vmin;
  background: linear-gradient(to left, #bb232e 2px, transparent 2px), radial-gradient(circle at center, transparent 0.5vmin, #555 0.5vmin, #666), linear-gradient(45deg, #888 calc(50% - 0.1vmin), #222 calc(50% - 0.1vmin), #222 calc(50% + 0.1vmin), #888 calc(50% + 0.1vmin));
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
}

/*#vinyl {
  z-index: 1;
  position: fixed;
  width: 80vmin;
  height: 80vmin;
  pointer-events: none;
  background: radial-gradient(circle at center, #ccc -0.5vmin, #777 1.5vmin, transparent 1vmin, transparent 26%, #111 27.5%, #111), url("https://cdn.pixabay.com/audio/2024/08/12/10-06-28-423_200x200.jpg") 50% 50%/43% 43% no-repeat;
  border-radius: 100%;
  top: calc(50% - 40vmin);
  left: calc(50% - 40vmin);
  animation: spin calc(var(--speed) * 0.3s + 3s) linear infinite 1s;
  animation-play-state: paused;
}*/

#vinyl:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: repeating-radial-gradient(circle at center, #222 1px, transparent 0.5px, transparent 4px, #222 4px, #222 4.5px);
  border-radius: inherit;
  -webkit-mask: radial-gradient(circle at center, transparent 27.5%, #000 27.5%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#play,
#stop {
  position: fixed;
  top: calc(100vh - 75px);
  left: calc(50vw - 150px);
  z-index: 2;
  opacity: 1;
  padding: 0.5rem 1rem 0.25rem;
  border: none;
  color: #30ac18;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  text-shadow: 0 0.5px 5px;
  pointer-events: all;
  background: transparent;
  font-size: 23px;
}

#play:hover,
#stop:hover {
  color: #f3ebde;
  text-shadow: 0 1px 10px #f3ebde;
}

#play:active,
#play:hover,
#stop:active,
#stop:hover {
  transform: translateY(2.5px);
}

#play:active:before,
#play:hover:before,
#stop:active:before,
#stop:hover:before {
  box-shadow: 0 7.5px 0 #000;
}

#play:active:after,
#play:hover:after,
#stop:active:after,
#stop:hover:after {
  box-shadow: 0 7.5px 0 5px #888;
}

#play:before,
#play:after,
#stop:before,
#stop:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transition: inherit;
  border-radius: 8px;
}

#play:after,
#stop:after {
  box-shadow: 0 10px 0 5px #888;
  z-index: -2;
}

#play:before,
#stop:before {
  background: #222;
  box-shadow: 0 10px 0 #000;
}

#stop {
  left: auto;
  right: calc(50vw - 150px);
  color: #da3743;
}