@import url(https://db.onlinewebfonts.com/c/83e4a6b639612cd501853be5a7cf97ab?family=Trend+Sans+One+Regular);

:root {
  --bgColor: hsl(216, 100%, 7%);
  --darkBlue: #001d3d;
  --lighterBlue: #003566;
  --darkerYellow: #ffc300;
  --lighterYellow: #ffd60a;
  --navColor: #000204;
  --panelBg: hsl(217, 20%, 15%);
  --panelHover: hsl(217, 25%, 25%);
  --variableBg: hsl(45, 90%, 60%);
  --variableHover: hsl(45, 90%, 50%);
  --inputBg: hsl(0, 0%, 90%);
}

/* =========================
   Homepage & Layout Styles
   ========================= */

#homepage {
  margin: 0;
  font-family: "Trend Sans One Regular";
  background-color: hsla(217, 100%, 7%, 0.89);
  background-image: url("../images/bg.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: multiply;
}

#workspacepage {
  margin: 0;
  font-family: "Trend Sans One Regular";
  background-color: var(--bgColor);
}

#flexcontainer {
  display: flex;
  flex-direction: row;
  margin: 0;
  height: 100vh;
  font-family: "Trend Sans One Regular";
}

/* =========================
   Navbar & Header
   ========================= */

header {
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 3vh;
  text-shadow: 0 0 0.5vh white;
  padding: 1vh 3vh;
  background-color: hsla(217, 100%, 7%, 0.89);
}

.left {
  display: flex;
  align-items: center;
  gap: 1vh;
}

.right {
  display: flex;
  gap: 3vh;
}

#logo {
  width: 8vh;
}

/* =========================
   Workspace Panels
   ========================= */

#blocksPanel {
  width: 45vh;
  height: 100vh;
  background-color: var(--panelBg);
  box-shadow: 1vh 0 2vh hsla(0, 0%, 0%, 0.55);
  padding: 2vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

#blockSpace {
  flex: 1;
  height: 100vh;
  background-color: hsl(0, 0%, 75%);
  overflow-y: auto;
  padding: 2vh;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  padding-top: 5vh;
}

#lightDisplayContainer {
  flex-shrink: 0;
  width: 35vw;
  height: 100vh;
  background-color: hsl(0, 0%, 20%);
  margin-left: 1vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5vh;
  border-left: 0.5vh solid hsl(217, 50%, 35%);
}

/* =========================
   Control Blocks
   ========================= */

.setColorBlock,
.turnOffBlock,
.setBrightnessBlock,
.delayBlock,
.updateBlock,
.setAllColorBlock,
.turnOffAllBlock,
.rainbowBlock {
  display: flex;
  align-items: center;
  gap: 1vh;
  padding: 1.2vh 1vh;
  font-size: 2.5vh;
  font-family: monospace;
  border-radius: 1.5vh;
  transition: background-color 0.25s, transform 0.15s;
  cursor: grab;
}

.setColorBlock, .setAllColorBlock { background-color: hsl(0, 87%, 68%); }
.setColorBlock:hover, .setAllColorBlock:hover { background-color: hsl(0, 87%, 55%); transform: scale(1.05); }

.turnOffBlock, .turnOffAllBlock { background-color: hsl(240, 57%, 73%); }
.turnOffBlock:hover, .turnOffAllBlock:hover { background-color: hsl(240, 57%, 60%); transform: scale(1.05); }

.setBrightnessBlock { background-color: hsl(120, 65%, 55%); }
.setBrightnessBlock:hover { background-color: hsl(120, 65%, 40%); transform: scale(1.05); }

.delayBlock { background-color: hsl(45, 90%, 60%); }
.delayBlock:hover { background-color: hsl(45, 90%, 50%); transform: scale(1.05); }

.updateBlock {background-color: hsl(0, 0%, 50%);}
.updateBlock:hover {background-color: hsl(0, 0%, 40%); transform: scale(1.05);}

.rainbowBlock {background-color: hsl(0, 0%, 90%);}
.rainbowBlock:hover{background-color: hsl(0, 0%, 85%); transform: scale(1.05);}

.setColorBlock input,
.turnOffBlock input,
.setBrightnessBlock input,
.delayBlock input,
.setAllColorBlock input {
  width: 5vh;
  border-radius: 0.5vh;
  border: none;
  padding: 0.5vh;
  font-size: 1.8vh;
}

