@import url("/resources/css/colors.css");

header {
    height: auto;
    width: auto;
    position: sticky;
    padding-top: var(--header-padding-top);
    padding-bottom: 10px;
    z-index: 100;
    top: 0;
}

.menu-button {
    display: none;
    padding: 0px;
    background-color: transparent;
    border-style: none;
    color: var(--light-color);
    font-size: 1.5rem;
}

.menu-button:hover {
    cursor: pointer;
}

.navbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 5%;
    margin-right: 5%;

}

.navbar-ul {
    display: flex;
    align-items: center;
    list-style: none;
}

.navbar-link {
    display: flex;
    margin-left: 30px;
}

.buttons-list {
    display: flex;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    gap: 30px;
    list-style: none;
}

.language {
    position: fixed;
    top: 25px;
    z-index: 101;
}
.language:hover{
    cursor: pointer;
    filter: drop-shadow(0px 0px 3px var(--highlight));
}
.flag {
    height: 30px;
}
.flag:hover {
    cursor: pointer;
}


.logo {
    display: flex;
    width: 40px;
}


.blur {
    backdrop-filter: blur(16px) brightness(0.7);
    -webkit-backdrop-filter: blur(16px) brightness(0.7);
}



.download-cv-button {
    font-family: "Orbitron";
    color: var(--bg-color);
    padding: 4px 8px;
    background-color: var(--light-color);
    border: var(--light-color) 2px solid;
    border-radius: 5px;
}

.contact-me-button {
    font-family: "Orbitron";
    color: var(--highlight);
    padding: 4px 8px;
    background-color: var(--bg-color);
    border: var(--highlight) 2px solid;
    border-radius: 5px;
}

.contact-me-button:hover {
    background-color: var(--highlight);
    color: var(--bg-color);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.download-cv-button:hover {
    background-color: var(--highlight);
    border-color: var(--highlight);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.nav-button {
    width: 130px;
}

.navbar-link,
.navbar-link:visited,
.navbar-link:active{

    font-family: "Orbitron", sans-serif;
    text-align: center;
    font-size: 1.2rem;
    color: var(--light-color);
    border-bottom: transparent 3px solid;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.navbar-link:hover {
    color: var(--highlight);
    border-bottom: var(--highlight) 3px solid;
}

.theme-button {
    background-color: transparent;
    border: transparent;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--light-color);
    padding: 0px;
    transition: all 0.3s ease-in-out;
}


.theme-button:hover {
    cursor: pointer;
    color: var(--highlight);
}