/* 2. Navigation Styles */
nav {
    background: transparent; /* Background for the nav */
    color: black;
    padding: 12px; /* Padding around the nav */
    position: fixed; /* Keeps the nav fixed at the top */
    width: 100px; /* Set a width for the nav box */
    top: 80px; /* Align to the top with some margin */
    right: 150px; /* Align to the left with some margin */
    z-index: 1000; /* Ensure it stays above other content */
    text-align: right; /* Align the text to the right */
    height: 60px; /* Set a fixed height for the nav */
}

/* .nav-projects {
    background: lightgreen;  Change background for projects 
    color: black;  Change text color 
} 

.nav-creativity {
    background: lightcoral;  Change background for creativity 
    color: black;  Change text color 
} */

nav .logo {
    text-align: right; /* Center the logo */
    margin-bottom: 0; /* Space below the logo */
}

nav .logo-image {
    width: 40px; /* Set the width of the logo image */
    height: 40px; /* Set the height of the logo image */
    border-radius: 50%; /* Make the image round */
    object-fit: cover; /* Ensure the image covers the area without distortion */
}


nav .logo-image:hover {
    transform: scale(1.1); /* Scale the logo image to 110% on hover */
}


nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    text-align: right; /* Align the links to the right*/
    margin-top: 0; /* Remove margin above the list */
}

nav ul li {
    margin: 1px 0; /* Space between navigation items */
}

nav a {
    color: black;
    font-weight: bold; /* Make the font bold */
    font-size: small;
    text-decoration: none;
    padding: 5px; /* Add padding for better click area */
    position: relative; /* Position relative for pseudo-element */
    transition: color 0.3s; /* Smooth transition for text color */
}

.nav-about a {  
    /*background: lightblue; /* Change background for about */
    color: white; /* Change text color */
}

.nav-home a {  
    /*background: lightblue; /* Change background for about */
    color: rgb(255, 255, 255); /* Change text color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add a black gradual shadow */
}

nav a:hover {
    background: rgba(255, 255, 255, 0); /* Light background on hover */
    border-radius: 5px; /* Rounded corners on hover */
    font-size: smaller; /* Increase font size on hover */
    color:gray
}

.nav-home a:hover{
    color: black;
}

nav .external-links {
    display: grid; /* Use flexbox for alignment */
    /*justify-content: grid-end; /* Align the logos to the right */
    grid-template-columns: repeat(2, 1fr); /* Create a 2x2 grid */
    direction: rtl; /* Set the direction to right-to-left */
    margin-top: 0px; /* Space above the grid */
    /*gap: 0px; /* Space between grid items */
    max-width: 40px; /* Set a maximum width for the grid */
    margin-left: 60px;
    margin-top:-15px;
}

nav .external-links a {
    display: block; /* Make the anchor a block element */
    margin-left: 0px; /* Space between logos */
}

nav .external-links img {
    width: 20px; /* Set a smaller width for the logos */
    height: 20px; /* Set a smaller height for the logos */
    object-fit: contain; /* Ensure logos maintain aspect ratio */
    transition: transform 0.3s; /* Smooth transition for scaling */
}

nav .external-links img:hover {
    transform: scale(1.1); /* Scale the logo on hover */
}

#circle {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: fixed;
    transition: all 0.01s ease-in-out;
    right: 155px;
}
/*---------HOMEPHRASE --------------------------------------------*/
#homephrase {
    font-weight: bold;
    color: rgb(0, 0, 0);
    font-size: small;
    display: none; /* Initially hide the homephrase */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Start with opacity 0 for fade effect */
    transition: opacity 1s ease, visibility 1s ease; /* Smooth transition for opacity and visibility */
}

#homephrase.show {
    display: block; /* Show the element */
    opacity: 1; /* Fade in to full opacity */
    visibility: visible; /* Make it visible */
}
#homephrase p:first-of-type {
    position: absolute;
    top: 26px; /* Adjust the top position as needed */
    left: -50px; /* Adjust the left position as needed */
    max-width: 600px;
}

