@import url(blobs.css);
@import url(hero.css);
@import url(nav.css);

@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');

:root {
    --bg: #2D2C29;
    --fg: #FFFCF4;
    --yellow: #EDB74D;
    --red: #EB6666;
    --green: #6FB18A;
}

body {
    height: 100vh;
    margin: 0;

    display: flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items: center;
    gap: 3em;
    overflow: hidden;

    background-color :var(--bg);
    color: var(--fg);
    font-family: "Domine";

    margin: 0 10em;
}

h1 {
    font-size: 60px;
    font-weight: normal;
    margin: 0;
}

h2 {
    font-size: 32px;
}

p {
    font-size: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

body::before, body::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height:100%;
    z-index: -1;
    opacity: 40%;
}

body::before {
  background: #8C8C8C;
  filter: url(#noiseFilter);
}