/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {

}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {

  section h2 {
    font-size: 6em;
    xpadding-bottom: 0.2em;
  }

  section h3 {
    font-size: 1.2em;
  }

  section .blocktext {
    font-size: 1.8em;
    width: 70%;
  }

  section .centertext {
    font-size: 1.8em;
    width: 70%;
  }

  section .rightimagetext {
    font-size: 1.8em;
  }

  section#welcome img.logo {
    padding-top: 80px;
    width: 60%;
  }

  section#welcome h2 {
    font-size: 4.3;
  }

  section#contact .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    display: -ms-grid;
    -ms-grid-columns: 50% 50%;
  }

  section#contact .grid input {
    float: right;
    margin-right: 10px;
  }

  section#contact .grid textarea {
    float: left;
    margin-left: 10px;
  }

  section#contact .grid #name {
    grid-column: 1/2;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  section#contact .grid #email {
    grid-column: 1/2;
    grid-row: 2/3;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  section#contact .grid #phone {
    grid-column: 1/2;
    grid-row: 3/4;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }

  section#contact .grid #message {
    grid-column: 2/3;
    grid-row: 1/4;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
  }

  section#contact .grid #sendMessageButton {
    grid-column: 1/3;
    grid-row: 4/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 4;
  }

  section#contact .grid #hint {
    grid-column: 1/3;
    grid-row: 4/5;
    -ms-grid-column-span: 3;
    -ms-grid-row: 4;
  }

  section#aboutme .content {
    display: flex;
    margin-right: 2em;
  }

}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {

  header {
    height: 60px;
    line-height: 60px;
  }

  header img {
    height: 25px;
    margin-top: 15px;
    margin-left: 15px;
  }

  menu.popup#main {
    top: 70px;
  }

  section h2 {
    padding-top: 70px;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

  header > menu {
    height: 60px;
    line-height: 60px;
  }

  menu.small {
    display: none;
  }

  menu.wide {
    display: inline-block;
  }

}