/******************************************
/* TYPOGRAPHY
/*******************************************/
html{
  font-size:10px;
}

body{
  font-size:1.7rem;
  font-family:"Arial";
}

h1{
  font-size:5.8rem;
}

h2{
  font-size:2rem;
}

.menu li{
  font-size:1.6rem;
}


/******************************************
/* BASE LAYOUT
/*******************************************/
body{
  display:flex;
  flex-direction:column;
  max-width:100%;
  padding:0 2%;
  background-color:#fffbf7;
  color:#1d0900;
}

body *{
  display:flex;
  justify-content:center;
  text-align:center;
}

body > *{
  flex-direction:column;
}

.page-content > *{
  margin:1rem 0;
}

.page-content h2 {
  margin-top:3rem;
}

.logo{
  width:200px;
  align-self:center;
  margin-bottom:25px;
}

.anchor-button{
  width:max-content !important;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  padding:20px;
  color:#1d0900;
  border:solid 4px #ddd4cb;
  border-radius:50px;
}

.connect .anchor-button{
  color:#264CC1;
  border:solid 4px #AD3A3E;
  margin-top:20px;
}

/******************************************
/* MENU
/*******************************************/

.menu{
  width:100%;
}

.menu ul{
  width:100%;
  justify-content:space-between;
  padding:0;
}

.menu ul li{
  width:50%;
  height:80px;
  align-items:center;
  border:dotted 1px #e0d3c5;
}

.menu a{
  text-decoration:none;
  text-transform:uppercase;
  color:#1d0900;
}

.menu a:hover{
  font-weight:600;
}


/******************************************
/* PAGE CONTENT
/*******************************************/

.page-content{
  align-items:center;
}

.page-content > *{
  width:86%;
}

.page-content ul{
  flex-direction:column;
  max-width:max-content;
  align-items:start;
}

.page-content li{
  display:list-item;
  text-align:left;
  list-style-type:square;
}

.page-content span{
  margin-top:14px;
  font-size:1.8rem;
  font-weight:700;
}

/******************************************
/* PAGE CONTENT
/*******************************************/

footer{
  border-top:dotted 1px #e0d3c5;
  margin-top:80px;
}

footer small {
  margin:30px 0;
  color:#cfc2b3;
}


/******************************************
/* TABLET CHANGES
/*******************************************/

@media screen and (min-width:776px){
  html{
    font-size:11px;
  }
}

/******************************************
/* DESKTOP CHANGES
/*******************************************/

@media screen and (min-width:1024px){
  html{
    font-size:12px;
  }
}