/* Main */
:root {
  --main: #1A2966;
  --alt: #DC554F;
  --highlight: #14bec3;
  --background: #eee;
}

html {
  font-size: 1.3rem;
}
body {
  background-color: var(--background);
  color: var(--main);
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  text-align: center;
  min-width: 370px;
}
h1, h2, h3, h4 {
  font-weight: 700;
}
.wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0 .5rem;
}
main {
  margin: 7rem auto 2rem;
  max-width: 100%;
}
a {
  color: var(--main);
}
a:hover {
  color: #DC554F;
}
a:link {
  text-decoration: none;
}
.navigation {
  font-size: 1.1rem;
}
footer {
  font-size: .9rem;
  display: block;
  margin: 3rem 0;
  padding-left: 3rem;
}
.footer-nav {
  margin-bottom: 0.5rem;
}
.footer-copyright {
  font-size: 0.75rem;
}
#nav-contact .nav-contact a,
#nav-publications .nav-publications a,
#nav-resume .nav-resume a {
  color: var(--alt);
}

/* Home */
p {
  font-family: 'Bree Serif', serif;
  text-align: center;
  font-size: 1.1rem;
  font-size: clamp(1.1rem, 0.45rem + 2.6vw, 2.4rem);
  line-height: 1.5rem;
  line-height: clamp(1.5rem, 1rem + 2vw, 2.5rem);;
}
.under-position {
  position: relative;
}
.under {
  position: absolute;
  top: 1.9em;
  left: -12em;
  font-size: .55em;
  line-height: 1em;
  width: 10em;
  color: var(--alt);
  font-family: 'Dancing Script', cursive;
  text-align: right;
}
.emoji {
  width: 1.2em;
  height: 1.2em;
}
#prexel, #california {
  margin-left: .2em;
}
 #dog {
   margin-left: .4em;
 }
 #boba {
   margin-left: -.2em;
 }

/* Contact */
#contact ul {
  list-style: none;
  padding-left: 3rem;
}
#contact li {
  line-height: 2rem;
  padding: .4rem 0;
}
.social-container {
  position: relative;
}
.social-container:hover {
  color: var(--alt);
}
.social-icon {
  display: inline-block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  left: -2.6rem;
  top: -.4rem;
}
footer .social-icon {
  top: -.5rem;
}
#linkedin {
  background: url("../img/linkedin.svg") 0%/2rem no-repeat;
}
.social-container:hover #linkedin {
  background: url("../img/linkedin-hover.svg") 0%/2rem no-repeat;
}
#twitter {
  background: url("../img/twitter.svg") 0%/2rem no-repeat;
}
.social-container:hover #twitter {
  background: url("../img/twitter-hover.svg") 0%/2rem no-repeat;
}
#instagram {
  background: url("../img/instagram.svg") 0%/2rem no-repeat;
}
.social-container:hover #instagram {
  background: url("../img/instagram-hover.svg") 0%/2rem no-repeat;
}
#powerpage {
  background: url("../img/powerpage.svg") 0%/2rem no-repeat;
}
.social-container:hover #powerpage {
  background: url("../img/powerpage-hover.svg") 0%/2rem no-repeat;
}
#email {
  background: url("../img/email.svg") 0%/2rem no-repeat;
}
.social-container:hover #email {
  background: url("../img/email-hover.svg") 0%/2rem no-repeat;
}
#jason-email {
  display: inline-block;
  position: inherit;
  top: .5rem;
  width: 8rem;
  line-height: 2rem;
  background: url("../img/jason-email.png") no-repeat;
  background-size: 8rem;
}
.social-container:hover #jason-email {
  background: url("../img/jason-email-hover.png") no-repeat;
  background-size: 8rem;
}

/* Publications */
#publications ul {
  list-style: none;
  padding: 0;
}
#publications li {
  margin-top: 1.5rem;
}
#publications img {
  display: inline-block;
  height: 5rem;
  width: 3.22rem;
  vertical-align: top;
}
#publications a {
  margin-top: 2rem;
  width: 15rem;
  height: 5rem;
  display: block;
  margin: 0 auto;
}
.pub-text {
  width: 10rem;
  margin-top: 1rem;
  display: inline-block;
  text-align: left;
}
#publications span {
  font-size: .7rem;
}

