screen.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* stylelint-disable*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */

/* Begin site styles below */

/* Base Styles */
/*
  Hint: these tend to be
  1. element selectors
  2. concerned with color and typography
  3. basic element presenation
*/

/*
  Setting type with a 4:3 modular scale
  http://www.modularscale.com/?18&px&1.333
*/

html {
  font-size: 1.125em; /* 18 / 16 = 1.125 */
  line-height: 1.222em; /* 22 / 18 = 1.2222222222 */
  text-rendering: optimizeLegibility;

}

body {
  padding-top: 3.667em; /* 66 / 18 = 3.667... */
  padding-right: 2.44444444em; /* 44 / 18 = 2.44444444 */
  padding-left: 2.44444444em; /* 44 / 18 = 2.44444444 */
  background-color: honeydew;

}

h1,
h2,
p {
  padding-bottom: 1.222em; /* 22 / 18 = 1.2222222222 */

}

h1 {
  font-size: 2.38889em; /* 42 / 18 = 2.38889 */
  line-height: 1.032em; /* 44 / 42.635 = 1.032 */
  padding-bottom: 0.516em; /* 22 / 42.635 = 0.516 */
  text-align: center;
  font-family: Georgia;


}

h2 {
  font-size: 1.8333em; /* 33 / 18 = 1.8333 */
  line-height: 1.032em; /* 33 / 31.984 = 1.032 */
  padding-bottom: 0.688em; /* 22 / 31.984 = 0.688 */
  font-family: monospace;
  font-weight: bold;


}

/* ordered and unordered list */

ul {
  padding-bottom: 0.611em; /* 11 / 18 = 0.6111111 */
  list-style-type: disc;

}

/* nested list */

li ul {
  padding-top: 0.611em; /* 11 / 18 = 0.6111111 */
  padding-left: 1.22em; /* 22 / 18 = 1.2222222222 */
  padding-bottom: 0;
  list-style-type: circle;

}


/* nested list within nested list */
li li ul {
  padding-top: 0.611em; /* 11 / 18 = 0.6111111 */
  list-style-type: lower-roman;

}

/* list item */
li {
  padding-bottom: 0.611em; /* 11 / 18 = 0.6111111 */

}
li li:last-child {
  padding-bottom: 0;

}

/* Responsive Media */
img {
  display: block;
  max-width: 100%;
  padding-top: 0.611em; /* 11 / 18 = 0.6111111 */
  padding-bottom: 0.611em; /* 11 / 18 = 0.6111111 */
}

figcaption {
  font-size: 0.8333em; /* 15 / 18 = 0.8333em */
  line-height: 1.0667em; /* 16 / 15 = 1.0667em */
  padding-bottom: 0.8667em; /* 13 / 15 = 0.8667*/
  text-align: center;
}

/* Layout Styles */
/*
  Hint: these tend to be
  1. IDs; but also classes, sometimes
  2. concerned with layout and spatial
     relationships
*/

#navigation {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

#navigation li {
  float: left;
  width: 33.3333333333%;
}

#navigation a {
  display: block;
  width: 100%;
  padding-top: 0.611em; /* 11 / 18 = 0.6111111 */
  padding-bottom: 0.611em; /* 11 / 18 = 0.6111111 */
  text-align: center;
  text-decoration: none;
  background-color: teal;
  color: honeydew;
  font-family: "Arial Rounded MT";

}

#navigation a:hover {
  background-color: purple;
}

#footer {
  padding-top: 5%;
}

/* Modular Styles */
/*
  Repeating style patterns.
  Hint: these tend to be:
  1. classes and relationship selectors
  2. concerned with adjustments to base styles,
      spacing, color, etc. etc.
*/

#navigation ul,
#navigation li {
  list-style-type: none;
  padding-bottom: 0;
}

/* State Styles */
/*
  States of the browser and user access
  conditions.
  Hint: these tend to be:
  1. Driven by media queries
  2. Influenced by JavaScript
  3. Organized by Base, Layout, Module, State
*/

.js abbr {
  cursor: pointer;
}

#slideshow {
  margin: auto;
  position: relative;

}
.slide {
  position: absolute;
}

@media screen and (min-width: 375px) {
  padding-right: 11.2%; /* 42 / 375 = 11.2% */
  padding-left: 11.2%; /* 42 / 375 = 11.2% */
}

#gaming {
  padding-top: 80%;
}

#slideshow {
  margin: auto;
  position: relative;
}
.slide {
  position: absolute;
}


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

  .cssgrid #content-resume,
  .cssgrid #content-home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 25px;
  }

  .cssgrid #primary {
    grid-column: 1;
  }

  .cssgrid #experience {
    grid-column: 2/4;
  }

  .cssgrid #about {
    grid-column: 1;
  }

  .cssgrid #picture {
    grid-column: 2/4;
  }

}

#slideshow {
  margin: auto;
  position: relative;
  padding-top: 1.222em;
  padding-bottom: 1.222em;
}
.slide {
  position: absolute;
  padding-top: 1.222em;
  padding-bottom: 1.222em;
}

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

  #gaming {
    padding-top: 0;
  }

  .cssgrid #content,
  .cssgrid #content-resume,
  .cssgrid #content-home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
  }

  .cssgrid #primary,
  .cssgrid #photoshop,
  .cssgrid #experience,
  .cssgrid #secondary {
    width: auto;
  }

  .cssgrid #primary {
    grid-column: 1;
  }

  .cssgrid #photoshop {
    grid-column: 1;
  }

  .cssgrid #secondary {
    grid-column: 2/4;
  }

  .cssgrid #experience {
    grid-column: 2/4;
  }

  .cssgrid #about {
    grid-column: 1;
  }

  .cssgrid #picture {
    grid-column: 2/4;
  }

  #slideshow {
    margin: auto;
    padding-top: 1.222em;
    padding-bottom: 1.222em;
  }
  .slide {
    position: absolute;
    padding-top: 1.222em;
    padding-bottom: 1.222em;
  }
}