* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    position:relative;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:black;
    overflow:hidden;
    font-family: Helvetica, Arial, sans-serif;
}

canvas {
    position:fixed;
    top:0;
    left:0;
    z-index:2;
    image-rendering: pixelated;                 
    -ms-interpolation-mode: nearest-neighbor; 
    pointer-events: none;
}

.ground {
    position:fixed;
    bottom:0;
    left:0;
    width:100vw;
    height:200px;
    background-image: linear-gradient(rgb(50, 50, 50), black);
    z-index:0;
}

.hardware-toggle {
    border:1px solid rgb(100, 100, 100);
    width:10px;
    height:10px;

    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
    z-index:100;
}

.hardware-toggle:hover {
    background:red;
}

.hardware-toggle.on {
    border:1px solid red;
    background:red;
}

.cable-toggle {
    border:1px solid rgb(100, 100, 100);
    width:10px;
    height:10px;
    z-index:100;

    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
}

.cable-toggle:hover {
    background:white;
}

.cable-toggle.on {
    border:1px solid white;
    background:white;
}

.word-input{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:20px;
    line-height:1.3em;
    width:100%;
    color:white;
    text-align: center;
}

input[type="text"] {
    background: transparent;
    border: none;
}

input:focus {
    outline: none;
}

.building {
    position:fixed;
    left:0;
    bottom:200px;
    display:flex;
    flex-direction: column;
}

.building:hover {
    z-index:1;
}

.letter {
    position: relative;
}

.character {
    height:40px;
    width:40px;
    font-size:20px;
    display: grid;
	align-items: center;
    text-align: center;
    background:rgb(50, 50, 50);
    color:white;
    border:1px solid black;
    border-bottom:none;
}

.byte {
    position: absolute;
    top:0;
    left:40px;
    flex-direction: row;
    display:none;
}

.bit {
    width:40px;
    height:40px;
    line-height:40px;
    font-size:20px;
    text-align: center;
    border:1px solid rgb(0, 255, 0);
    border-left:none;
    color: rgb(0, 255, 0);
    background:black;
}

.character:hover {
    border:1px solid rgb(0, 255, 0);
}

.character:hover + .byte{
    display:flex;
}

.one {
    color:black;
    background:rgb(0, 255, 0);
}

.hardware {
    position:absolute;
    left:-8px;
    bottom:0;
    transform:translateY(100%);
    width:60px;
    display:none;
    flex-wrap: wrap;
}

.cell {
    border-radius:7px;
    width:10px;
    height:22px;
    margin:2px;
    background-image: linear-gradient(red, black 30%);
    border:1px solid red;
}

.charge {
    background-image: linear-gradient(red 70%, black);
}

body.show-hardware .building .hardware{
    display:flex;
}

body.show-hardware .ground {
    border-top:1px solid rgb(50, 50, 50);
    background-image: linear-gradient(black, black);
}

body.show-hardware .ground input{
    display:none;
}

.cable {
    position:absolute;
    bottom:0;
    width:40px;
    height:calc(100vh - 200px);

    display:none;
    flex-direction: column;
    z-index:-1;
    overflow:hidden;
}

.fiber {
    position:absolute;
    bottom:0;
    left:50%;
    height:100%;
    width:1px;
    background:white;
}

.pulse {
    position: relative;
    height:30px;
    width:10px;
    left:15px;
    border-radius:5px;
    animation: loopPulse 6s infinite linear; 
}

.light {
    background:white;
}

@keyframes loopPulse {
    from {
        transform: translateY(100vh);
    }

    to {
        transform: translateY(-100vh);
    }
 }

 body.show-cables .building .cable{
    display:flex;
}