@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;
}

#homepage{
    background-color: hsla(217, 100%, 7%, 0.89);
    margin: 0;
    font-family: "Trend Sans One Regular";
    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";
}

#flexcontainer{
    background-color: hsla(217, 100%, 7%, 0.89);
    margin: 0;
    font-family: "Trend Sans One Regular";
    display: flex;
    flex-direction: row;
}

#lightUp{
    margin: 10px;
    color: white;
    text-shadow: 0px 0px 15px white;
    font-size: 12vh;
    margin-top: 15vh;
    margin-left: 12vh;
}

#slogan{
    margin: 2vh;
    color: #ff4ff3;
    text-shadow: 0px 0px 5px #ff4ff3;
    margin-left: 14vh;
    font-size: 3.5vh;
}

#navbar{
    background: linear-gradient(to right, #bafb02, #e6ff80);
    margin: 0;
    padding: 1vh;
    height: 2vh;
}

#navbarwhite{
    background-color: white;
    margin: 0;
    height: 1vh;
}

.createProject{
    background-color: hsl(120, 100%, 35%);
    color: white;
    border-radius: 10vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 4vh;
    padding-right: 4vh;
    display: inline-block;
    text-decoration: none;
    font-size: 3vh;
    text-shadow: 0px 0px 8px white;
    margin-top: 8vh;
    margin-left: 14vh;
    transition: background-color 0.25s;
}

.createProject:hover{
    background-color: hsl(120, 100%, 23%)
}

#title{
    display:inline;
}

#logo{
    width: 8vh;
    margin: 2vh;
}

header{
    display: flex;
    color: white;
    text-shadow: 0px 0px 5px white;
    justify-content: space-between;
    font-size: 3vh;
}
.left{
    align-items: center;
    display: flex;
}
.right{
    display: flex;
    gap: 3vh;
    margin-right: 3vh;
}

#blocksPanel{
    background-color: hsl(0, 0%, 50%);
    width: 45vh;
    height: 100vh;
    box-shadow: 1vh 0 2vh hsla(0, 0%, 0%, 0.548);
    position: relative;
}

#blockSpace{
    background-color: hsl(0, 0%, 75%);
    flex: 1;
    height: 100vh;
}

#lightDisplayContainer{
    width: 35vw;
    height: 100vh;
    flex-shrink: 0;
}

#setColorBlock{
    background-color: hsl(0, 87%, 68%);
    padding: 1vh;
    font-size: 2.5vh;
    border-radius: 2vh;
    display: inline-block;
    margin-top: 5vh;
    margin-left: 5vh;
    font-family: monospace;
    transition: background-color 0.25s;
}

#setColorBlock:hover{
    background-color: hsl(0, 87%, 55%);
    cursor: pointer;
}

#setColorBlock input{
    width: 3vh;
}

#setColorBlock #colorInput{
    width: 6vh;
}

#clearButton{
    position: absolute;
    right: 4vh;
    top: 0.9vh;
    border-radius: 1vh;
    border: none;
    transition: background-color 0.25s;
}

#clearButton:hover{
    background-color: hsl(0, 0%, 67%);
}

#execute{
    margin-left: 85%;
    border-radius: 1vh;
    border: none;
    transition: background-color 0.25s;
}

#execute:hover{
    background-color: hsl(0, 0%, 67%);
}