html {
  scroll-behavior: smooth;
}

body {
 background-color: #FFF;
 font-family: Calibri, Arial, sans-serif; 
}

a { 
  text-decoration: none;
}

h2 a:link, h2 a:visited {
  color: black;
}

.container {
  background-color: #FFF;
  display: grid;
  grid-template-areas:
    'nav nav'
    'header header'
    'images text'
    'images text'
    'images buttons'
    'footer footer';
  gap: 50px;
  margin-left: 50px;
  margin-right: 50px;
  padding: 10px;
}

.nav {
  grid-area: nav;
}

.nav a {
  width: 100%;
  color: #FFF;
  margin-left: auto;
  margin-right: auto;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
}

#about_me {
  background-color: #1E90FF;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
  border-top-left-radius: 15px;
}

#experience {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  border-top-right-radius: 15px;
  text-align: ;
  text-indent: 20px;
}

#skills {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
}

#projects {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
}

#education {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
}

#publications {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
}

#awards_and_honors {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
}

#test_scores {
  background-color: #696969;
  float: left;
  width: 50%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
}

#contact_me {
  background-color: #696969;
  float: left;
  width: 100%;
  font-size: large;
  text-align: left;
  text-indent: 20px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#header {
  background-color: #FFF;
  color: #000;
  clear: both;
  grid-area: header;
}

.text {
  grid-area: text;
}

.text audio {
  width: 200px;
  height: 25px;
}

.text a:hover {
  text-decoration: underline;
}

.images {
  grid-area: images;
  width: 180px;
}

.images img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 50px;
}

.images p {
  text-align: center;
  font-size: small;
}

.images .labels {
  color: #696969;
}

.buttons {
  grid-area: buttons;
}

.buttons button {
  display: inline-block;
  padding: 5px 10px;
  font-size: medium;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #696969;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttons button:hover {background-color: #1E90FF}

.buttons button:active {
  background-color: #1E90FF;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#footer {
  clear: both;
  background-color: #696969;
  color: #FFF;
  text-align: right;
  padding-right: 20px;
  border-radius: 15px;
  grid-area: footer;
}

@media only screen and (max-width: 1080px) {
  .container {margin-left: 0px;
	      margin-right: 0px;}
  .nav {grid-area: 1 / span 2;}
  .nav a {font-size: medium;}
  #header {grid-area: 2 / span 2;
	   text-align: center;}
  .images {grid-area: 3 / span 2;
  	   margin: 0 auto;}
  .text {grid-area: 4 / span 2;
         text-align: center;}
  .buttons {grid-area: 5 / span 2;
         text-align: center;}
  .buttons button {font-size: small;}
  #footer {grid-area: 6 / span 2;
  	   padding-right: 0px;
           text-align: center;
   	   font-size: small;}
}