@font-face {
    font-family: "Mechanical";
    src: url("Skriik! Electro-mechanical machine.ttf");
}

body{
  background-color: black;
  color: #F8F0E3;
  background-image: url('corrugated-rusted-iron-315-in-architextures.jpg');
  background-size: 800px;
  font-family: 'Courier New';
}

main{
  width:50%;
  margin: auto;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0px 0px 50px 50px rgba(0,0,0,.5);
}

header, footer{
  margin-top: 40px;
  text-align: center;
  padding: 5px 40px;
  background-color: black;
  color: #F8F0E3;
  box-shadow: 2px 2px 8px black;
}

.block1, .block2{
  margin-top: 40px;
  background-color: grey;
  padding: 10px;
  background-image: url('PAPER01.png');
  color:black;
  box-shadow: 2px 2px 8px black;
}

.block1{
  transform: rotate(1deg);
}

.block2{
  transform: rotate(-1deg);
}

h1{
  font-family: 'Mechanical';  
  color: #F8F0E3
}

h2{
  padding: 5px 40px;
  background-color: black;
  color: #F8F0E3;
  display: inline;
  box-shadow: 2px 2px 3px rgba(0,0,0,.5);
  font-family: 'Mechanical';
}

h3{
  color: #F8F0E3;
  font-family: 'Mechanical'; 
}

.text{
  background-color: #F8F0E3;
  margin: 10px;
  padding: 5px 10px;
}

li{
  font-style: italic
}

li li{
  color: grey;
}

@media screen and (max-width: 800px) {
  main{
  width:80%;
  margin: auto;
}
}