@font-face {
    font-family:'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display:swap;
    src: local('Roboto'), local('Roboto-Regular'),
    url(Roboto-Regular.ttf) format('ttf'),
}

* {
  margin:0;
  padding:0;
}

body {
  font-family:"Roboto", sans-serif;
  color:#333333;
  background: #eaeaea;
}

.wrapper {
  width:80%;
  padding:2em 20%;
}

header {
  margin:0 0 1em 0;
}

h2 {
  font-weight:700;
}

input[type="text"], input[type="url"] {
  width:50%;
  margin: 0.1em 0 0.1em 19px;
  height:2em;
  border: 0.1em solid #333333;
  border-radius: 0.5em;
  padding:0.2em 0.4em;
  font-size:1em;
}

input[type="submit"] {
  width:25%;
  margin: 1em 0 0.1em 19px;
  height:2em;
  border: 0.1em solid #333333;
  border-radius: 0.25em;
  padding:0.2em 0.4em;
  font-size:1em;
  background:#333333;
  color:white;
}

input[type="checkbox"] {
  margin: 0.5em 0 0.1em 19px;
}

#content p {
  margin: 1em 0 0.5em 0;
  font-weight:500;
}

#content a{
  font-size:0.8em;
}

h3 {
  margin: 1em 0 0.5em 19px;
}

button {
  width:25%;
  margin: 1em 0 0.1em 19px;
  height:2em;
  border: 0.1em solid #333333;
  border-radius: 0.25em;
  padding:0.2em 0.4em;
  font-size:1em;
  background:#333333;
  color:white;
}