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

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color          : #FFFFFF;
}

.pink {
    color: #ffa6ee !important;
}

a:active {
    text-decoration: underline;
}

button {
    border : none !important;
    outline: none !important;
}

html,body {
    width : 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

body {
    background-image     : url(../img/background.jpg);
    background-size      : 1594px 896px;
    background-position  : center center;
    background-attachment: fixed;
    background-repeat    : no-repeat;
    overflow-x           : hidden;
}

nav {
    position        : fixed;
    top             : 0px;
    left            : 0px;
    width           : 100%;
    min-height      : 62px;
    text-align      : center;
    line-height     : 62px;
    color           :#ffa6ee;
}

nav a:hover {
    color          : #ffa6ee !important;
}

#hiddenachievement {
    position: fixed;
    right   : 15px;
}

footer {
    position   : fixed;
    bottom     : 0px;
    left       : 0px;
    width      : 100%;
    min-height : 84px;
    text-align : center;
    background : #000000;
    color      : #ffa6ee;
    font-family: "PressStart2P-Regular";
    font-size  : 12px;
    line-height: 24px;
}

footer img {
    margin-top: 15px;
    height    : 35px;
}

img {
    user-select        : none;
    -moz-user-select   : none;
    -webkit-user-select: none;
    -o-user-select     : none;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #ffa6ee !important;
}

#mobile-nav {
    position: relative;
    top     : 5px;
    left    : 10px;
    display : none;
}

nav,
#mobile-menu {
    text-transform  : uppercase;
    font-family     : "PressStart2P-Regular";
    font-size       : 14px;
    color           : #FFFFFF;
    background-color: #000000;
    z-index         : 2;
}

#mobile-menu {
    position        : fixed;
    top             : 70px;
    left            : 0 px;
    width           : 100%;
    height          : auto;
    line-height     : 52px;
    opacity         : 0;
}

#mobile-menu ul {
    list-style-type: none;
}

#release-date {
    position           : absolute;
    left               : 50%;
    width              : auto;
    height             : auto;
    transform          : translateX(-50%);
    -moz-transform     : translateX(-50%);
    -webkit-transform  : translateX(-50%);
    z-index            : 100;
    font-family        : "PressStart2P-Regular";
    font-size          : 24px;
    line-height        : 64px;
    min-height         : 64px;
    text-align         : center;
    color              :#ffffff;
    background-color   : rgba(0, 0, 0, 0.25);
    padding-left       :15px;
    padding-right      :15px;
}

#logo {
    width              : 100%;
    height             : auto;
    margin-top         : 128px;
    position           : relative;
    left               : 50%;
    transform          : translateX(-50%);
    -moz-transform     : translateX(-50%);
    -webkit-transform  : translateX(-50%);
    -o-transform       : translateX(-50%);
    z-index            : 1;
}

#elevator {
    width              : 100px;
    height             : 100%;
    opacity            : 0;
    position           : absolute;
    left               : 50%;
    transform          : translateX(-50%);
    -moz-transform     : translateX(-50%);
    -webkit-transform  : translateX(-50%);
    background-image   : url(../img/elevator.png);
    background-repeat  : repeat-y;
    background-position: center top;
    background-size    : 100px 4px;
}

#delta {
    width              : 100%;
    min-height         : 135px;
    margin-top         : 128px;
    background-image   : url(../img/new-delta.png);
    background-repeat  : no-repeat;
    background-position: center center;
    background-size    : 154px 135px;
    position           : absolute;
}

@media screen and (max-width: 768px) {
    nav {
        min-height : 42px;
        line-height: 40px;
    }
    nav a {
        display: none;
    }
    nav span {
        display: none;
    }
    #mobile-nav {
        display: block;
    }
}

@media screen and (max-width: 639px) {
    #logo {
        width: 115%;
        left :  48%;
    }
}

@media screen and (min-width: 640px) {
    #logo {
        width: 640px;
    }
    #elevator {
        width          : 140px;
        background-size: 140px 4px;
    }
    #delta {
        min-height:      190px;
        background-size: 216px 190px;
    }
}

@media screen and (min-width: 1080px) {
    #logo {
        width: 1080px;
    }
    body {
        background-size: cover;
    }
}

@media screen and (min-height: 896px) {
    body {
        background-size: cover;
    }
}