body {
    margin:0px!important;
}

main#app {
    display: flex;
    flex-direction: column;
}

header#site-header {
    position: absolute;
    width: 100%;
    z-index:5;
}

.header-inner {
    background-image: linear-gradient(180deg, #000000, #000000, #000000, #000000, #282828);
}

/* =========================
   Responsive Breakpoints
   ========================= */

/* PC / Desktop (large) */
    @media (min-width: 1200px) {
    .header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1% 10%;
        max-height: 52px;
        padding-bottom:25px;
    }
    
    .header-inner img {
        width: 220px;
    }
    
    button.auth-buttons {
        padding: 10px;
        border-radius: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        border: 2px solid #ffffff00;
        min-width: 100px;
        font-family: system-ui;
    }
    
    button.auth-buttons.orange-border-buttons {
        background-color: #ffffff00;
        border-color: #FF8264;
        color: #FF8264;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    button.auth-buttons.orange-border-buttons:hover {
        background-color: #ff826452;
        color: #ff8264;
    }
    
    button.auth-buttons.orange-buttons {
        background-color: #FF8264;
        border-color: #FF8264;
        font-weight: 600;
        text-transform: uppercase;
        color: white;
    }
    
    button.auth-buttons.orange-buttons:hover {
        background-color: #f9a591;
        border-color: #f9a591;
        color: black;
    }
}

/* Laptop / Small Desktop */
    @media (min-width: 992px) and (max-width: 1199.98px) {
    .header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1% 10%;
        max-height: 52px;
        padding-bottom:25px;
    }
    
    .header-inner img {
        width: 220px;
    }

    button.auth-buttons {
        padding: 10px;
        border-radius: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        border: 2px solid #ffffff00;
        min-width: 100px;
        font-family: system-ui;
    }
    
    button.auth-buttons.orange-border-buttons {
        background-color: #ffffff00;
        border-color: #FF8264;
        color: #FF8264;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    button.auth-buttons.orange-border-buttons:hover {
        background-color: #ff826452;
        color: #ff8264;
    }
    
    button.auth-buttons.orange-buttons {
        background-color: #FF8264;
        border-color: #FF8264;
        font-weight: 600;
        text-transform: uppercase;
        color: white;
    }
    
    button.auth-buttons.orange-buttons:hover {
        background-color: #f9a591;
        border-color: #f9a591;
        color: black;
    }
}

/* Tablet - Landscape (horizontal) */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {

}

/* Tablet - Portrait (vertical) */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {

}

/* Phone - Landscape (horizontal) */
@media (max-width: 767.98px) and (orientation: landscape) {

}

/* Phone - Portrait (vertical) */
@media (max-width: 767.98px) and (orientation: portrait) {

}