@font-face {
    font-family: 'Gest-Regular';
    src: url("/font/font.ttf"); 
}

.og-center {
    margin: auto;
    width: 50%;
    display: block;
}

html {
    background-color: black;
    font-family: 'Gest-Regular';
    color: white;
    
}

html, body {
    overflow-x: hidden;
}

p {
    display: inline-block;
}
.p-orange{
    color: orange;
  }

.p-onhover:hover{
    color: yellow
}

.bottom-border {
    border-bottom: 1em;
    border-style: solid;
    border-width: 3px;
    border-left: 0em !important;
    border-right: 0em !important;
    border-top: 0em !important;
    border-color: white;
    padding-bottom: 1em;
}

.left-right-border {
    border-left: 1em !important;
    border-right: 1em !important;
}

.top-border {
    border-bottom: 0em;
    border-style: solid;
    border-width: 3px;
    border-left: 0em !important;
    border-right: 0em !important;
    border-top: 1em !important;
    border-color: white;
    padding-bottom: 0em;
}

.p-left-aligned{
    text-align: left;
}

.p-center-aligned{
    text-align: center;
}

.p-reduce-bottom-margin{
    margin-bottom: 0;
}

.p-reduce-top-margin{
    margin-top: 0;
}

.increase-top-margin{
    margin-top: 1em;
}

header {
    margin-bottom: 1em;
    margin-top: 0 !important;
    margin-left: 1em !important;
    margin-right: 1em !important;
}
header > p {  
    margin-left: 0.5em;
    font-size: 4em;
    margin-top: 0.5em;
    margin-bottom: 0;
    text-align: center;
}
@media screen and (min-width: 768px) {
    header > p {  
        font-size: 8em; 
    }
}
main {
    margin-left: 1em !important;
    margin-right: 1em !important;
    border-top: 1em;
    border-bottom: 1em;
    border-left: 0em !important;
    border-right: 0em !important;
    border-width: 3px;
    border-style: solid;
}
main > p, main > div {
    font-size: 2em;
}

button {
    margin-bottom: 1em;
    margin-left: 1em;
    font-size: 1.5em;
    font-family: 'Gest-Regular';
    background-color: darkgray;
    color: black;
    width: 15rem;
}
button:hover{
    background-color: white;
    color: black
}
button:active {
    background-color: gray;
}

li {
    display: block;
    font-size: 2em;
}

iframe{
    width: 100%;
    height: 20em;
}

img {
    width: 100%;
    height: 100%;
    display: block;
}

.img-max-width-1400 {
    max-width: 1400px;
}
.img-max-width-1300 {
    max-width: 1300px;
}
.img-max-width-1200 {
    max-width: 1200px;
}
.img-max-width-1100 {
    max-width: 1100px;
}
.img-max-width-1000 {
    max-width: 1000px;
}
.img-max-width-900 {
    max-width: 900px;
}
.img-max-width-800 {
    max-width: 800px;
}
.img-max-width-700 {
    max-width: 700px;
}
.img-max-width-600 {
    max-width: 600px;
}
.img-max-width-500 {
    max-width: 500px;
}
.img-max-width-400 {
    max-width: 400px;
}
.img-max-width-300 {
    max-width: 300px;
}
.img-max-width-200 {
    max-width: 200px;
}
.img-max-width-100 {
    max-width: 100px;
}

.default {cursor: default;}