body {
    padding: 0;
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

header {
    height: 100%;
    background-image: url(img/back.png);
    background-size: cover;
    color:white;
    overflow: hidden;
}

.logo {
    padding: 4%;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.server {
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 640px;
    height: 100%;
    background-position: center;
} 

h1 {
    font-size: 44px;
    letter-spacing: 0.2em;
    line-height: 160%;
}

.coming {
    font-size: 20px;
    background: linear-gradient(45deg, #DB6712, #DB5812);
    display: inline-block;
    padding: 20px 40px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.content {
    max-width: 1750px;
    margin: auto;
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
    /* background: rebeccapurple; */
    padding: 4%;
    padding-top: 7%;
}
.moore {
    font-size: 14px;
    padding-top: 10%;
}

.moore a {
    color: white;
}
.claim {
    /* padding-top: 4%; */
    /* padding-bottom: 5%; */
    padding-right: 4%;
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}
.hint {
    letter-spacing: 0.2em;
    line-height: 160%;
    text-transform: uppercase;
}


@media (max-aspect-ratio: 1/1) {
  .content {
    flex-direction: column-reverse;
    padding: 0;
    justify-content: center;
}
.server {
    height: 530px;
    margin-left: 5%;
}

.claim {
    padding: 0;
    text-align: center;
}
}

@media screen and (max-width:1450px) {
.server {max-width: 520px;margin-left: 4%;}

h1 {
    font-size: 35px;
}

.claim {
    padding-right: 0;
}
}
@media screen and (max-width:1100px) {
	
	.content {
    flex-direction: column-reverse;
    padding: 0;
    justify-content: center;
}

.server {
    height: 600px;
    margin-left: 2%;
}

.claim {
    text-align: center;
}
}

@media screen and (max-width:700px) {

h1 {
    font-size: 30px;
}

.server {
    width: 450px;
    height: 380px;
}

.hint {
    width: 138px;
}
.content {
    padding-top: 100px;
}

.claim {
    padding: 30px;
    padding-top: 0;
}
}

@media screen and (max-width:500px) {

.server {
    width: 380px;
    height: 310px;
}

.content {
    padding-top: 120px;
}

h1 {
    font-size: 22px;
    padding-bottom: 20px;
}

.logo img {
    width: 67px;
}
}