*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Cinzel', serif;
  /* font-family: 'Libre Franklin', sans-serif; */
 }


 /* NAVBAR */
/* Add a color to the Home link */
.topnav a.home {
  background-color: #0900ac;
  color: cornsilk;
  /* margin-left: 0; */
}

.topnav a.active:hover {
 color: greenyellow;
}

 .topnav a {
   float: left;
   color: #0900ac;
   background-color: gainsboro;
   opacity: .8;
   /* text-align: center; */
   padding: 3%;
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
 }
 
 /* Change the color of links on hover */
 .topnav a:hover {
   background-color: #0900ac;
   color: gainsboro;
   border-radius: 25%;
 }

.topnav {
   /* background-color: #333; */
   background-image: url(./Images/Images/Background-image-1.jpg);
   position: fixed;
   width: 100%;
   z-index: 1;
   border-bottom: solid .1px #0900ac;
 }


/* BANNER/BIO */
 /* Profile pic and Bio */
 .container {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(6, 100px);
   padding-top: 12%;
   padding-bottom: 8%;
   background-image: url(./Images/Images/Background-image-1.jpg);
}

.container img {
   grid-area: 1 / 1 / 7 / 2;
   max-height: 30%;
   min-width: 70%;
   min-height: 100%;
   border-radius: 5%;
   border: 2px #0900ac solid;
   margin-left: 10%;
   box-shadow: 3px 3px 4px 1px #0900ac;
}

.container h1 {
   grid-area: 1 / 2 / span 1 / span 1;
   margin: auto 5% 0% 5%;
   padding-top: 2.5%;
   padding-bottom: 2.5%;
   background-color: #ddd;
   border: 1px #0900ac solid;
   border-top-left-radius: 1.5%;
   border-top-right-radius: 1.5%;
   opacity: .9;
   text-align: center;
   font-size: 3rem;
   box-shadow: 2px 2px 5px 1px #0900ac;
}

#par1 {
   grid-area: 2 / 2 / span 2 / span 3;
   /* background: fixed; */
   text-align: justify;
   padding: 1% 2% 2% 2%;
   background-color: #ddd;
   opacity: .9;
   margin: 0% 5% auto 5%;
   border: 1px #0900ac solid;
   border-bottom-left-radius: 2%;
   border-bottom-right-radius: 2%;
   /* text-indent: 1%; */
   font-weight: 400;
   font-family: 'Libre Franklin', sans-serif;
   /* font-family: 'Cinzel', serif; */
   line-height: 1.5rem;
   box-shadow: 2px 2px 5px 1px #0900ac;
}

#contactMe {
  font-family: 'Libre Franklin', sans-serif;
  align-self: center;
}

i {
  size: 6px;
}

.link {
  font-family: 'Libre Franklin', sans-serif;
  text-decoration: none;
  color: #0900ac;
}

.link:hover {
  background-color: #ddd;
   color: green;
}


/* HOLY GRAIL */
.wrapper {
   width: 100%;
   padding: 1% 1% 1% 1%;
   display: grid;
   grid-template-columns: .5fr 1.5fr .5fr;
   grid-template-rows: repeat(5, 100px);
   gap: .4%;
   /* height: 90vh; */
   text-align: center;
   background-color: #0900ac;
}

#header {
   grid-area: 1 / 2 / 2 / 3;
   border-style: solid;
   background-color: antiquewhite;
   overflow: auto;
   font-family: 'Cinzel', serif;
}

.wrapper h1 {
  font-size: 2.2rem;
}

#git-logo {
  font-size: xx-large;
  color: #0900ac;
}

#header p {
  font-size: .8rem;
  font-family: 'Libre Franklin', sans-serif;
}

#left {
   grid-area: 1 / 1 / 5 / 2;
   font-size: 2em;
   border-top-left-radius: 20%;
   border-bottom-left-radius: 20%;
}

.column {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
   background-color:  antiquewhite;
   overflow: auto;
   border-style: solid;
}

