@font-face {
    font-family: hack;
    src: url('hack-regular-subset.woff') format('woff'),
         url('Hack-Regular.ttf') format('truetype');
}

html, body, main {
    width: 100%;
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #212741;
}

main {
    position: absolute;
    display: block;
    color: #fef7f0;
    font-family: hack, monospace;
    background-image: url('data:image/svg+xml;base64,PCFET0NUWVBFIHN2Zz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAgICAgCiAgICA8L3N0eWxlPgogICAgPHBvbHlnb24gZmlsbD0iIzFDNTQ2MCIgcG9pbnRzPSIwLDAgNjAsMCAxMDAsMjAgMTAwLDEwMCA0MCwxMDAgMCw4MCI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0icG9pbnRzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiBrZXlTcGxpbmVzPSIwLjI1IDAuMSAwLjI1IDEiIGR1cj0iMXMiIGZpbGw9ImZyZWV6ZSIgZnJvbT0iMCwwIDEwMCwwIDEwMCwwIDEwMCwxMDAgMCwxMDAgMCwxMDAiIHRvPSIwLDAgNjAsMCAxMDAsMjAgMTAwLDEwMCA0MCwxMDAgMCw4MCIvPgogICAgPC9wb2x5Z29uPgo8L3N2Zz4K');
    /*background-color: #1C5460;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

#textBox {
    position: absolute;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#rightCorner {
    position: absolute;
    top: 0;
    left: 60%;
    width: 40%;
    height: 20%;
    background: url("rightCorner.jpg");
    background-size: cover;
    opacity: 0.2;
}

#leftCorner {
    position: absolute;
    top: 80%;
    width: 40%;
    height: 20%;
    background: url("leftCorner.jpg");
    background-size: cover;
    opacity: 0.2;
}

.slideLine {
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #fef7f0;
    animation-name: slideLine;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 1s;
}

@keyframes slideLine {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

h1 {
    font-weight: normal;
    font-style: normal;
    margin: 8px 16px 8px 16px;
}

p {
    margin: 8px 16px 8px 16px;
}

@media only screen and (max-device-width: 480px) {
    .bigScreen {
        display: none;
    }
}

@media only screen and (min-device-width: 481px) {
    .smallScreen {
        display: none;
    }
}