@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

/* Color Pallete */
:root {
    --primary-color: black;
    --secondary-color: white;
    --accent-color: rgb(0, 89, 255); 
    --background-color: rgb(244,242,238);
    --text-color: rgb(72, 76, 84); 
    --accent-text-color: rgb(119, 103, 72);
}

.uppercase {
    text-transform:uppercase;
}

html, body {
    height: 100%; /* Ensures that the html and body are full height */
    margin: 0; /* Removes default margin */
}

body {
    font-family:'Merriweather', serif;
    background-color: var(--background-color);
}

.muted {
    color: var(--text-color);
}

h2 {
    font-size: 2em;
    font-weight:500;
    color: var(--text-color);
}

h3 {
    font-size: 1.5em;
    color: var(--accent-text-color);
    text-transform:uppercase;
}


.profile_picture {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border-width: 5px;
    border-style:solid;
    border-color:#f8f8f8;
    /* Adding shadow effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1), /* Primary shadow for bottom and right edges */
                0 6px 20px rgba(0,0,0,0.1); /* Secondary shadow for additional diffused effect */
}

.link {
    color: var(--accent-color);
    font-weight: bold;
    transition: color 0.3s ease; /* Adds transition */
}

/* Optional: Change color on hover for both icon and title */
.link:hover, .link:hover .icon-title{
    color: #003c8a; /* Change color on hover */
}

.icon-link {  /* Style for the anchor tag */
    display: block;
    text-align: center; /* Aligns the icon and text centrally */
    text-decoration: none; /* Removes underline from links */
}

.icon-title {  /* Style for the title under the icon */
    font-size: 1em; /* Adjust as needed */
    margin-top: 8px; /* Space between icon and title */
}


.content-section {
    background-color: #f8f8f8; /* Off-white background */
    border-radius: 15px; /* Curved corners */
    padding: 20px;
    margin-bottom: 20px; /* Space between sections */
    
    /* Adding shadow effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05), /* Primary shadow for bottom and right edges */
                0 6px 20px rgba(0,0,0,0.05); /* Secondary shadow for additional diffused effect */
  }
  

#projects-section {
    margin-left: 10%;
    margin-right: 10%;
}

.project-item {
    list-style: none; /* Remove default list styling */
    padding: 20px; /* Padding for each list item */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
}

.project-info {
    min-height: 300px;
}

.thumbnail img {
    margin: 0;
    width: 100%;
    height: 300px;
    border-radius: 15px; 
    object-fit: cover; 
    border-radius: 15px;
     /* Adding shadow effect */
     box-shadow: 0 4px 8px rgba(0,0,0,0.3), /* Primary shadow for bottom and right edges */
     0 6px 20px rgba(0,0,0,0.3); /* Secondary shadow for additional diffused effect */
    transition: box-shadow 0.3s ease; /* Add transition effect */
}

.thumbnail img:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0), 
                0 6px 20px rgba(0,0,0,0); 
}

.project-title {
    font-size: 1.2em; /* Larger font size */
    font-weight: bold;
}

.project-subtitle {
    font-size: 1em;
    color: #666;
}

.project-description {
    font-size: 1em;
}