body
{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: row nowrap;
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    justify-content: center;
    align-content: center;
}

.container
{
    display: flex;
    width: 1000px;
    height: 500px;
    margin: auto;
    box-shadow: 0px 0px 40px #000000;
    flex-flow: column wrap;
}

.f-r-w
{
    flex-flow: row wrap;
}

.f-c-w
{
    flex-flow: column wrap;
}

.flex
{
    display: flex;
}

.w-5
{
    flex: 0 1 5%;
}

.w-10
{
    flex: 0 1 10%;
}

.w-25
{
    flex: 0 1 25%;
}

.w-30
{
    flex: 0 1 30%;
}

.w-33
{
    flex: 0 1 33%;
}

.w-34
{
    flex: 0 1 34%;
}

.w-40
{
    flex: 0 1 40%;
}

.w-50
{
    flex: 0 1 50%;
}

.w-60
{
    flex: 0 1 60%;
}

.w-75
{
    flex: 0 1 75%;
}

.w-90
{
    flex: 0 1 90%;
}

.w-100
{
    flex: 0 1 100%;
}

.h-10
{
    height: 10%;
}

.h-15
{
    height: 15%;
}

.h-40
{
    height: 40%;
}

.h-60
{
    height: 60%;
}

.h-90
{
    height: 90%;
}

.h-100
{
    height: 100%;
}

.wid-50
{
    width: 50%;
}

.wid-100
{
    width: 100%;
}

.box-size
{
    box-sizing: border-box;
}

.border
{
    border: 4px solid black;
}

.border-l-h
{
    border-left: 2px solid black;
}

.border-r-h
{
    border-right: 2px solid black;
}

.f-xlarge
{
    font-size: 355%;
}

.center
{
    justify-content: center;
    align-items: center;
}

.h-center
{
    justify-content: center;
}

.just-start
{
    justify-content: flex-start;
}

.align-end
{
    align-items: flex-end;
}

.align-start
{
    align-items: flex-start;
}

.hover:hover
{
    background-color: black;
    color: white;
    border: 6px solid white;
    box-shadow: 0px 0px 40px #000000;
    font-weight: 900;
    cursor: default;
}

.drop-shadow-small
{
    box-shadow: 0px 0px 25px #000000;
}

.box-size
{
    box-sizing: border-box;
}

.m-lr-15
{
    margin-left: 15px;
    margin-right: 15px;
}

.m-tb-15
{
    margin-top: 15px;
    margin-bottom: 15px;
}

.m-t-15
{
    margin-top: 15px;
}

.m-b-15
{
    margin-bottom: 15px;
}

.m-tb-neg-15
{
    margin-top: -15%;
    margin-bottom: -15%;
}

.f-xlarge
{
    font-size: xx-large;
}

.f-large
{
    font-size: large;
    font-weight: 500;
}

.f-mont
{
    font-family: 'Montserrat', sans-serif;
}

.f-under
{
    text-decoration: underline;
}

.norm
{
    font-weight: 400;
}

.bold
{
    font-weight: 900;
}

.curs-norm
{
    cursor: default;
}

.pad-bot-1
{
    padding-bottom: 1rem;
}

.pad-top-2
{
    padding-top: 2rem;
}

/* trash classes */
.bg1
{
    background-color: darkred;
}

.bg2
{
    background-color: darkslategray;
}

.bg3
{
    background-color: darkgreen;
}

.bg-4
{
    background-color: lightblue;
}

.bg-5
{
    background-color: lightgreen;
}

.bg-w
{
    background-color: white;
}

.max-90
{
    max-height: 90%;
}

.max-575
{
    max-height: 575px;
}

/* angular animations */

.ani-main.ng-enter {
    animation: fadeIn 0.5s both ease-in;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}