@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

.fa {
 display: inline-block;
 font-size: 25px;
}

header {
 display: block;
 margin: 0;
 padding: 0;
}

nav {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 padding: 5px 80px;
 background-color: var(--theme-black);
 max-height: 50px;
 border-radius: 0 0 20px 20px;
}

nav ul {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 margin: 0;
 padding: 0;
 list-style: none;
}

nav ul li {
 max-height: 50px;
 width: fit-content;
}

nav .nav-logo {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 margin: 0;
 flex-wrap: nowrap;
 min-width: 150px !important;
 overflow: hidden;
 height: 50px;
}

nav .nav-logo li a .nav-logo-text {
 display: inline-block;
 color: var(--font-color);
 font-weight: bold;
 font-size: 22px;
 text-wrap: nowrap;
 vertical-align: middle;
}

.nav-logo-img {
 width: 30px;
 aspect-ratio: 1/1;
 margin: 0;
 padding: 0;
 background-color: inherit;
 display: inline-block;
 vertical-align: middle;
}

nav .nav-items li a {
 display: flex;
 max-width: 200px;
 justify-content: center;
 align-items: center;
 color: var(--font-color);
 text-decoration: none;
 font-size: 19px;
 padding: 10px 20px;
 max-height: 50px;
 transition: ease-out 0.6s;
 border-radius: 20px;
}

nav .nav-items li a:hover,
.dropdown .dropbtn:hover {
 color: var(--theme-black);
 background-color: var(--theme-color);
}

nav .nav-items li a span {
 display: block;
 text-align: center;
 margin-left: 7px;
}

.dropdown {
 display: inline-block;
 margin: 0;
 border-radius: 20px;
}

.dropdown .dropbtn {
 display: flex;
 max-width: 200px;
 justify-content: center;
 align-items: center;
 color: var(--font-color);
 text-decoration: none;
 font-size: 19px;
 padding: 10px 20px;
 max-height: 50px;
 border: none;
 gap: 7px;
 background-color: inherit;
 transition: all ease-out 0.2s;
 border-radius: 20px;
}

.dropdown-content {
 appearance: none;
 display: none;
 position: absolute;
 min-width: 160px;
 z-index: 1;
 color: var(--font-color);
 transition: all ease-in-out 0.3s;
 background-color: rgba(0, 0, 0, 0);
 background-clip: content-box;
}

.dropdown-content a {
 float: none;
 color: var(--font-color);
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
 background-color: var(--theme-black);
 border-radius: 0 50% 50% 0 !important;
 margin: 3px;
}

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

.footer {
 display: grid;
 grid-template-columns: auto 1fr;
 background-color: var(--theme-black);
 position: fixed;
 bottom: 0;
 width: 100%;
 height: 50px;
 margin-top: 10%;
 border-top: 5px solid var(--theme-color);
 color: var(--font-color);
}

.footer .themePicker {
 display: inline-block;
}

.footer .footer-content {
 display: inline-block;
 margin: auto;
 padding: 0;
 width: fit-content;
 text-wrap: nowrap;
}

.footer a {
 color: var(--theme-color);
}

/* responsive design */
@media (max-width: 800px) {
 .nav-text {
  /* display: none !important; */
  margin: 0 !important;
  padding: 0 !important;
 }
}