@font-face {
    font-family: Inter;
    src: url("../fonts/Inter.ttf");

    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk.ttf");
}
:root {
    --light-blue: rgb(81, 96, 121);
    --light-orange: rgb(241, 137, 92);
    --white: rgb(255, 255, 255);
    --grey: rgb(197, 198, 198);
    --dark-blue: rgb(46, 50, 68);
    --black: rgb(0, 0, 0);
}
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
body {
    height: 100vh;
    background-color: var(--grey);
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.nav-bar {
    display: flex;
    background-color: var(--dark-blue);
    justify-content: space-between;
    align-items: center;
    padding: 1%;
}
.nav-link {
    display: flex;
    gap: 50px;
    padding-right: 2%;
}
.nav-link li a {
    text-decoration: none;
    color: var(--white);
    font-family: "Space Grotesk";
    font-size: 1.75em;
}
h1 {
    font-family: "Space Grotesk";
    font-weight: 500;
    font-size: 2.5em;
}
p {
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}
.presentation {
    padding-top: 1%;
    text-align: center;
}
.title {
    text-align: center;
    padding-top: 2%;
    /*padding-bottom: 2%;*/
}
.button[data-color="dark blue"] {
    background-color: var(--dark-blue);
}
.button[data-color="light blue"] {
    background-color: var(--light-blue);
}
.button[data-color="light orange"] {
    background-color: var(--light-orange);
    
}
.button {
    border: none;
    padding: 1em;
    color: var(--white);
    font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    text-decoration: none;
}
.button a {
    color: var(--white);
}
.discover-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10%;
}
.discover-view div.text-container p, .discover-view div.text-container .button {
    margin-top: 7%;
}

.image-container {
    width: 600px;
    flex-shrink: 0;
}
.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 25px;
}
a {
    text-decoration: none;
}
footer {
    background-color: var(--black);
    color: var(--white);
    padding: 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-link {
    display: flex;
    gap: 50px;
    padding-right: 2%;
}
.footer-link li a {
    text-decoration: none;
    color: var(--white);
    font-family: "Space Grotesk";
    font-size: 1.25em;
}
cite {
    font-family: Inter, Arial, sans-serif;
}
#explain-who-i-am p {
    margin: 1% 0% 1% 0%;
    text-align: justify;
}
#explain-who-i-am {
    display: flex;
    flex-direction: column;
}
#explain-who-i-am {
    margin: 0% 10%;
}
#explain-who-i-am .button {
    align-self: flex-start;
    align-self: center;
}
#contact-form {
    display: flex;
    flex-direction: column;
    margin: 1% 30%;
}
input, textarea, button {
    border: none;
    padding: 1%;
    margin: 1%;
    font-family: Inter, Arial, sans-serif;
    resize: vertical;
    border-radius: 10px;
    font-size: 1em;
}
input:focus, textarea:focus {
    outline: 2px solid var(--light-orange);
}
button[type="submit"] {
    border: none;
    background-color: var(--light-blue);
    color: var(--white);
    cursor: pointer;
}
button[type="submit"]:active {
    background-color: var(--dark-blue);
}