.logo {
  width: 45%;
  background-color: white;
  padding: 5%;
  margin-top: 4%;
  margin-bottom: 4%;
  border: solid 2px #0900ac;
}

#video {
   grid-area: 2 / 2 / 5 / 3;
   border: solid 1px antiquewhite;
   font-size: 2em;
   /* box-shadow: 1px 1px 4px 1px cornsilk; */
}

#right {
  grid-area: 1 / 3 / 5 / 4;
   font-size: 2em;
   border-top-right-radius: 20%;
   border-bottom-right-radius: 20%;
}

#footer {
   grid-area: 5 / 1 / 6 / 4;
   background-color: #0900ac;;
   font-size: 2em;
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* width: 100%; */
   /* border: solid .5px antiquewhite; */
}

#footer p {
  padding-left: 4%;
  padding-right: 4%;
  width: 100%;
  color: cornsilk;
  font-size: .9rem;
}

div p a {
  font-size: 1.5rem;
  color: rgb(0, 98, 255);
  
}

/* EYES */
.eyes {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14495e;
}
.eye {
  /* width: 240px; */
  width: 100%;
  height: 120px;
  background: #fff;
  display: inline-block;
  margin: 40px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.ball {
  width: 80px;
  height: 80px;
  background: #000;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

  /* PROJECTS */
#projects {
   /* background-color: rgb(248, 239, 228); */
   color: rgb(59, 59, 59);
   /* color: black; */
   display: flex;
   justify-content: start;
   padding: 2% 4% 1%;
   font-size: 3rem;
   text-decoration: solid underline;
 }

 .project-pic {
   width: 20em;
   height: 20em;
   box-shadow: 1px 1px 4px 1px #0900ac;
 }

 .projects {
   padding-top: 2%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: center;
   background-color: rgb(95, 94, 94);
 }

 img {
   border: solid 2px #0900ac;
   border-radius: 5%;
 }

 button a {
   text-decoration: none;
   background-color: #0900ac;
   color: rgb(248, 239, 228);
   font-size: 1rem;
   border-radius: 1rem;
 }

 button a:hover {
   color: greenyellow;
 }

 button {
   padding: .5%;
   border: solid 1px #0900ac;
   border-radius: 1rem;
   margin-bottom: 5%;
 }

 h4 {
   font-size: 1.5rem;
 }
 h5 {
   width: 20em;
   font-family: 'Libre Franklin', sans-serif;
   padding: 5% auto 5% auto;
   text-align: left;
   line-height: 1.3rem;
 }

 
 /* BOOKS */
.book {
  width: 100%;
  height: 60%;
  box-shadow: 1px 1px 4px 1px cornsilk;
}

.col, 
.card,
.row
.books {
  background-image: url(./Images/Images/Background-image-1.jpg);
  background-repeat: repeat;
  padding-top: 8%;
  border: solid .1px #0900ac;
}

.card-text,
.card-title {
  font-family: 'Libre Franklin', sans-serif;
  text-align: justify;
}


 /* MEDIA QUERIES */
 @media only screen and (max-width: 975px) {
  .container {
      display: flex;
      flex-wrap: wrap;
      padding-top: 15%;
      margin-left: auto;
      margin-right: auto;
  }

  .container img {
    margin: 2% 5% 2% 5%;
    grid-area: 2 / 1 / 7 / 2;
  }

  .container h1 {
    margin: auto 5% 0% 5%;
    padding: 1% 2% 1% 2%;
    grid-area: 1 / 1 / 7 / 2;
  }

  button {
    margin-bottom: 10%;
  }

  #header p {
    font-size: .6rem;
  }

}

/* PHONE */
@media only screen and (max-width: 375px) {
  .container h1 {
    display: flex;
    flex-wrap: wrap;
    /* padding-top: 25%; */
    margin-top: 22%;
    margin-left: auto;
    margin-right: auto;
}

/* .wrapper #video{
  margin-left: auto;
  margin-right: auto;
} */

#projects {
  margin-top: 20%;
}
}