/* =========================
   Buttons
   ========================= */

#clearButton,
#execute,
#tutorialbutton {
  border: none;
  border-radius: 1vh;
  transition: background-color 0.25s, transform 0.15s;
  box-shadow: 0.3vh 0.3vh 0.5vh hsla(0, 0%, 0%, 0.518);
  font-family: "Trend Sans One Regular";
  font-size: 1.5vh;
}

#clearButton:hover,
#execute:hover,
#tutorialbutton:hover { background-color: hsl(0, 0%, 67%); transform: scale(1.05); cursor: pointer;}

#tutorialbutton {
  position: absolute;
  top: 15vh;
  right: 43vh;
  border-radius: 100%;
}

#clearButton { position: absolute; top: 15vh; left: 50vh; }

#execute { position: absolute; top: 15vh; right: 32vh; }

/* =========================
   Variables Panel
   ========================= */

#variablesPanel {
  width: 25vh;
  background-color: var(--panelBg);
  color: white;
  padding: 2vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  box-shadow: -1vh 0 2vh hsla(0, 0%, 0%, 0.55);
}

#variablesPanel h3 {
  margin: 0;
  font-size: 2.5vh;
  text-align: center;
  color: var(--lighterYellow);
  text-shadow: 0 0 0.3vh white;
}

#newVarName {
  padding: 1vh;
  font-size: 2vh;
  border-radius: 1vh;
  border: none;
  outline: none;
  width: 100%;
}

#createVarBtn {
  padding: 1vh;
  font-size: 2vh;
  border-radius: 1vh;
  border: none;
  background-color: var(--variableBg);
  color: var(--darkBlue);
  font-weight: bold;
  transition: background-color 0.25s, transform 0.15s;
}

#createVarBtn:hover {
  background-color: var(--variableHover);
  transform: scale(1.05);
  cursor: pointer;
}

#variablesList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

#variablesList li {
  background-color: var(--panelHover);
  padding: 1vh;
  border-radius: 1vh;
  font-family: monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.8vh;
}

#variablesList li span {
  color: var(--lighterYellow);
  font-weight: bold;
}

.setVarBlock,
.changeVarBlock {
  display: flex;
  align-items: center;
  gap: 1vh;
  padding: 1.2vh 2vh;
  font-size: 2.5vh;
  font-family: monospace;
  border-radius: 1.5vh;
  background-color: hsl(300, 60%, 65%);
  transition: background-color 0.25s, transform 0.15s;
  cursor: grab;
}

.setVarBlock:hover,
.changeVarBlock:hover {
  background-color: hsl(300, 60%, 50%);
  transform: scale(1.05);
}

.setVarBlock input,
.changeVarBlock input {
  width: 7vh;
  border-radius: 0.5vh;
  border: none;
  padding: 0.5vh;
  font-size: 1.8vh;
}

/* Popup Overlay */
#tutorialPopup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    font-family: "Trend Sans One Regular";
}

/* Main Box */
#tutorialContent {
    background-color: #0b131e;
    border: 2px solid #ff4ff3;
    border-radius: 2vh;
    color: rgb(255, 255, 255);
    width: 60vw;
    max-width: 800px;
    padding: 5vh;
    box-shadow: 0px 0px 25px #ff4ff3;
    animation: fadeIn 0.4s ease-out;
}

/* Steps */
.tutorialStep {
    display: none;
    animation: stepFade 0.4s ease-out;
}

.tutorialStep.active {
    display: block;
}

.tutorialStep h2 {
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px white;
    font-size: 5vh;
    margin-bottom: 2vh;
}

.tutorialStep p {
    font-size: 2.5vh;
    line-height: 1.6;
}

/* Buttons */
.tutorialButtons {
    display: flex;
    justify-content: space-between;
    margin-top: 4vh;
}

#prevStep, #nextStep, #closeTutorial {
    background-color: white;
    border: none;
    border-radius: 1vh;
    padding: 1.5vh 4vh;
    color: black;
    font-size: 2.5vh;
    font-weight: bold;
    text-shadow: 0 0 5px white;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.2s;
}

#prevStep:hover, #nextStep:hover, #closeTutorial:hover {
    background-color: white;
    transform: scale(1.05);
}

#tutorialbutton:hover {
  background-color: gray;
  transform: scale(1.05);
}

#closeTutorial {
    display: none;
}