@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    height:100%;
}

body{
    background:#ffffff;
    color:#485151;
    font:18px 'Lato',sans-serif;
}

/* ==========================================================
   PAGE
========================================================== */

.wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.page{
    width:1000px;
    flex:1;
}

/* ==========================================================
   HEADER
========================================================== */

.header{
    position:relative;
    width:1000px;
    height:422px;
    margin-top:20px;
    background:url(header.png) no-repeat center center;
}

/* ======================
   Navigation
====================== */

.navigation{
    position:absolute;
    left:0;
    top:0;
    width:175px;
    height:180px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.navigation a{
    display:block;
    width:175px;
    font:25px Arial Black,sans-serif;
    text-transform:lowercase;
    text-decoration:none;
	text-align:center;
    color:#65817b;
    line-height:1;
    font-weight: 800;
}

.navigation a:hover{
    color:#e38c71;
}

.about{
    letter-spacing:24px;
}

.join{
    letter-spacing:42px;
}

.buttons{
    letter-spacing:12px;
}

.fans{
    letter-spacing:40px;
}

.links{
    letter-spacing:28px;
}

.home{
    letter-spacing:34px;
}


/* ======================
   Titles
====================== */

.titles{
    position:absolute;
    left:448px;
    top:378px;
    font-family:Arial Black, Gadget, sans-serif;
    font-size:45px;
    line-height:1;
    white-space:nowrap;
    letter-spacing: 14px;
    font-weight: 800;
}

.title1{
    color:#8a4248;
}

.title2{
    color:#4d759c;
    margin-left: -20px;
}

/* ==========================================================
   CONTENT
========================================================== */

.content{
    width:820px;
    margin-left:180px;
    padding:35px 0;
    flex:1;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

p{
    margin-bottom:20px;
    line-height:1.8;
}

a{
    font:400 18px 'Lato',sans-serif;
    color:#8f917a;
    text-decoration:none;
}

a:hover{
    color:#98afbb;
}

b, strong{
    font:700 18px 'Lato',sans-serif;
    color:#9ca356;
}

i, em{
    font:italic 400 18px 'Lato',sans-serif;
    color:#63849d;
}

h1,h2,h3{
    font-family:Arial Black, Gadget, sans-serif;
    color:#28587c;
    margin-bottom:15px;
    font-weight: 800;
}

h1{
    font-size:33px;
}

h2{
    font-size:23px;
}

h3{
    font-size:18px;
}

/* ==========================================================
   FOOTER
========================================================== */

.footer{
    width:820px;
    height:100px;
    margin-left:180px;
    justify-content:center;
    align-items:center;
    text-align:center;
    font:16px 'Lato',sans-serif;
    color:#63849d;
}

.footer a{
    font:16px 'Lato',sans-serif;
    color:#98afbb;
}

.footer a:hover{
    color:#485151;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:1020px){

.page{
    width:100%;
}

.header{
    width:100%;
    height:auto;
    margin-top:0;
    padding-top:42.2%;
    background-size:cover;
    position:relative;
}

.navigation{
    position:static;
    width:auto;
    height:auto;
    padding:25px;
    display:block;
}

.navigation a{
    display:block;
    text-align:left;
    text-align-last:left;
    margin:8px 0;
    font-size:22px;
}

.titles{
    position:static;
    padding:25px;
    font-size:42px;
}

.content{
    width:auto;
    margin:0;
    padding:30px 25px;
}

.footer{
    width:auto;
    margin:0;
    padding:25px;
    height:100px;
}

}