#homephrase p:nth-of-type(2) {
    position: absolute;
    top: 46px; /* Adjust the top position as needed */
    left: -113px; /* Adjust the left position as needed */
    max-width: 600px;
}

#homephrase p:nth-of-type(3) {
    position: absolute;
    top: 46px; /* Adjust the top position as needed */
    left: 110px; /* Adjust the left position as needed */
    max-width: 600px;
}

#homephrase p:nth-of-type(4) {
    position: absolute;
    top: 66px; /* Adjust the top position as needed */
    left: 12px; /* Adjust the left position as needed */
    max-width: 600px;
}

#homephrase p:nth-of-type(5) {
    position: absolute;
    top: 86px; /* Adjust the top position as needed */
    left: -15px; /* Adjust the left position as needed */
    max-width: 600px;
}

#homephrase p:nth-of-type(6) {
    position: absolute;
    top: 86px; /* Adjust the top position as needed */
    left: 110px; /* Adjust the left position as needed */
    max-width: 600px;
}
/*----------–––––––––––––––––––––––––––––––––--------------*/


/* –––––––––––Dropdown Styles ––––––––––––––––––––––––- */
.dropdown-btn {
    display: none;
}
/* Dropdown Styles */
/* Removed duplicate .dropdown-content block */

/* Dropdown container (hidden by default) */
#dropdown {
    display: none; /* Hide by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: rgba(0, 0, 0, 0.846); /* Dark background with slight transparency */
    text-align: center;
    z-index: 1000; /* Ensure it appears above other content */
    transition: opacity 0.3s ease-in-out;
}

/* Show the dropdown when active */
#dropdown.show {
    display: block;
}

/* Style the list */
#dropdown ul {
    list-style: none;
    padding: 0;
    margin-top: 20vh; /* Centering effect */
}

/* Style each list item */
#dropdown ul li {
    margin: 2px 15px;
}

/* Style the links */
#dropdown ul li a {
    font-size: 40px;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    color: white;
    display: block;
    transition: color 0.3s ease-in-out;
}

/* Hover effect */
#dropdown ul li a:hover {
    color: rgba(255, 255, 255, 0.695); /* Change text color on hover */
    font-size: 42px; /* Increase font size on hover */
}



.dropdown-content.show {
    display: block;
}


/* Show dropdown when active */

/*-----------------------*/

/* Styles for screens smaller than 600px */
@media (max-width: 920px) {
    nav ul{
        display: none;
    }

    nav .external-links {
        grid-template-columns: repeat(1, 1fr); /* Create a 2x2 grid */
        transform: translate3d(0, 20px, 0);
    }

    nav .external-links a {
        display: block; /* Make the anchor a block element */
        margin-top: -3px; /* Space between logos */
        margin-bottom: -3px;
        transform: translateX(120px);
    }

    nav .logo-image {
        width: 23px; /* Set the width of the logo image */
        height: 23px; /* Set the height of the logo image */
        border-radius: 50%; /* Make the image round */
        object-fit: cover; /* Ensure the image covers the area without distortion */
        transform: translateX(120px);
        transition: transform 0s, scale 0.3s;
    }
    nav .logo-image:hover {
        transform: translateX(120px) scale(1.1); /* Scale the logo image to 110% on hover */
    }

    #circle {
        display: none;
    }

    #homephrase {
        display: none; /* Initially hide the homephrase */
        visibility: hidden; /* Initially hidden */
    }


    .dropdown-btn {
        display: block;
        background-color: rgb(0, 0, 0);
        color: rgba(255, 255, 255, 0.84);
        padding:  5px 2px;
        border: none;
        cursor: pointer;
        font-size: 10px;
        border-radius: 15px;
        width: 18px;
        height: 18px;
        text-align: bottom;
        padding: 0;
        transform: translate3d(195px,1px,0);
        transition: transform 0.3s;
    }

    .nav-about .dropdown-btn {
        background-color: white;
        color: black; /* Change text color */
    }

    .dropdown-btn:hover {
        transform: translate3d(195px,1px,0) scale(1.1);
    }
    
}