@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap');

@font-face {
    font-family: "Brolink DEMO";
    src: url("../../fonts/Logo/Brolink DEMO.otf") format("opentype");
}



.logo {
    font-family: 'Brolink DEMO', sans-serif;
    color:whitesmoke;
    font-size: 50px;
    display: block;
    margin-right: auto;
    opacity: .85;
    transition: all 0.3s ease-in-out 0s;
}

.logo:hover, .logo:focus, .logo:active {
    color: gray
}

li,
a,
button {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: whitesmoke;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
}

.navigate_links {
    list-style: none;
}

.navigate_links li {
    display: inline-block;
    padding: 10px 20px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.navigate_links li a {
    transition: all 0.3s ease-in-out 0s;
}


.navigate_links li a:hover, .navigate_links li a:focus, .navigate_links li a:active {
    color: gray
}