@import url('https://fonts.googleapis.com/css?family=Modak&display=swap');
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background-color:rgb(200, 149, 37);
}

.button{
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
  color: black;
  font-family: 'Abel', sans-serif;
}

canvas {
  display: block;
  margin:auto;
  border-radius: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: rgb(233, 233, 233);
  box-shadow: 10px 10px 50px 8px rgb(223, 223, 223);
  margin-top: 50px;
}

#content{
  position: absolute;
  left:300px;
  margin-top:350px;
  font-family: 'Abel', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 20px;
  color: rgb(80, 0, 47);
  -webkit-font-smoothing: antialiased;
}

#footere{
  margin-top: 5px;
  font-family: 'Abel', sans-serif;
  color: rgb(80, 0, 47);
}

i{
  position: absolute;
  left:300px;
  margin-top:300px;
  color: rgb(80, 0, 47);
}

h1 {
  position: absolute;
  left:300px;
  margin-top:150px;
  font-family: 'Abel', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 50px;
  color: rgb(80, 0, 47);
  -webkit-font-smoothing: antialiased;
}


h2 {
  position: absolute;
  left:300px;
  margin-top:190px;
  font-family: 'Modak', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 100px;
  color: rgb(80, 0, 47);
  -webkit-font-smoothing: antialiased;
}

.flexcontainer{
  width:50%;
  margin:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:flex-start;
  justify-content:center;
  align-items:flex-start;
  align-content: space-between;
}