html,
body {
  height: 100%;
  margin: 0 50px;
  max-width: 800px;
  /*padding: 2em 2em 10em;*/
}

h1,h2 {
  color: #fe5000;
}
/*
h2 {
  color: #f0c000;
}*/

body {
  font-family: Menlo, "Space-Grotesk", monospace;
  /*margin: 0;*/
  line-height: 1.3;
  display: flex;
  flex-direction: column;
    color: #fff8dc;
    background-color: #0c0c0c;
}

main,
header,
footer {
  margin: 2rem;
}

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

  main,
  header,
  footer {
    max-width: 40rem;
  }
}

main {
  flex: 1;
}

main img {
  max-width: 100%;
}

header {
  margin-bottom: 0;
}

header h1 {
  margin: 0;
}

header + main {
  margin-top: 1rem;
}

h1,
h2,
h3 {
  line-height: 1.1;
}

h1 a {
  color: inherit;
  text-decoration: none;
}

ul li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

table {
  border-collapse: collapse;
  text-align: left;
}

td,
th {
  border: 1px solid #ddd;
  padding: 0.25rem 0.5rem;
}

.flex-column {
  display: flex;
  flex-direction: column;
}


.responsive {
    width: 100%;
}

h1 {
    font-size: 2.5rem;
    transition: font-size .25s linear;
    -o-transition: font-size .25s linear;
    -moz-transition: font-size .25s linear;
    -webkit-transition: font-size .25s linear;
}

h2 {
    font-size: 1.8rem;
    transition: font-size .25s linear;
    -o-transition: font-size .25s linear;
    -moz-transition: font-size .25s linear;
    -webkit-transition: font-size .25s linear; 
  /* Set the property you want to transition. In this case it is font-size */
}


p {
    font-size: 1.1rem;
    transition: all .25s linear;
    -o-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear; 
  /* Using 'all' will apply the transition to all properties assicated with the element. so this will transition the color and font-size at the same rate*/
}

@media screen and (max-width: 1920px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 1.5rem;
        text-indent: 0px;
        display: flex;
        text-align: start;
        font-kerning: auto;
        font-style: oblique;
        margin: 1.2rem;
        font-weight: 900;
    }
    
    p {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 1280px) {
    h1 {
        font-size: 2rem;
        display: flex;
    }
    
    h2 {
        font-size: 1.5rem;
        display: flex;
        text-align: start;
        font-kerning: auto;
        font-style: oblique;
        margin: 1.2rem;
        text-indent: 0px;
        font-weight: 900;
    }
    
    p {
        font-size: 1.1rem;
  }
  
}

/*@media screen and (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
        text-indent: 20px;
    }
    
    p {
        font-size: 1rem;
    }
}
*/

/*@media screen and (max-width: 375px) {
    h1 {
        font-size: 1.2rem;
        padding-top: 10px;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    p {
        font-size: 1rem;
  }

    header {
        font-size: 0.9rem    
    }
    
    .navbar a {
        font-size: 0.9rem
    }
}
  */

/* 1080×2340 pixels at 476ppi */
@media only screen 
    and (width: 375px) 
    and (height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {
        h1 {
        font-size: 1.5rem;
        padding-top: 10px;
    }
    
    h2 {
        font-size: 1.2rem;
        text-align: start;
        font-kerning: normal;
        font-style: oblique;
        margin: 1.2rem;
        text-indent: 0px;
        font-weight: 900;
    }
    
    p {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.75rem;
        font-kerning: auto;
  }

    header {
        font-size: 0.9rem    
    }
    
    .navbar a {
        font-size: 0.9rem
    }
}

/* 1170×2532 pixels at 460ppi */
@media only screen 
    and (width: 390px) 
    and (height: 844px) 
    and (-webkit-device-pixel-ratio: 3) {
        h1 {
        font-size: 1.2rem;
        padding-top: 1rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    p {
        font-size: 1rem;
  }

    header {
        font-size: 0.9rem;
        text-align: center;
        font-kerning: auto;
        margin: 0px -5px;

    }
    
    .navbar a {
        font-size: 0.9rem
    }
}