html,
body {
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

body {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
a {
	color: #f34e02;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

header {
    flex: 0;
    background: rgb(240, 164, 36);
    background: linear-gradient(7deg, transparent 74%, #f5b21b 75%, #ffd900 90%);
    padding: 4em;
}

.logo {
    flex: 0 0 25%;
    max-width: 350px;
    height: auto;
    margin: 1em;
}

main {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 4em 0 7em 0;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 auto;
    width: 100%;
    max-width: 1250px;
}

footer {
    flex: 0;
    width: 100%;
}

.footer-1 {
    background: rgb(240, 164, 36);
    background: linear-gradient(170deg, transparent 24%, #ef6423 25%, #f34e02 90%);
    color: black;
    height: auto;
    padding: 2.5em 0;
    text-align: center;
}

.footer-2 {
    background-color: #323b44;
    background-image: linear-gradient(320deg, #272e35 0%, #0a0c0f 74%);
    padding: 0.5em 1em;
    color: white;
    text-align: center;
}

.wrapper {
    flex: 1 1 auto;
    padding: 1em;
}

.hostname {
    font-size: 2rem;
    font-weight: 900;
}

@media only screen and (max-device-width: 1023px) {
    main {
        flex-wrap: wrap;
        padding: 0;
        text-align: center;
    }
    .logo {
        flex: 1 0 auto;
    }
}

@media only screen and (max-device-width: 500px) {
    body {
        font-size: 0.9rem;
    }
    main {
        font-size: 1.2rem;
    }
    .logo {
        max-width: 250px;
    }
}