:root {
  --primary: #ffffff;
  --pannel-background: #303030;
  --accent: #2aca0a;
  --background: #000000;
  --nav-button-size: 3rem;
  --button-border-color: #aca9a9;

  background-image: url("assets/images/fuzzlab\ website\ background.png");
  background-repeat: repeat;
  background-size: 5%;
  cursor:
    url("cursor.png") 2 2,
    pointer;
}

header {
  background: var(--pannel-background);
  align-items: center;
  justify-content:left;
  gap: 1rem;
  padding: 1rem;
  margin: 15px;
  font-size: 25px;
  font-family: "Share Tech Mono", monospace;
  font-style: normal;
  color: var(--primary);
  border-color: var(--accent);
  border-style: ridge;
  border-width: 5px;
}

body {
  background: rgb(48 48 48 / 50%);
  font-size: 20px;
  padding: 1rem;
  font-family: "Share Tech Mono", monospace;
  font-style: normal;
  color: var(--primary);
  text-shadow: -1px 1px 3px var(--accent);
  border-color: var(--accent);
  border-style: ridge;
  border-width: 5px;
  justify-content:left;
  margin: 5px;

}

.nav-pannel {
  --bottom-border-size: 1rem;

  margin: 15px;
  display: flex;
  align-items: center;
  justify-content:left;
  gap: 1rem;
  background: var(--pannel-background);
  height: var(--nav-button-size);
  border-bottom: var(--bottom-border-size) solid var(--accent);
  padding: 1rem;
  color: var(--primary);
  border-color: var(--accent);
  border-style: ridge;
  border-width: 5px;
}

footer {
  background: var(--pannel-background);
  align-items: center;
  justify-content:left;
  gap: 1rem;
  padding: 1rem;
  margin: 15px;
  font-size: 25px;
  font-family: "Share Tech Mono", monospace;
  font-style: normal;
  color: var(--primary);
  border-color: var(--accent);
  border-style: ridge;
  border-width: 5px;
}

button, input {
  padding: 5px;
  font-size: 20px;
  font-family: "Share Tech Mono", monospace;
  font-style: normal;
}

.button{
  border-top: 0;
  border-left: 0;
  border-bottom: 2px solid var(--button-border-color);
  border-right: 2px solid var(--button-border-color);
  
    &.pressed {
        transform: translate(2px, 2px);
        border-top: 2px solid var(--button-border-color);
        border-left: 2px solid var(--button-border-color);
        border-bottom: 0;
        border-right: 0;
    }
}

.generic-button {
  font-family: "Share Tech Mono", monospace;
  font-weight: 400;
  font-size: 32px;
  font-style: normal;
  min-width: 10rem;
  height: var(--nav-button-size);
  padding: 5px;
  cursor: pointer;
}

.generic-button-pressed {
  font-family: "Share Tech Mono", monospace;
  font-weight: 400;
  font-size: 32px;
  font-style: normal;
  min-width: 10rem;
  height: var(--nav-button-size);
  padding: 5px;
  cursor: not-allowed;
}