/*
font-family: 'Merriweather', serif;
font-family: 'Special Elite', cursive;
*/

body {
    background-image: url(../images/beige_paper.png);
    padding-top: 1%;
    height: 200vh;
}

main {
    max-width: 80%;
    margin: 0 auto;
}

footer {
  text-align: center;
  padding-bottom: 1%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  clear: both;
}

h1, h2, h3, h4, h5, h6 {
    /*text-align: center;*/
    font-family: 'Special Elite', cursive;
}

h1 {
  font-size: 275%;
  text-align: center;
  padding: 2% 0;
}

h2 {
    font-size: 250%;
    text-align: left;
    padding: 6% 0 1% 0;
    display: inline-block;
}

.portfolio-h {
  font-size: 200%;
  /*text-align: center;*/
  display: block;
  background-color: black;
  color: white;
  padding: 1% 1% 1% 0.75%;
  margin: 5% 55% 3% 0%;
}

h3 {
    font-size: 150%;
    padding-top: 3%;
    padding-bottom: 1%;
}

.abstract h3 {
  padding-top: 0%;
}

#metadata {
  text-align: center;
}

h4 {
    text-align: left;
    font-size: 125%;
    padding: 1% 0;
}

.resume-sec h4 {
    background-color: black;
    color: white;
    padding: 2% 2% 2% 0.75%;
}

h5, h6 {
    margin-bottom: 2%;
    line-height: 145%;
}

h5 {
    font-size: 130%;
}

.right-side h5 {
  font-size: 150%;
}

h6 {
    font-family: 'Merriweather', serif;
    font-size: 100%;
}

.right-side h6 {
  font-size: 115%;
  font-weight: 600;
}

#social-work {
  text-align: center;
  font-size: 250%;
  margin-bottom: 2%;
}

#email-link {
  font-family: 'Special Elite', cursive;
  font-size: 125%;
  text-align: center;
}

ul {
    list-style: circle outside;
}

li {
  padding-bottom: 1%;
  line-height: 175%;
}

a {
  text-decoration: none;
  color: black;
}

/* .writing a {
  color: #038236;
} */

#metadata-list a {
  color: #038236;
}

nav {
  position: sticky;
  top: 0; /* Stick to the top */
  background-color: #f0f0f0; /* Example background color */
  padding: 10px;
  z-index: 100; /* Ensure it's above other content */
}

nav ul {
  list-style: none; /* Remove bullet points */
  margin: 0;
  padding: 0;
  text-align: center; /* Center the menu items */
}

nav li {
  display: inline; /* Make menu items horizontal */
  margin: 0 15px; /* Add spacing between items */
  font-family: 'Special Elite', cursive;
  font-size: 165%;
}

nav a {
  text-decoration: none;
  color: #333; /* Example link color */
  padding: 5px 10px; /* Add padding to links */
}

nav a:hover {
  font-size: 125%;
}

#portfolio-nav .active {
    color: #038236; /* Make the current section bold */
}

#resume-nav .active {
  color: #c47b0c
}

.hero a {
  color: white;
}

i {
  color: black;
}

p, ul {
    font-family: 'Merriweather', serif;
    font-size: 100%;
    line-height: 175%;
    padding-bottom: 2%;
}

#metadata-list {
  padding-left: 2%;
  padding-right: 2%;
}

.portfolio-intro a, .writing a {
  color: #038236;
}

#pubs {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#pub-info {
  width: 80%;
}

footer p {
  font-size: 90%;
  padding-top: 1%;
}

em {
  font-style: italic;
}

.resume-sec p {
  padding-bottom: 1%;
}

.text-block {
    position: absolute;
    background-color: black;
}

.hero p {
    font-family: 'Special Elite', cursive;
    color: white;
    padding: 0.75% 2% 0.75% 0.75%;
    line-height: 100%;
}

.resume-sec a:hover {
  font-size: 125%;
}

.resume-sec #skill-link a {
  color: #bd5f02;
}

.resume-sec ul {
  margin-left: 3%;
  font-size: 110%;
}

.resume-sec p {
  font-size: 110%;
}

.hero {
  color: #fafafa;
  padding: 1% 0;
  margin: 0 auto;
  width: 80%;
  position: relative;
}

.hero img {
  width: 100%;
}

.name {
  position: absolute;
  top: 7%;
  left: 1%;
}

.name p {
  font-size: 200%;
  position: relative;
  padding: 3% 0 0 2%;
}
/* HOVERS */
.name:hover > p {
  color: #ffe6cc;
}

#index a:hover > p > span {
  font-size: 225%;
}

#index a:hover > p {
  padding: 1.25% 2% 0.75% 0.75%;
}

#email-link a:hover {
  color: #4f02ad;
}

a:hover > p > span {
  font-size: 150%;
}

a:hover > #work > span {
  color: #ff9900;
}

a:hover > #do > span {
  color: #02cccc;
}

a:hover > #go > span {
  color: #47d147;
}

a:hover > #write > span {
  color: #47d147;
}

a:hover > #social > span {
   color: #4da6ff;
}

a:hover > #email > span {
  color: #cc00ff;
}

/* PAGE LINKS */
#first-name {
  width: 5.7em;
}

#last-name {
  width: 5.3em;
  margin-top: 2%;
}

