html, body {
margin: 0;
padding: 0;
}

h1, h2 {
font-weight: 500;
}

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


a:hover {
text-decoration: none;
color: #0000ff;
}

strong, b {
font-weight: 400;
}



html {
font-family: 'Roboto', sans-serif;
background-color: #fafffb;
}


/* footer */

.footer {
position: fixed;
bottom: 0;
background: #000;
width: 100%;
}

.footerlongpage {
position:inherit !important;
}

.footer ul {
margin: 0;
padding: 5px 5px 7px 5px;
}

.footer ul li {
display: inline;
list-style: none;
color: #fff;
}

.footer ul li a {
text-decoration: none;
letter-spacing: 0.03em;
font-size: 0.8em;
}

.footer .right {
padding-right: 7px;
}

.footer .right ul li a {
color: #fafffb;
  opacity: 0.5;
padding-left: 10px;
font-weight: 300;
font-size: 0.8em;
}

.footer .left {
padding-left: 7px;
}

.footer .left ul li a {
color: #fafffb;
opacity: 0.5;
padding-right: 10px;
font-weight: 300;
font-size: 0.8em;
}

.footer ul li a:hover {
opacity: 0.8;
color :#fff;
}


.left {
float: left;
}

.right {
float: right;
}

.clear {
clear: both;
}

.footer ul li a img {
display: inline-block;
padding-right: 5px;
}

/* logo */

.logo {
     max-width:400px;
     margin: 0 auto;
     text-align:center;
padding-bottom: 5px;
}

.logo h1 {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: 1em;
  padding: 0 0 10px 0;
  color: #d7d9d8;
  text-align:center;
  margin: 0;
  margin-right: -1em;
}


/* email */

.arobase::before {
content: "\000040";
}

p.codedwithlove {
margin-top: 200px;
font-size: 0.8em;
color: #999;
}

p.links {
font-size: 1em;
margin: 0;
padding: 0 0 5px 0;
}

p.links span.author {
display: inline-block;
padding-left: 15px;
font-size: 0.9em;
color: #999;
}

/* linktree */

/*body.linktree {
margin:0;
padding:0;
background: url('img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}*/

html {
height: 100%;
margin:0;
padding:0;
background: url("img/damier6.png") left top repeat;
}



.global {
font-size: 1.1em;
padding: 70px 100px 100px 100px;
max-width: 800px;
margin: 0 auto;
text-align: center;
color: #fff;
}

.global img {
display: block;
max-width: 111px;
height: auto;
margin: 0 auto;
margin-bottom: 30px;
}

.global p span {
font-style: italic;
}

.content {
  margin: 0px auto;
  height: 100%;
  width: 100%;
  max-width: 680px;
  text-align: center;
  padding-top: 25px;
}

ul.tree {
margin: 0;
padding: 0;
}

ul.tree li {
list-style: none;
}

ul.tree li a {
display: block;
padding: 20px;
//background-image: linear-gradient(to right top, #830083, #790482, #6e0882, #630c80, #580f7f);
background: #0808db;
margin-bottom: 20px;
border-radius: 10px;
color: #fff;
transition: all 0.5s ease-out;
font-weight: 300;
}

ul.tree li a:hover {
//opacity: 0.5;
background: #0000ff;
}



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


  .global {
  padding: 70px 40px 70px 40px;
  }


  .footer .right ul li a {
  padding-left: 0;
  padding-right: 10px;
  }

  .footer .right ul {
  padding: 0 5px 7px 11px;
  }

  .footer ul li a {
  letter-spacing: 0.02em;
  font-size: 0.8em;
  }

  .right {
  float: none;
  }

  .left {
  float: none;
  }


}