:root {
    --blue : #00CCBC;

}

body {
    margin : 0;
    padding : 0;
    font-family: "IBM Plex Sans", sans-serif;
}

nav {
    background-color: white;
    padding: 0.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    filter: drop-shadow(0 1px 5px #8F8F8F);
    position: sticky;
    top: 0;
    overflow: hidden;

}

nav .logos img {
    margin-left: 10px;
}

.nav-click {
    display: flex;
}

nav ul {
    list-style: none;
    display: flex;
}

nav li {
    margin-left: 1em;
    display: flex;
    align-items: center;
}

nav img {
    height : 50px
}

button {
    all: unset;
    border: solid 1.5px;
    border-radius: 6px;
}

.connecter, .blue-button {
    padding: 1em;
}

.connecter {
    color: var(--blue);
    border-color: #E8EBEB;
}

.blue-button {
    background-color: var(--blue);
    color: white;
}

#hero {
    height: 100vh;
    padding: 5%;
    background: linear-gradient(transparent, 60%, #000),
    url(/img/keyboard-hero.jpg);
}

h1 {
    font-size: 50px;
    margin-bottom: 1%;
}

.text-hero {
    color: white;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.hero-button {
    padding: 0.8% 5%;
    background-color: var(--blue);
    color: white;
    margin-top: 1%;
    border: none;
}

.cards {
    display: flex;
    justify-content: center;
}

h3 {
    margin: 1%;
}

.esthetic, .price {
    padding: 2%;
    border: solid 1px;
    border-radius: 15px;
    height: 40vh;
    width: 30vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.esthetic {
    background: linear-gradient(transparent, 50%, #000),
    url(/img/lotr-keyboard.jpg);
    background-size: cover;
    color: white;
}

.price {
    background: linear-gradient(transparent, 50%, #000),
    url(/img/replace-switch.jpg);
    background-size: cover;
    color: white;
}