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

/* ------ Typography -------*/
body{font-family: 'Roboto', sans-serif;}

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

img{max-width:100%;}
img{border-radius: 5px;}
img {
  display: block;
  margin: 0 auto;
}


/* ------ Utility Classes  -------*/
.container{
  margin:0 auto;
  background-color: #073B5C;
  border: 1px solid #000;
  border-radius:6px;
}

/* ------ 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 */
}

/* ------ Global Styles -------*/
body{
  background:#c7c7c7;
  color: black;
  line-height:1.8;
} 
a:link, a:visited{
  color:rgb(165, 165, 165);
}

nav{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 10px 10px 10px 10px;
  
}
nav a:link, nav a:visited{
  padding:8px 8px;
  text-align:center;
  text-decoration:none;
  color:#222222;
  text-transform:uppercase;
  font-size:.8em;
  background:#0068A8;
  transition: background-color .9s ease;
  color:#000;
  border:2px solid #000;
  border-radius:150px;
  margin: 5px 5px;
  cursor: help;
}

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

main{
  padding: 10px 30px;
}

main h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  font-weight:800;
  font-variant-caps: all-small-caps;
  border-width:3px;
  border-style:solid;
  border-radius: 15px;
  border-color:#0068A8;
}

main h1:before, main h1:after {
  background-color: #44A5E1;
  flex-grow: 1;
  height: 1px;
  position: relative;
  top: 1em;
}

main h1:before {
  margin-right:15px;
}
main h1:after {
  margin-left:15px;
}


dl{
  display: grid;
  grid-template-rows:auto;
  grid-template-columns:8em 1fr;
  /*shorthand*/
  grid-template: auto / 8em 1fr;
  border:5px solid #0068A8;
  border-radius:15px;
  margin: 5px 5px;
}

dt{
  font-weight:700;
  grid-column: 1;
  padding: 10px 10px;
  border: 2px solid #0068A8;
}

dd {
  margin:0;
  grid-column: 2;
  padding: 10px 10px;
  border: 2px solid #0068A8;
}

p[itemprop="description"] {
  font-size: 1.2em;
  line-height: 1.5;
  text-align: center;
}



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

}

.related-links a{
  padding:8px 8px;
  text-align:center;
  text-decoration:none;
  color:#222222;
  text-transform:uppercase;
  font-size:.8em;
  background:#0068A8;
  transition: background-color .10s ease;
  color:#000;
  border:2px solid #000;
  border-radius:150px;
  margin: 5px 5px;
  cursor: help;
}

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

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

#skills{
  border-color: black;
}

#skills li {
  margin-bottom: 10px;
  list-style-type: disc;
}


.job, .certificate{
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  padding: 15px;
  margin: 50px 40px;
  border-color: #0068A8;
  background-color: #0068A8;
  text-align: center;
}

h3[itemprop="jobTitle"] {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}


.job *[itemprop="jobTitle"] {
  font-size: 2em;
  font-weight: bold;
  border-radius: #000;
  border-radius: 10px;
  border: solid;
  padding: 5px;
  text-align: center;
}
.job [itemprop="worksFor"] [itemprop="name"] {
  font-size: 1.5em;
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  padding: 5px;
  text-align: center;
}

.job span:not([itemprop="name"]) {
  text-align: center;
}

.job *[itemprop="url"] {
  text-align:center;
  text-decoration:none;
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  padding: 5px;
  line-height: 20px;
  color: #000;
  transition: background-color .5s ease;
  white-space: nowrap;

}

.job *[itemprop="url"]:hover {
  background:rgba(173, 173, 173, 0.95);
  
}

.certificate h3[itemprop="description"] {
  font-size: 2em;
  font-weight: 600;
  color: #000000;
  margin-bottom: 5px;
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  text-align: center;
}


.certificate *[itemprop="name"] {
  text-align: center;
  font-size: 1.5em;
  font-weight: 500;
  color: #000000;
  margin-bottom: 10px;
}

.certificate [itemprop="startDate"],[itemprop="endDate"] {
  font-size: 1em;
  font-weight: 400;
  color: #c2c2c2;
  margin-bottom: 10px;
}

.certificate *[itemprop="address"] {
  font-size: 10px;
  font-weight: 400;
  color: #c2c2c2;
  margin-bottom: 10px;
}

.job *[itemprop="addressLocality"],


.certificate *[itemprop="name"]
{
  display:block;
  font-weight:700;
}

.job h3{
  font-weight:800;
  color: #000000;
  text-align: center;
}

#skills h2{
  text-align: center;
  font-weight:800;
  color: #000000;
  text-align: center;
  text-align: center;
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  padding: 15px;
  margin: 50px 40px;
  border-color: #000000;
  background-color: #0068A8;
}

#education h2{
  text-align: center;
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  padding: 15px;
  margin: 50px 40px;
  border-color: #000000;
  background-color: #0068A8;
}

#experience h2{
  text-align: center;
  border-radius: #000;
  border-radius: 15px;
  border: solid;
  padding: 15px;
  margin: 50px 40px;
  border-color: #000000;
  background-color: #0068A8;
}

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








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

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

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