html {
    overflow: hidden;
    height: 100%;
}
body {
    margin: 0;
    font-size: 1.5em;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 100;
    line-height: 1.5;
    color: #ffffff;
    background: #0C0C0E;
        background: rgb(12,12,14);
    background: linear-gradient(186deg, rgba(12,12,14,1) 0%, rgba(12,12,14,1) 35%, rgba(41,41,47,1) 100%);
    overflow-x:hidden;
    overflow-y:auto;
    height: 100%;
}

a {
    text-decoration: none;
    font-weight: 400;
    color:#00EFFF;
}

h1,h2,h3,h4,h5,h6 {
    text-decoration: none;
    font-weight: 100;
    color:#00EFFF;
    margin: 0;
    padding: 0;
}

form {
    margin:0;
    padding: 0;
}

input,input[type=submit] {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.75em;
    font-weight: 200;
  	background-color: #000;
  	color: #fff;
    border: 1px solid #666;
	margin: 0;
	padding: 0.25em 1em;
    -webkit-appearance: none;
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

input[type=text] {
}

input[type=submit] {
    border: 1px solid #00EFFF;
    font-weight: 400;
    color:#00EFFF;
}

.block {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 0rem;
}

.content {
    margin: 0;
    padding: 50px;
}

#header {
    background-image: url("/assets/m8/m8v1_large.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: right bottom;
}

#header.block {
    height: 80%;
    min-height: 500px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "logo"
        "title"
}

#logo {
    grid-area: logo;
    padding-right:0;
}

#logo h1 {
    background-image: url("/assets/logos/dirtywave.svg");
    background-repeat: no-repeat;
    background-position: top left;
    height:115px;
    text-indent: -9999px;
}

#title {
    grid-area: title;
    align-self: end;
    font-size: 1.5em;
}

#title h2 {
    font-weight: 100;
    font-size: 3em;
    margin: 0;
    padding: 0;
    line-height: 1em;
    margin-left: -0.1em;
}
#title p {
    margin: 0;
    padding: 0;
    width:  10em;
    line-height: 1em;
}

@media only screen and (min-width: 1600px) {
    #header {
        background-position: right top -100px;
    }
}

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

    #main {
        font-size: 0.8em;
    }

    .content {
        margin: 0;
        padding: 50px 25px;
    }

    #header {
        background-image: url("/assets/m8/m8v1_large.png");
        background-position: -100px bottom;
        background-size:200%;
    }
    #logo h1 {
        height:106px;
    }
    #header.block {
        height: 100%;
        max-height: 850px;
    }
    #title {
        font-size: 1.25em;
    }

}

#main {
}

#main .content {
    padding-bottom: 0px;
}

#main.block {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "summery summery"
        "breakout specs"
        "signup signup"
}

@media only screen and (max-width: 1200px) {
    #main.block {
        grid-template-columns: 1fr;
        grid-template-areas:
            "summery"
            "breakout"
            "specs"
            "signup"
    }
}

#main p {
    margin: 0;
    padding: 0;
}

#summery {
    grid-area: summery;
    background: #0C0C0E;
}

#breakout {
    grid-area: breakout;
    background: #0C0C0E;
}

#specs {
    grid-area: specs;
    background: #0C0C0E;
    font-weight: 200;
}

#specs h3 {
    font-weight: 400;
}

#specs ul {
    font-size: 0.7em;
    list-style-type: square;
    padding: 0;
}

#specs ul li {
    margin-left: 1em;
    padding-left: 0.5em;
}

#specs p {
    font-size: 0.7em;
}

#signup {
    grid-area: signup;
    background: #0C0C0E;
}

#signup form {
    margin-top:1em;
    padding-bottom: 50px;
}

#signup input[type=text] {
    width:8em;
    font-size: 0.8em;
    font-weight: 400;
}

#social {
    padding-left:0;
    text-align: right;
    justify-self: end;
    color: #AAA;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width:200px;
}

#social div {
}

#social i {
    margin-right: 0.5em;
    font-size: 2em;
}

#social .fa-discord {
    padding-top:0.05em;
}

#footer {
    background: rgb(12,12,14);
    background: linear-gradient(183deg, rgba(12,12,14,1) 0%, rgba(12,12,14,1) 50%, rgba(31,31,37,1) 100%);
    font-size: 0.75em;
    width: 100%;
}