@font-face {
  font-family: Inktext;
  src: url(fonts/Inktext.ttf);
  }

@font-face {
  font-family: BubbleLetters;
  src: url(fonts/Bubbleletters.ttf);
  }

@font-face {
  font-family: ransom;
  src: url(fonts/earwigfactoryrg.otf);
  }

* {
max-width: 100%;
height: auto;
box-sizing: border-box;
}

body {
margin: 10px;
font-family: inktext;
background-image: url(siteimgs/bgimg.jpg);
background-size: 100% auto;
}

a {
font-family: ransom;
color: inherit;
text-decoration-line: inherit;
}

a:hover {
  color: rgb(206, 34, 62);
  }

#header {
align-self: center;
width: 100%;
}

#navigation, #flexbox, ul {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 95%;
height: auto;
list-style: none;
}

li {
flex-basis: 200px;
}

#content {
align-items: baseline;
margin-right: 10px;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}

#block {
min-width: 40%;
margin: 10px;
}

#title {
  text-align: center;
  background-image: url(siteimgs/titlebgimg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100%, auto;
  padding: 5px;
  color: black;
  font-size: 26px;
  font-family: bubbleletters;
  margin-left: 5%;
  margin-right: 5%;
}

#article {
  border-radius: 15px;
  background-image: url(siteimgs/articlebg.png);
  background-size: 100% auto;
  padding: 35px;
  margin-left: 5%;
  margin-right: 5%;
  font-size: 20px;
}