/* Portfolio */
#portfolio {
  max-width: 50rem;
  margin-top: 2rem;
}
#portfolio .portfolio-bio {
  margin: 1rem auto;
  padding: 0 3rem;
  text-align: left;
  line-height: 1.4;
}
#portfolio .portfolio-bio p {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 0.6rem;
  color: var(--main);
}
#portfolio .featured-project {
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: rgba(26, 41, 102, 0.05);
  border-left: 4px solid var(--alt);
}
#portfolio .featured-project h2 {
  font-size: 1.3rem;
  color: var(--alt);
  margin-bottom: 1rem;
}
#portfolio .featured-content {
  text-align: left;
}
#portfolio .featured-content p {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
#portfolio .featured-content ul {
  list-style: none;
  padding-left: 0;
}
#portfolio .featured-content li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
#portfolio .featured-screenshots {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
#portfolio .screenshot-item {
  flex: 1;
  min-width: 150px;
  max-width: 250px;
  text-align: center;
}
#portfolio .screenshot-item a {
  display: block;
  text-decoration: none;
  transition: transform 0.2s;
}
#portfolio .screenshot-item a:hover {
  transform: translateY(-5px);
}
#portfolio .screenshot-item img {
  width: 100%;
  height: auto;
  border: 2px solid var(--main);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}
#portfolio .screenshot-item a:hover img {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#portfolio .screenshot-caption {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: var(--main);
  font-weight: 500;
}
#portfolio .portfolio-section {
  margin: 3rem auto 2rem;
  text-align: left;
}
#portfolio .portfolio-section h3 {
  font-size: 1.2rem;
  color: var(--main);
  border-bottom: 2px solid var(--highlight);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
#portfolio .portfolio-list {
  list-style: disc;
  padding-left: 2rem;
}
#portfolio .portfolio-list li {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
  transition: border-color 0.2s;
}
#portfolio .portfolio-list li:hover {
  border-left-color: var(--highlight);
}
#portfolio .portfolio-list strong {
  color: var(--main);
  font-weight: 700;
}
#portfolio .books-section {
  margin: 3rem auto 2rem;
}
#portfolio .books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  margin-top: 1.5rem;
}
#portfolio .book-item {
  text-align: center;
}
#portfolio .book-item a img {
  width: 100%;
  max-width: 150px;
  height: auto;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
#portfolio .book-item:nth-child(1) a img,
#portfolio .book-item:nth-child(2) a img {
  height: 225px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
#portfolio .book-item a:hover img {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
#portfolio .book-info {
  margin-top: 0.75rem;
  text-align: center;
}
#portfolio .book-info h4 {
  font-size: 0.85rem;
  margin: 0.5rem 0 0.25rem 0;
  line-height: 1.3;
}
#portfolio .book-info h4 a {
  color: var(--main);
  text-decoration: none;
}
#portfolio .book-info h4 a:hover {
  color: var(--alt);
}
#portfolio .book-info p {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #666;
  line-height: 1.3;
}
#portfolio .book-year {
  font-weight: 500;
  color: var(--highlight);
}
#portfolio .book-isbn {
  font-size: 0.7rem;
}
#portfolio .book-publisher {
  font-style: italic;
}
@media (max-width: 768px) {
  #portfolio .books-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
}
@media (max-width: 480px) {
  #portfolio .books-grid {
    grid-template-columns: 1fr;
  }
}

/* Resume */
#resume {
  max-width: 30rem;
}
#resume ul {
  text-align: left;
}
#resume li {
  margin-bottom: 1rem;
  font-size: .8rem;
}
#resume h1, h2, h3, h4 {
  margin: 0 auto;
  font-weight: normal;
}
#resume h1 {
  font-size: 1.5rem;
}
#resume h2 {
  font-size: 1.2rem;
  margin-top: 2.5rem;
  color: var(--alt);
}
#resume span {
  color: var(--highlight);
}
#resume h4#address {
  margin-top: 2rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--highlight);
}