/* ================================================== SCREEN */

#screen {
    --screen-size: calc(var(--main-width) / 2.5);

    width: var(--screen-size);
    height: var(--screen-size);
    background: #7E24C0;
    /* border: 25px solid #7E24C0; */
    border-radius: 20px;
    position: relative;
}

#screen::before {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 10px solid #00114E;
    border-radius: 20px;
    position: absolute;
    top: -5px; left: -5px;
    z-index: 50;
}

#screen > div {
    background: #fff;
    border-radius: 20px;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
} 

/* ================================================== MENU */

#menu {
    width: 100%;
    height: 100%;
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 600;
}

#menu i {
    padding: 10px 40px;
}

#menu i.active {
    background: #ccf;
    position: relative;
}

#menu i.active::before {
    content: ">";
    font-style: normal;
    position: absolute;
    left: 0; top: 10px;
}

/* ================================================== GRID */

#atom-grid-container {
    --grid-divisions: 5;
}

#atom-grid {
    display: flex;
    flex-direction: column;
}

#atom-grid > div {
    width: 100%;
    display: flex;
}

#atom-grid div.cell {
    width: calc(var(--screen-size) / 5 - 1px);
    height: calc(var(--screen-size) / 5 - 1px);
    border: 1px solid #2BDBA1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ------------------------------ Atoms */

#atom-grid i {
    width: 50%;
    height: 50%;
    font: normal 26px/600 var(--font);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

i.H {background: #58c9d1; color: var(--black)}
i.O {background: #ee3290; color: #55FFC4}
i.N {background: #2922BE; color: #55FFC4}
i.C {background: var(--black); color: #55FFC4}


/* ------------------------------ Selector */

#atom-selector {
    width: calc(var(--screen-size) / var(--grid-divisions) - 1px);
    height: calc(var(--screen-size) / var(--grid-divisions) - 1px);
    border: 5px solid var(--selector);
    position: absolute;
    top: 0; left: 0;
    transition: .4s;
}

/* ================================================== INSTRUCTIONS */

#instructions {
    width: 100%;
    height: 100%;
    color: var(--black);
}

#instructions > div {
    width: 100%;
    height: 100%;
    padding: 5%;
    background: #fff;
    position: absolute;
    top: 0; left: 0;
}

#instructions h2 {
    max-width: calc(100% - 70px);
}

#instructions p:not(.note), #instructions nav {
    margin-top: 30px;
}

#instructions ul {
    margin: 20px 0;
    padding-left: 20px;
}

#instructions li {
    margin: 5px 0;
}

#instructions p.note {
    width: 100%;
    padding: 0 30px 30px 30px;
    font-size: 10px;
    font-style: italic;
    position: absolute;
    bottom: 0; left: 0;
}

#instructions nav i, #instructions-close {
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-style: normal;
}

#instructions-close {
    position: absolute;
    top: 30px; right: 30px;
    z-index: 15;
}

#instructions .shadow::before, #instructions .shadow::after {background: #8CE6FF; border-radius: 5px}
#instructions .shadow::after {height: 20px; bottom: -6px; background: #81b4c1}