/* :root {
    --indepth1: #54bcaf;
    --indepth2: #12a194;
    --indepth3: #22857b;
    --indepth4: #0c6b63;
    --indepth5: #32524e;
} */
:root {
    --lightGrey: rgb(230, 240, 240);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    color: var(--lightGrey);
    background: linear-gradient(38deg, rgba(85,54,125,1) 0%, rgba(25,167,153,1) 69%);
}
.content {
    flex: 1 0 auto;
}
.footer {
    flex-shrink: 0;
    color:rgb(132, 144, 160);
    text-align: center;
    padding: 0.5em;
    font-size: small;
    font-weight: 300;
}

body, h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

body {
    font-family: aspergitregular, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 0;
}

h1 {
    font-size: 5em;
    font-family: aspergitbold;
}

h2 {
    font-family: aspergitregular;
    font-size: 2em;
    letter-spacing: 0.1em;
}

h3 {
    font-family: aspergitregular;
    font-size: 1.5em;
    
}

h4 {
    font-weight: 300;
    font-size: 1em;
    letter-spacing: 0.1em;
}

h6 {
    font-weight: 300;
    font-size: 0.8em;
    letter-spacing: 0.1em;
}

button {
    font-family: aspergitbold;
    border-radius: 2em;
    padding: 1em 2em;
    font-size: 1em;
    letter-spacing: 0.3em;
    background: linear-gradient(60deg, rgba(84,188,175,1) 0%, rgba(18,161,148,1) 60%, rgba(34,133,123,1) 100%);
    cursor: pointer;
    line-height: 1.5;
}

.btn {
    border: none;
}

section {
    margin-top: 5em;
    z-index: 100;
}

nav {
    position: fixed;
    top: 1em;
    width: 83%;
    text-align: center;
}

nav ul {
    list-style-type: none;
    font-family: aspergitbold;
    margin: 0;
    padding: 0;
}
nav li {
    display: inline;
    padding: 0 0.3em;
    letter-spacing: 0.1em;
}

.logo img{
    width: 4em;
    height: auto;
    margin-top: 1em;
}

#header {
    margin: 0;
    height: 80%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-content {
    text-align: center;
    width: 80%;
}

.big-image {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    z-index: 2;
}
.big-image img {
    width: 100%;
    height: auto;
}

.big-logo {
    position: absolute;
    bottom: 7%;
    right: -20%;
    width: 100%;
    z-index: 0;
}
.big-logo img {
    width: 100%;
    height: auto;
    opacity: 30%;
}

.desktop {
    display: none;
}
.mobile {
    display: block;
}

@media only screen and (min-width: 768px) {
    h1 {font-size: 6em;}
    h2 {font-size: 3em;}
    h3 {font-size: 2em;}
    h4 {font-size: 1.3em;}
    .header-content {width: 50%;}
    nav {width: 100%;}
    nav li {padding: 0 1em;}
    .desktop {display: block;}
    .mobile {display: none;}
    .big-logo {width: 40%;right: 5%;bottom:10%;}
    .big-image {bottom: -10%;}
}