@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Special+Gothic+Expanded+One&display=swap');
:root {
    --primary-color:#48AD84;
    --primary-accent:rgb(80, 76, 69);
    --secondary-color:#FF5E5B;
    --tertiary-color:#3B322C;
    --text-color:#092327;
    --light-text-color:#f0efef;
    --content-color:#EBEBD3;
    --page-background:#f4e8bf;
}

h1, h2, h3{
    font-family: "Special Gothic Expanded One", sans-serif;
}
h4{
    font-family: "Raleway", sans-serif;
}
a{
    color:#025FE9;
}

body {
    background-color: var(--page-background);
    font-family: "Rubik", sans-serif;
    margin-bottom:5%;
}

.content{
    background-color: var(--content-color);
    color: var(--licorice);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    margin: 0 auto;
    border-radius:0 0 15px 15px;
    border: 1.5px solid var(--tertiary-color);
}

.content h1 {
    margin-bottom: 0;
}
.content h2{
    text-align:center;
}

.content-header{
    background-color:var(--primary-color);
    padding-top:15px;
    margin:0;
    width:100%;
    box-sizing:border-box;
    border-radius:15px 15px 0 0;
    color:var(--text-color);
}

#portrait{
    margin:auto;
    display:block;
    border-radius:175px;
    width:75%;
}

.content-header h4{
    margin-left:12px;
}

#homeNavigation {
    display: flex;
    justify-content: center;
    text-align: center;
}


#homeNavigation button, #homeNavigation a {
    text-decoration: none;
    color: var(--text-color);
    border:var(--primary-accent) 1px solid;
    border-radius: 20px;
    padding:10px;
    background-color:var(--secondary-color);
    display:flex;
    flex-direction:column;
    margin-bottom:15px;
    width:100%;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    #homeNavigation button, #homeNavigation a {
        display: flex; /* Ensure the button content is a flex container */
        flex-direction: column; /* Stack the icon and text vertically */
        align-items: center; /* Center the icon and text horizontally */
        text-align: center; /* Center-align the text */
    }

    #homeNavigation button i, #homeNavigation a i {
        display: block; /* Ensure the icon behaves like a block element */
        margin: 0 auto; /* Center the icon horizontally */
    }

    #homeNavigation button span, #homeNavigation a span {
        margin-top: 5px; /* Add spacing between the icon and the text */
        text-align: center; /* Ensure the text is centered */
    }
}

#homeNavigation button:hover, #homeNavigation a:hover {
    /* background-color: var(--text-color);
    color:white; */
    transform: scale(1.05);
}

#homeNavigation button.selected-button {
    background-color: var(--text-color);
    color: white;
}

#projects img, #projects .responsive-iframe-container{
    margin-bottom:19px;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.responsive-iframe-container {
    position:relative;
    width:100%;
    padding-top: 56.25%;
    overflow:hidden;
}

.responsive-iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
}

#art img{
    display:block;
    margin: auto;
    width:100%;
    border-radius:15px;
}

.flex-column{
    flex-direction:column;
}

.highlight-text {
    color: var(--primary-color);
    font-weight: bold;
    text-shadow: 
    -1.5px -1.5px 0 var(--text-color), /* Top-left shadow */
    1.5px -1.5px 0 var(--text-color),  /* Top-right shadow */
    -1.5px 1.5px 0 var(--text-color),  /* Bottom-left shadow */
    1.5px 1.5px 0 var(--text-color),   /* Bottom-right shadow */
    0 -1.5px 0 var(--text-color),    /* Top shadow */
    0 1.5px 0 var(--text-color),     /* Bottom shadow */
    -1.5px 0 0 var(--text-color),    /* Left shadow */
    1.5px 0 0 var(--text-color);     /* Right shadow */
}

#contactIcons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,auto);
    justify-items:center;
    text-align:center;
    padding:20px;
    max-width: 450px;
    margin: 0 auto;
}
#contactIcons a{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:inherit;
    transition: transform 0.3s ease, color 0.2s ease;
}
#contactIcons a:hover{
    transform: scale(1.05);
    color:var(--secondary-color);
}
#contactIcons i{
    margin-bottom:10px;
}

.centered-text {
    text-align: center;
} 

@keyframes fadeIn {
    from {
        opacity: 0;
        transform:translateY(50px);
    }
    to {
        opacity: 1;
        transform:translateY(0);
    }
}
#projects, #art, #contact {
    animation-name:fadeIn;
    animation-duration: .5s;
    animation-timing-function:ease-out;
}

.img-thumbnail {
    width: 100%; /* Ensure thumbnails are responsive */
    height: 400px; /* Set a fixed height for uniform size */
    object-fit: cover; /* Crop the image to fit the thumbnail */
    border-radius: 10px; /* Optional: Add rounded corners */
    transition: transform 0.3s ease; /* Smooth transition effect */
}
.img-thumbnail:hover{
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    cursor:zoom-in; /* Change cursor to indicate zoom effect */
}

#modalImage{
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
    display:block;
    margin:auto;
}

.modal-content{
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:transparent;
    border:none;
    box-shadow:none;
}
.modal-body{
    padding:0;
    text-align:center;
}
.modal-backdrop{
    background-color:rgb(0, 0, 0);
}
.modal img{
    cursor:zoom-out;
}
.modal p{
    color:var(--light-text-color);
    font-size:1.2rem;
    margin-top:10px;
}

@media (max-width: 768px) { /* Target screens smaller than Bootstrap's md breakpoint */
    #contact .content {
        margin-bottom: 1.5rem; /* Add margin below the first content container */
    }
}