/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
.hidden {
  display: none;
}

header img {
  width: 20%;
  height: 100px;
  border-radius: 10px;
  border: 3px solid black;
}
header a {
  margin: 0 auto;
}
img, input, button{
  display: block;
  margin: 0 auto;
}
h1,h2{
  text-align: center;
}
h2 {
  font-size: 2.5rem;
  width: 25%;
  height: 55px;
  padding: 1% 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
input, button {
  width: 200px;
}
section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  padding: 0 15%;
}
h3 {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

/* Borders */
h3:first-of-type, h3:nth-of-type(3) {
  flex-basis: 50%;
  margin: 1% auto;
  border: 3px solid black;
  border-right: 1.5px solid black;
}
h3:nth-of-type(2), h3:nth-of-type(4) {
  flex-basis: 50%;
  margin: 1% auto;
  border: 3px solid black;
  border-left: 1.5px solid black;
}

/* Font Size */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.5rem;
  background: rgb(239, 238, 234);
}
h1 {
  font-size: 3rem;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

@media all and (max-width: 767px) {
  h1, h2 {
    width: 50%;
    margin: 5% auto;
  }
  input, button {
    width: 50%;
  }
  section {
    padding: 0 5%;
  }
}
@media all and ( max-width: 550px){
  header img {
    width: 50%;
  }
}