@import url(/css/colors.css);
@import url(/css/nav.css);
@import url(/css/profile.css);
@import url(/css/aboutme.css);
@import url(/css/profile.css);
@import url(/css/workexperience.css);
@import url(/css/projects.css);
@import url(/css/qualifications.css);
@import url(/css/volunteering.css);

@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

/* set padding to 0 unless other styles are applied */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family:"Poppins",sans-serif;
}

.main {
    width: clamp(300px, 80vw, 1200px);
    margin: 0 auto;
    background: transparent;
}

/*smooth scroll when navigating on page, not between pages */
html {
    scroll-behavior: smooth;
}

/* text styling */

p {
    color: black;
    font-size: 20px;
    margin: 20px 0px 20px 0px;
    text-justify: distribute;
}

h1, h2 {
    font-size:  3rem;
      margin: 10px 10px 0px 0px;
}

h3 {
    font-size:  2rem;
    margin: 10px 10px 0px 0px;
  
}
h4 {
    font-size:  1rem;
    margin: 10px 10px 0px 0px;
  
}

blockquote {
    font-style: italic;
    border-left: var(--dark-green) 3px solid;
    padding-left: 10px;
    font-size: 20px;
}

footer {
    margin: 20px 0px 20px 0px;
}

figure {
  text-align: center;
  margin: 1rem 0;
}

figcaption {
  color: black;
  font-size: 1rem;
  font-style: italic;
  margin-top: 0.5rem;
  display: block;
}

a {
    color: black;
    text-decoration-color: grey;
    transition: all 300ms ease;
    text-decoration: none;
}

/*link hover state */
a:hover {
    color: grey;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-color: rgb(181, 181, 181);
    transition: all 300ms ease;
}

/* sections where underlines should be visible for links */
.about_list a, 
.workexptable a, 
.work-experience-container a {
    text-decoration: underline;
}



.logo {
    font-size: 2rem;
}
/* logo hover state so that cursor stays same*/
.logo:hover{
    cursor: default;
}

section {
    padding-top: 4vh;
    padding: 7rem 10rem;
    box-sizing: border-box;
    min-height: fit-content;
}

.section container {
    display: flex;
}

/* buttons */

.intro_button_container {
    display: flex;
    justify-content: left;
    gap: 1rem;
}

.button {
    font-weight: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 13rem;
    border-radius: 2rem;
    transition: all 300ms ease;
}

.button-white, .button-green {
    border: var(--dark-green) 0.1rem solid;
    box-shadow: 0 4px 8px var(--shadow-soft);  /* soft shadow for depth */
}

.button-white:hover, .button-green:hover {
    cursor: pointer;
}

.button-white, .button-green:hover {
    background: var(--dark-green);
    color: white;
}

.button-white:hover {
    background: rgb(0, 0, 0);
    box-shadow: 0 6px 12px var(--shadow-hover);  /* darker shadow on hover */
    
}
.button-green {
    background: none;
}

.button-green:hover {
    border: rgb(255, 255, 255) 0.1rem solid;
}

.pdf-container, .pdf-container-before, .pdf-container-after {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  height: 100vh;
  box-sizing: border-box;
}

.pdf-viewer {
  flex: 1;
  border: 1px solid #ccc;
  overflow: hidden;
  height: 100%;
}

.pdf-viewer iframe {
  width: 100%;
  height: 100%;
  overflow: auto;
}