* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height:100vh;
    background:black;
}

.particles-js-canvas-el {
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100%;
}

.container {
    position:relative;
    width:100vw;
    height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    z-index:10;

    /* background:url('img/bg-2.jpg') center fixed; */
}

.container h1 {
    position:absolute;
    top:18vh;
    left:50%;
    text-align:center;
    width:800px;
    margin-left:-400px;
    color:white;
    padding-bottom:25px;
    border-radius:100px;
    font-size:6rem;
    letter-spacing:5px;
    font-family:'Blinker', sans-serif;
    background:rgba(98, 50, 187, 0.794);
}

.container .key-container {
    display:flex;
    width:1000px;
    align-items:center;
    justify-content:space-evenly;
    margin:auto 0;
}

.container .key-container .key {
    padding:40px;
    background:#845feb;
    border-radius:2px;
    cursor: pointer;
}

.container .key-container .key:nth-of-type(1n+4) {
    background:#5526d6;
}

.glow {
    box-shadow: 0 0 10px 5px #823ad4;
}

.container .key-container .key kbd {
    color:white;
    font-size:2.2rem;
}

.hidden {
    display:none;
}