#go {
  top: 27%;
  left: 60%;
}

#work {
  top: 12%;
  left: 30%;
}

#write {
  top: 8%;
  left: 65%;
}

#do {
  top: 34%;
  left: 46%;
}

#social {
  position: absolute;
  top: 29%;
  left: 1.2%;
}

#email {
  top: 30%;
  left: 87%;
}

/* HOME-PAGE LINKS */
#index #work {
  top: 25%;
  left: 28%;
}

#index #go {
  top: 80%;
  left: 55%;
}

#index #do {
  top: 66%;
  left: 17%;
}

#index #write {
  top: 22%;
  left: 63%;
}

#index #social {
  top: 70%;
  left: 73%;
}

#index #email {
  top: 42%;
  left: 77%;
}

.resume-sec { /* added per Gemini */
    display: flex; /* Make the section a flex container */
    flex-wrap: wrap; /* Allow items to wrap if needed */
    align-items: flex-start; /* Align items to the top of the container */
}

.left-side {
    float: left;
    width: 23%;
    padding: 15px;
    /*text-align: center;*/
}

.right-side {
    float: left;
    width: 63%;
    padding: 15px;
}

.resume-sec .left-side {
    /*text-align: right;*/
    float: none; /* Gemini change */
    /*display: block; Gemini change */
    /*width: 20%; Gemini change */
    margin-left: 4.5%;
}

.resume-sec .right-side {
    /*width: 63%; Gemini change */
    /*display: block; Gemini change */
    float: none; /* Gemini change */
}

.container {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 5%;
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 101;
  opacity: 0.8;
  transition: opacity 0.3s;
}

#back-to-top:hover {
  opacity: 1;
}

#back-to-top i {  /* Target the <i> element inside #back-to-top */
  font-size: 125%; /* Adjust size as needed */
}

.writing {
  overflow: auto;
}

.writing img {
	width: 25%;
	float: left;
	padding: 3% 2% 2% 2%;
}

.abstract {
	float: right;
	padding: 3% 0 5% 0;
	width: 60%;
  margin-right: 8%;
}

#about_me img {
  width: 20%;
  margin: 0 4% 2% 0;
  float: left;
}

.github-write {
  font-size: 300%;
  margin-right: 2%;
  float: left;
}

#git-repo {
  font-family: "Source Code Pro";
}

footer .fa-brands {
  font-size: 120%;
}

/* #about_me p {
  display: inline;
  float: right;
  padding-top: 1%;
} */

.pic {
  text-align: center;
}
.pic img {
  width: 30%;
  padding: 1%;
  display: inline-block;
}

.extra-link {
  font-family: 'Special Elite', cursive;
  color: white;
  background-color: black;
  padding: 0.75% 1% 0.5% 0.75%;
}

.portrait {
  margin-bottom: -17.5%;
}

#contact {
  text-align: center;
}

.social-icons:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 1100px)
{
  h2 {
    font-size: 170%;
  }

  .text-block {
    font-size: 80%;
  }

  .name p {
    font-size: 150%;
  }

  .resume-sec .left-side, .resume-sec .right-side, .writing img, .writing .abstract {
    display: block;
    float: none;
    width: 92%;
    padding:3% 0;
    margin: 0 auto;
  }

  .resume-sec .left-side h4 {
    text-align: left;
    padding-left: 1%;
  }

  .resume-sec .right-side {
    padding-left: 6%;
  }

  #fb-about {
    font-size: 90%;
  }

  .writing img {
    width: 75%;
  }

  .portfolio-h {
    margin: 5% 0% 3% 0%;
  }
}

@media screen and (max-width:680px)
{
  h2 {
    font-size: 150%;
    padding: 6% 0 2% 0;
  }

  #write {
    top: 43%;
    left: 13%;
  }

  #work {
    top: 30%;
    left: 29%;
  }

    #do {
    top: 57%;
    left: 26%;
  }

/* old go, new email (contact) */
    #email {
    top: 71%;
    left: 9%;
  }

  #social {
    top: 90%;
    left: 38%;
  }

/*  #email {
    top: 83%;
    left: 70%;
  }
*/

/* INDEX-PAGE */
  #index #write {
    top: 43%;
    left: 13%;
  }

  #index #work {
    top: 30%;
    left: 29%;
  }

  #index #do {
    top: 57%;
    left: 26%;
  }
/* old go, new email (contact) */
  #index #email {
    top: 71%;
    left: 9%;
  }

  #index #social {
    top: 90%;
    left: 38%;
  }
/*
  #index #email {
    top: 83%;
    left: 70%;
  }
*/

  p, li {
    padding-bottom: 5%;
  }

  .resume-sec p {
    padding-bottom: 3%;
  }

  .container {
    width: 95%;
  }
  #fake-fb img, #fb-about {
    display: block;
    float: none;
    width: 92%;
    padding:3% 0;
  }

  #fake-fb img {
    width: 50%;
  }

  .pic img {
    display: block;
    float: none;
    width: 80%;
    margin: 0 auto;
    padding: 4%;
  }

  .portrait {
    margin-bottom: 0;
  }

  #about_me img {
    display: block;
    float: none;
    width: 60%;
    margin: 0 auto;
    padding: 4%;
  }
}