@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kalam:wght@300;400;700&family=Lugrasimo&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --font-size: 16px
}

.montserrat-alternates-semibold, .home-intro h2, .home-intro .home-cta, .card-footer a {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.montserrat-alternates-bold, .home-intro h1, .workCards .card h3,.blog-content h1 {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kalam-regular, nav text {
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
}

.kalam-bold, .home-intro .name-highlight {
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-style: normal;
}


.inter-regular, .home-intro .intro-text-1 .intro-text-2, .workCards .card p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter-boldItalic, .home-intro .highlight-link {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background: linear-gradient(
        to bottom,
        #FFFFFF 11%,
        #D3ECFF 100%
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
}

nav {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    z-index: 10;
    position: fixed;
    width: 100%;
}

path#endHomeButtonOutline,
path#endHomeButtonFill,
path#endWorkButtonOutline,
path#endWorkButtonFill,
path#endBlogButtonOutline,
path#endBlogButtonFill {
    visibility: hidden;
}

nav text {
    visibility: visible;
    font-size: 1.125em;
    color: black;
}

/* Home Page Intro */

.home-intro {
  padding-top: 29vh;
  padding-left: 5%;
  padding-right: 5%;
  height: 100vh;
  width: 100vw;
}

/* Heading Styles */

.home-intro h1 {
  font-size: 38px;
  margin: 5px;
  margin-left: .01vw;
}

.home-intro .name-highlight {
    color: #FE6B11;
}

/* Subheading */

.home-intro h2 {
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: .03vw;
    margin-right: 5px;
    font-size: 24;
    color: #444444;
}

/* Text */
.home-intro .intro-text-1 .intro-text-2 {
    max-width: 600px;
    line-height: 1.5;
    font-size: 18px;
    color: #333333;
}

.home-intro .highlight-link {
    color: #FE6B11;
    text-decoration: none;
}

.home-intro .intro-text-1 {
  padding-top: 10px;
  border-bottom-width: 10px;
  margin-right: 20vw;
  margin-bottom: 1vh;
  line-height: 32px;
}

.home-intro .intro-text-2 {
  margin-right: 30vw;
  margin-top: 1vh;
  line-height: 32px;
}

.home-intro .home-cta, .card-footer a {
  background-color: #FF6161;
  color: #FFFFFF;
  border-style: hidden;
  font-size: 14px;
  border-color: transparent;
  padding: 10px;
  margin-top: 1rem;
  border-radius: 9px;
  margin-bottom: 1rem;
}

/* Project Showcase (work.html) */
.workCards {
  display: flex;
  padding-top: 15%;
  height: auto;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

.workCards .card {
  width: 24rem;
  margin: 3%;
  background-color: rgb(214, 238, 255);
  border-radius: 4%;
  padding: 2%;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 2%;
}

.card-footer a {
  background: linear-gradient(180deg, #FFE1CE 0%, #FFC8A7 50%, #FF8032 100%);
  color: #000000;
  border-style: hidden;
  font-size: 14px;
  border-color: transparent;
  padding: 10px;
  margin-top: 2vh;
  border-radius: 5px;
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
}

.card-footer a:hover {
  background: linear-gradient(180deg, #F65E00 20%, #FFA36B 100%);
  color: white;
  border-bottom: transparent;
}

/* Blog View Page */
.blog-container {
  padding: 1rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  max-width: 100vw;
}

.blog-post {
  margin: 3.8rem auto;
  max-width: 83ch;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  border: 0.0625rem solid #000000;
  box-shadow: 0.375rem 0.375rem 0.25rem #000000;
  border-radius: 0.75rem;
  padding: 3rem;
}

.blog-post h3 {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.9375rem;
  letter-spacing: 0.01em;
}

.blog-post h5 {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.9375rem;
  text-align: center;
  padding: 0.5rem;
}

.blog-post p {
  max-width: 72ch;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
}

.blog-post img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.blog-post button {
  margin-top: 1rem;
  background: linear-gradient(180deg, #FFE1CE 0%, #FFC8A7 50%, #FF8032 100%);
  border-color: transparent;
  border-top: transparent;
  border-radius: 5px;
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  padding: 0.6rem 1.2rem 0.6rem 1.2rem;
}

.blog-post button:hover {
  background: linear-gradient(180deg, #F65E00 20%, #FFA36B 100%);
  color: white;
  border-bottom: transparent;
}

.blog-post button a {
  text-decoration: none;
  color: black;
}

.blog-post button a:hover {
  text-decoration: none;
  color: white;
}

/* Individual blog pages */
.blog-content {
  max-width: 720px; 
  margin: 0 auto;   
  padding: 2rem 1.5rem; 
  font-family: 'Inter'; 
  color: #333;      
  line-height: 1.6; 
}

.blog-content h1 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em; 
}

.blog-content h1 + h3 {
  margin-top: 0;
  margin-bottom: 2rem; 
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.9375rem;
  text-align: center;
  padding: 0.5rem;
}

.blog-content img {
  display: block;
  width: 100%;      
  height: auto;    
  border-radius: 4px; 
  margin: 2rem 0;    
  object-fit: cover;
}

.blog-content p {
  margin-bottom: 1.5rem;
  font-size: 1.125rem; 
}

body.blog-page {
  background: white;
}

.blog-content blockquote {
  background-color: #f0f8ff;
  border-left: 5px solid #FE6B11;
  margin: 1.5em 0;
  padding: 1em 1.5em;
  font-style: italic;
  color: #444;
}

.blog-content blockquote p {
  margin-bottom: 0;
}