body {
    background-color: black;
    margin: 0;
    padding-bottom: 2500px
}

header {
    background-color: rgb(251, 251, 251);
    padding: 10px 60px;
    width: min(700px, calc(100% - 40px));
    display: grid;
    align-items: center; 
    grid-template-columns: 1fr auto 1fr;
    flex-wrap: nowrap;
    position: fixed;

    border-radius: 45px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    box-shadow: 5px 5px 5px rgba(5,5,5, 0.25);


    top: 25px;
    left: 50%;
    transform: translateX(-50%);

    z-index: 200;
 
}

.dropdowns {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 40px;
}

header h1 {
    grid-column: 3;
    font-size: 25px;
    font-family: 'Share Tech';
    color: black;
    text-align: right;
    

}

.navigation-dropdown-menu,
.socials-dropdown-menu 
{
    font-size: 24px;
    font-family: 'Share Tech';
    font-weight: 700;

    color: black;
    text-decoration: none;

}

.navigation-dropdown-menu:hover .content,
.socials-dropdown-menu:hover .content 
{
    visibility: visible;
    opacity: 1;

}

.navigation-dropdown-menu .content,
.socials-dropdown-menu .content 
{
    background-color: rgb(251, 251, 251);
    position: absolute;
    color: black;
    padding: 10px 15px;
    min-width: 100px;
    border: solid 1px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

header a {
    display: block;

    font-size: 24px;
    font-family: 'Jost';
    font-weight: 400;

    color: black;
    text-decoration: none;

    cursor: pointer;
    margin-top: 6px;
    margin-bottom: 6px;
}

.linkedin-logo,
.github-logo,
.instagram-logo {
    height: 24px;
    transition: opacity 0.2s;
}


.linkedin, .github, .instagram {
    display: flex;
    align-items: center;
    gap: 6px;
}

.linkedin:hover, .github:hover, .instagram:hover {
    opacity: 0.4;
    transition: 0.15s;
}