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


/*Main navbar*/
.navbar {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    overflow: visible;
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    width: 100%;
    top: 0;
    padding: 10px 20px;
    z-index: 20;     
    font-family: "Audiowide";
    -webkit-backdrop-filter: blur(5px);    
    backdrop-filter: blur(5px);
    background: transparent;
}


/* Style for buttons in the navbar */
.navbar button {
    color: white;
    border: none;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;
    font-family: "Audiowide";
    background: transparent;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 10;
}


/*CREATE STYLE FOR HOVER BEHAVIOR*/
.navbar button::before 
{
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 5px;
    background: inherit;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    z-index: -1;
    transition: all 0.5s ease;
}




.navbar button:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white; 
}
/*STYLE FOR HOVER BEHAVIOR END*/






/* Style for the anchor tags inside the buttons */
.navbar button a {
    color: white;
    text-decoration: none;
}



/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown button */
.dropbtn {
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    border-radius: 5px;
    visibility: hidden;
    position: absolute;
    background: rgba(0, 255, 255, 0.4);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%; 
    left: 0;   
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Show the dropdown content when hovering over the dropdown */
.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

/**Fade out*/
.dropdown:not(:hover) .dropdown-content{
    transition: visibility 0s 0.5s, opacity 0s;
}

/* Change the background color of the dropbtn when the dropdown content is visible */
.dropdown:hover .dropbtn {
    background: linear-gradient(90deg, rgb(0, 0, 0), teal, 0.7); 
    color: white;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content:focus {
    background:  rgba(0, 204, 204, 0.7); 
}

.dropdown-content #anchor1:hover, #anchor3:hover{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dropdown-content #anchor2:hover, #anchor4:hover {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}