/*This css scripts is used to display and style certain elements without having to re-type the code each time*/

#particles-js {
    background: var(--pageBlack);
    height: 99.5vh;
    background-image: url("../images/pattern_4.png");
}

#overlay, #terminalOverlay {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
    z-index: !important;
}

.displayFlex {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

.displayFlexColumn {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

.displayFlexRow {
    display: flex !;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
}

.displayFlexRight {
    display: flex;
    justify-content: flex-end !important;
    align-items: center !important;
}

.displayFlexLeft {
    display: flex !important;
    ;
    justify-content: flex-start !important;
    align-items: center !important;
}

.displayFlexTop {
    display: flex !important;
    ;
    justify-content: center !important;
    align-items: flex-start !important;
}

.displayFlexBottom {
    display: flex !important;
    ;
    justify-content: center !important;
    align-items: flex-end !important;
}

.fullHeight {
    height: 100%;
}

.halfHeight {
    height: 50%;
}

.padRight {
    padding-right: 2em !important;
}

.padLeft {
    padding-left: 2em !important;
}

.padBottom {
    padding-bottom: 2em !important;
}

.padTop {
    padding-top: 2em !important;
}

.noPad{
    padding: 0px!important;
}

.pad{
    padding: 2em!important;
}

.noMargin{
    margin: 0px!important;
}