:root {
    --font-size-sm: clamp(0.94rem, -0.09vw + 0.96rem, 0.89rem);
    --font-size-base: clamp(1.25rem, -0.11vw + 1.28rem, 1.19rem);
    --font-size-md: clamp(1.67rem, -0.15vw + 1.7rem, 1.58rem);
    --font-size-lg: clamp(2.22rem, -0.2vw + 2.27rem, 2.11rem);
    --font-size-xl: clamp(2.96rem, -0.27vw + 3.03rem, 2.81rem);
    --font-size-xxl: clamp(3.95rem, -0.36vw + 4.04rem, 3.75rem);
    --font-size-xxxl: clamp(5.26rem, -0.48vw + 5.38rem, 5rem);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Jost', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
    color: #333;
    font-size: var(--font-size-base);
}

/* Header and Navigation */

header, nav {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 2em 0;
}

nav {
    top: 0;
    position: sticky;
    z-index: 99999;
}

.container {
    margin: 0 auto;
    max-width: 1600px;
}


nav a {
    color: #fff;
    text-decoration: none;
    padding: 0.5em 1em;
    margin: 0 1em;
    text-transform: uppercase;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    font-family: "utopia-std-display", serif;
}
a:hover {
   color: #c5c0f6;
}
#email a:hover {
    color: #c5c0f6;}

/* Headings */
h1, h2 {
    text-transform: uppercase;
    font-family: "utopia-std-display", serif;
    font-weight: 700;
    font-style: normal;
}

h1 {
    font-size: var(--font-size-xxxl);
}
h2 {
    font-size: var(--font-size-xxl);
}
h3 {
    font-size: var(--font-size-xl);
}
h4 {
    font-size: var(--font-size-lg);
}
h5 {
    font-size: var(--font-size-md);
}

#about {
    padding: 6em 0 9em;
}
#about h4{
    text-transform: uppercase;
    font-family: "utopia-std-display", serif;
}

#email a {
    font-family: "utopia-std-display", serif;
    color: #64b5ed;
    font-weight: 700;
    font-size: larger;
    display: block; /* Make the link a block element */
    margin: 0 auto; /* Center the block element */
}

header p, h1{
 margin: 0 auto;
    width:90% ;
}

/* Main Content */
main {
    padding: 2em;
}

section {
    margin-bottom: 2em;
}

/* Image Styles */
.image {
    position: relative;
    overflow: hidden;
    /* border-radius: 1em; */
}

.image img, #pfp {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    object-fit: cover;
   
}
.about-image{ margin: auto;}
   
#pfp {
    border-radius: 2em;
}

.image:hover img {
    transform: scale(1.1);
}

/* Gallery Styles */
#gallery {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
    grid-gap: 1%;
    position: relative;
    z-index: 2; 
    overflow: hidden;
    bottom: 20%;
}


/* Banner Styles */
#banner {
    color: black;
    position: relative;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 2em 0;
    background-image: url('banner.jpg');
    height: calc(100vh - 190px);
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}

/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    font-size: var(--font-size-sm)
}

/* About Section */
.about-content {
    display: flex;
    flex-direction: row;
    gap: 2em;
}

.about-image {
    flex: 1;
    margin-right: 1em;
}

.about-text {
    flex: 2;
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    #gallery {
        grid-template-columns: 1fr;
    }

    .about-content {
        flex-direction: column;
    }
    header p{
        margin: -3%;
        margin-left: 0;
    }
}