:root {
    --standard-bond: #666;
    --triplex-bond-red: #f00;
    --triplex-bond-orange: #f80;
    --triplex-bond-grey: #888;
    --calcic-bond: #876;
    --ethereal-bond: #a69;
}

.glide {
    transition: transform 1s;
}

@keyframes ghost-flash {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.7;
    }
}

.ghost {
    animation: 2s ease-in-out 0s infinite alternate both ghost-flash;
}

.introvert:empty {
    display: none;
}

.row {
    display: flex;
}

.atomGrid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 60px max-content;
    grid-auto-columns: 80px;
    width: max-content;

    & > * {
        padding: 2px 0px;
    }

    & > p {
        text-wrap-mode: nowrap;
        margin: 0;
        transform-origin: left;
        transform: translate(30px, 0px) rotate(40deg);
    }
}

#hexagon {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: max-content;
    
    & > :nth-child(1) {
        grid-area: 1 / 2 / 1 / 4 ;
        img {
            transform: rotate(240deg);
        }
    }

    & > :nth-child(2) {
        grid-area: 1 / 4 / 1 / 6;
        img {
            transform: rotate(300deg);
        }
    }
    
    & > :nth-child(3) {
        grid-area: 2 / 1 / 2 / 3;
        img {
            transform: rotate(180deg);
        }
    }

    & > :nth-child(4) {
        grid-area: 2 / 3 / 2 / 5;
    }

    & > :nth-child(5) {
        grid-area: 2 / 5 / 2 / 7;
    }

    & > :nth-child(6) {
        grid-area: 3 / 2 / 3 / 4;
        img {
            transform: rotate(120deg);
        }
    }

    & > :nth-child(7) {
        grid-area: 3 / 4 / 3 / 6;
        img {
            transform: rotate(60deg);
        }
    }
}

#misOutput text {
    font-family: serif;
    font-size: 20px;
}