@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,regular,italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:regular,italic,700,700italic);

.nav {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background: green;
}

.nav__item {
    font-family: "Roboto Condensed", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: greenyellow;
}

.nav__item--active {
    text-decoration: underline;
}

.nav__item:hover {
    background: rgb(101, 168, 0);
}

.nav__item a {
    text-decoration: none;
    color: black;
}

header h1, header h2, header h3, header h4, header h5, header h6 {
    font-family: "Ubuntu Mono", monospace;
    text-align: center;
}

.project {
    display: flex;
    flex-direction: row;
}

.project__info {
    display: flex;
    flex-direction: column;
    font-family: "Roboto", sans-serif;
}

.project__info>h2 {
    font-family: "Roboto Condensed", sans-serif;
}

.project__info>p {
    font-family: "Roboto", sans-serif;
    margin: 5px 0;
}

.project__info,
.project__image {
    margin: 0 1em;
}

.project:nth-child(even) {
    flex-direction: row-reverse;
}

.project__image {
    margin: 10px 0;
}

.project__image img {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    width: clamp(200px, 50vw, 400px);
    height: auto;
}

.project__link {
    text-decoration: none;
    color: black;
    margin: 0;
}

.language-switcher {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 1em;
}

.language-switcher__link,
.nav__item a {
    font-family: "Roboto Condensed", sans-serif;
    margin: 0 1em;
    text-decoration: none;
    color: black;
    padding: 1em;
}


.language-switcher__link {
    text-decoration: none;
    color: white;
    background-color: rgb(4, 193, 4);
}

.language-switcher__link:hover {
    background-color: rgb(0, 168, 0);
}

.language-switcher__link.active {
    background-color: rgb(38, 213, 61);
    text-decoration: underline;
}

.language-switcher__link:nth-child(0)::before {
    content: "";
}

main h1, main h2, main h3, main h4, main h5, main h6 {
    font-family: "Roboto Condensed", sans-serif;
}