/* CSS Custom Properties */

:root{
  --main-bg-color: #efefef;
  --primary-type-color: #222222;
  --accent-color-1: #999999;
}



html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* ------ Helper Classes -------*/
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

/* ------ Typography -------*/
body {
  font-family: "Open Sans", sans-serif;
}

/* ------ Fluid Images -------*/

img {
  max-width: 100%;
}

/* ------ Design Time -------*/

.container {
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.15);
}

/* ------ Global Styles -------*/
body {
  background: var(--main-bg-color);
  color: var(--primary-type-color);
  line-height: 1.6;
}

a:link,
a:visited {
  color: var(--primary-type-color);
}

nav {
  padding: 1px;
}
nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px 20px 0px 20px;
}
nav li {
  list-style-type: none;
}

nav a:link, nav a:visited {
  display: block;
  padding: 8px 16px;
  border: 1px solid #000;
  text-align: center;
  text-decoration: none;
  color: var(--primary-type-color);
  text-transform: uppercase;
  font-size: 0.75em;
  background: rgba(0, 0, 0, 0.65);
  transition: background-color 0.5s ease;
  color: #ffffff;
}

nav a:hover {
  background: rgba(0, 0, 0, 0.95);
}

main {
  padding: 1px 20px;
}

main h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  font-weight: 400;
  font-variant: small-caps;
}
main h1:before,
main h1:after {
  background-color: var(--accent-color-1);
  content: "\a0";
  flex-grow: 1;
  height: 1px;
  position: relative;
  top: 0.77em;
}
main h1:before {
  margin-right: 15px;
}
main h1:after {
  margin-left: 15px;
}

dl {
  font-size:.8rem;
  display: grid;
  /*shorthand*/
  grid-template: repeat(8, 50px) / 8em 1fr;
}

dt {
  font-weight: 800;
  grid-column: 1;
  padding: 10px 0;
  border-bottom: 1px solid var(--accent-color-1);
}
dd {
  margin: 0;
  grid-column: 2;
  padding: 10px 0;
  border-bottom: 1px solid var(--accent-color-1);
}

.related-links {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.related-links .svg-inline--fa {
  font-size: 1.8em;
  padding-top: 7px;
}

.related-links a {
  border: 1px solid var(--accent-color-1);
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  color: #222222;
  text-transform: uppercase;
  font-size: 0.75em;
  background: rgba(0, 0, 0, 0.65);
  transition: background-color 0.5s ease;
  color: #fff;
}

.related-links a:hover {
  background: rgba(0, 0, 0, 0.95);
}

.related-links li {
  margin-right: 20px;
}

#skills {
}
#skills li {
  list-style-type: square;
}

.job,
.certificate {
  border-bottom: 1px solid var(--accent-color-1);
  padding-bottom: 20px;
}

.job *[itemprop="jobTitle"],
.job *[itemprop="name"],
.job *[itemprop="url"],
.job *[itemprop="addressLocality"],
.certificate *[itemprop="name"] {
  display: block;
}

.job h3 {
  margin: 20px 0 0 0;
}

footer {
  text-align: center;
  padding: 20px 0;
}


/* Reorder Source Using Grid */
main.container {
  display: grid;
  grid-template-areas:
    "title"
    "about"
    "education"
    "experience"
    "skills";
}



.page-title {
  grid-area: title;
}
#about {
  grid-area: about;
}
#skills {
  grid-area: skills;
}
#experience {
  grid-area: experience;
}
#education {
  grid-area: education;
}

/* Media Queries */

@media screen and (min-width:768px){
  
 header.container{
  max-width:900px;
  }
 
  main.container{
  max-width:900px;
  grid-template-columns: 36.5% auto;  
  grid-template-areas:
    "title title"
    "about about"
    "skills experience"
    ". education"
    ;  
  } 
  
  #about{
  display:grid;
  gap:2em;
  grid-template-columns: 300px 1fr auto;
  grid-template-areas:
    "bio details details"
    "related related related";
}
.bio{
  grid-area:bio;
}
.details{
  grid-area:details;
}
  
 .related-links{
  grid-area:related;
  border-bottom:1px solid #999;
  padding-bottom:50px
} 
  
}

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