body {background: rgb(111,52,98);
  background: linear-gradient(0deg, rgba(111,52,98,1) 0%, rgba(17,6,43,1) 100%);}

#grid {
  margin: 12px auto;
  width: 1200px;
  display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr 2fr 1fr 1fr 1fr;
    grid-template-rows: 80px 32px 230px 32px 70px 32px 70px 32px 70px 32px;
  background-image: url(purple-aesthetic-iphone-background-of-skyline-of-3pwt9owd4ykpiru6.jpg);
  background-size: cover;}

header {
  padding-left: 20px;
  grid-column: 1 / 6;
  grid-row: 1 / 2;
  font-family: 'Sacramento', cursive;
  font-size: large;
  font-style: italic;
  color: purple;
  background-color: #dd78c2}

nav {
  grid-column: 6 / 10;
  grid-row: 1 / 2;
  padding-left: 20px;
  background-color: #dd78c2;}
nav li {display: inline-block;}
nav li a {padding: 15px;}
nav li a:hover {
  color: mediumvioletred;
  transition: background-color 0.4s;}
        #primary_nav_wrap ul a
            {display:block;
              font-family: Georgia, 'Times New Roman', Times, serif;
              font-weight: bold;
              font-size: larger;
              color: purple;
              text-decoration: none;}
            #primary_nav_wrap ul li
            {position:relative;
              float:left;
              margin:0;
              padding:0;}
            #primary_nav_wrap ul li:hover {color: mediumvioletred;
              background-color: rgba(255, 255, 255, 0.7);
              transition: background-color 0.4s;}
            #primary_nav_wrap ul ul
            {display:none;
              position:absolute;
              top:100%;
              left:0;
              padding:0;
              background-color: rgba(255, 255, 255, 0.7);}
            #primary_nav_wrap ul ul a {line-height:120%;}
            #primary_nav_wrap ul ul ul {top:0; left:100%;}
            #primary_nav_wrap ul li:hover > ul {display:block;}

.AboutMe {
  grid-column: 2 / 3;
  grid-row: 3 / 10;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  border: 3px solid #eea2da;}
  .AboutMe p {margin: 0px; padding-left: 8px; padding-right: 8px; Color: purple;}
  .AboutMe h2 {margin: 5px; Color: purple;}
  .AboutMe img {max-width: 200px; padding: 10px; border-top-left-radius: 20px; border-bottom-right-radius: 20px;}
  .AboutMe a {Color: purple; background-color: #eea2da; padding: 6px; font-size: 120%;}

#Academics {background-color: rgba(255, 255, 255, 0.7);
  grid-column: 4 / 9;
  grid-row: 3 / 4;
  padding: 20px;
  Color: purple;
  border: 3px solid #eea2da;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;}
  #Academics h2 {font-size: 175%;}

#Resume {background-color: rgba(255, 255, 255, 0.7);
  grid-column: 4 / 7;
  grid-row: 5 / 6;
  border: 5px solid #dd78c2;
  padding-top: 15px;
  font-size: 175%;}
  #Resume .bi-file-text-fill {
    Color: purple;
    font-size: 100%;
    text-decoration: none;
    padding: 18px;
    padding-right: 20px;
    margin: 0px;
    background-color: #dd78c2;}
    #Resume a {
      text-decoration: none;
      font-family: Georgia, 'Times New Roman', Times, serif;
      Color: purple;}
 

#ArtStation {background-color: rgba(255, 255, 255, 0.7);
  grid-column: 5 / 8;
  grid-row: 7 / 8;
  border: 5px solid #dd78c2;
  padding-top: 15px;
  font-size: 170%;}
  #ArtStation .bi-palette-fill {
    Color: purple;
    font-size: 100%;
    text-decoration: none;
    padding: 18px;
    padding-right: 20px;
    margin: 0px;
    background-color: #dd78c2;}
    #ArtStation a {
      text-decoration: none;
      font-family: Georgia, 'Times New Roman', Times, serif;
      Color: purple;}


#GitHub {background-color: rgba(255, 255, 255, 0.7);
  grid-column: 6 / 9;
  grid-row: 9 / 10;
  border: 5px solid #dd78c2;
  padding-top: 15px;
  font-size: 175%;}
  #GitHub .bi-github {
    Color: purple;
    font-size: 100%;
    text-decoration: none;
    padding: 18px;
    padding-right: 20px;
    margin: 0px;
    background-color: #dd78c2;}
    #GitHub a {
      text-decoration: none;
      font-family: Georgia, 'Times New Roman', Times, serif;
      Color: purple;}