@import url('https://fonts.googleapis.com/css?family=Droid+Sans');

@font-face {
  font-family: Ailerons;
  src: url('../resources/Ailerons-Typeface.otf');
}

@font-face {
  font-family: Montserrat;
  src: url('../resources/Montserrat-Light.otf');
}
@font-face {
  font-family: Montserrat;
  src: url('../resources/Montserrat-Regular.otf');
  font-weight: bold;
}

*:root {
    font-size:          calc(100vw / 30);
}

body {
    font-family:        Montserrat, 'Droid Sans', sans-serif;
    background:         #20252A;
    background:         #20252A, url("../resources/images/triangles.png");
    background-blend-mode: multiply;
    background-repeat:  repeat;
    display:            flex;
    flex-flow:          column nowrap;
    align-items:        center;
    justify-content:    flex-start;
    min-height:         100vh;
    margin:             0rem;
}

div.contentArea {
    top:                6em;
    left:               0em;
    width:              100vw;
    flex-grow:          0;
    padding:            0em;
    padding-top:        5em;
    margin:             0em;
    display:            flex;
    justify-content:    flex-start;
    align-items:        center;
    flex-flow:          column nowrap;
    color:              #EFA51A;
    flex-grow:          1;
    min-height:         calc(100vh - 6em);
}

.contentArea>h1 {
    font-size:          2em;
    margin:             0.5em;
    text-align:         center;
    text-shadow:        0.5rem 0.5rem 1.5rem rgba(0,0,0,1);
}

.contentArea>h2 {
    font-size:          1.5em;
    margin:             0.666em;
    text-align:         center;
    text-shadow:        0.5rem 0.5rem 1.5rem rgba(0,0,0,1);
}



div.menuBar {
    position:           absolute;
    left:               0em;
    top:                0em;
    width:              100vw;
    height:             5em;
    background:         #20252A;
    color:              #EFA51A;
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    flex-start;
    align-items:        center;
    overflow:           hidden;
    box-shadow:         0em 0em 2rem black;
    flex-grow:          0;
    z-index:            1;
}

.menuBar a {
    height:             5em;
    color:              inherit;
    text-decoration:    inherit;
    text-shadow:        0.1em 0.1em 0.2em rgba(0,0,0,0.5);
    box-shadow:         inset 0em 0em 0em #292F36;
    flex:               1 1 0;
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    center;
    align-items:        center;
    
    user-select:        none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select:   none;
    -ms-user-select:    none;
}
.menuBar a:active {
    box-shadow:         inset 0em -5em 0em #292F36;
}

.menuBar img {
    height:             2em;
    padding:            0.5em;
    box-shadow:         inset 0em 0em 0em #292F36;
    filter:             drop-shadow(0.1em 0.1em 0.2em rgba(0,0,0,0.5));
}



div.footer {
    font-size:          1em;
    width:              100vw;
    min-height:         10rem;
    background:         #131619;
    color:              #EFA51A;
    margin-top:         6rem;
    padding-bottom:     6rem;
    box-shadow:         0em 0em 2rem black;
    overflow:           hidden;
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    center;
    align-items:        center;
}

div.footer div.footerContent {
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    space-between;
}

div.footer div.footerContent p {
    display:            block;
    margin:             0em 1em;
    line-height:        1.5em;
    flex:               1 1 0em;
}

div.footer div.footerContent p b {
    font-size:          1.5em;
    line-height:        3em;
}

div.footer div.footerContent p a {
    color:              #EFA51A;
    text-decoration:    none;
}
div.footer div.footerContent p a:hover {
    text-decoration:    underline;
}