@font-face {
    font-family: jetbrains;
    src: url(fonts/JetBrainsMono-Regular.woff2);
}

body { padding: 0; margin: 0; }

input {
    padding-inline: 10px;
    background: hsl(222, 64%, 24%);
    color: hsl(167, 92%, 40%);
    border-radius: 25px;
    border-color: hsl(189, 4%, 65%);
}

button {
    background: hsl(222, 64%, 24%);
    color: hsl(167, 92%, 40%);
    border-radius: 25px;
    border-color: hsl(189, 4%, 65%);
    padding-inline: 1%;
}

body, html {
    overflow-x: hidden;
    font-family: jetbrains;
    display: flex;
    flex-direction: column;
    background-color: hsl(220, 24%, 15%);
    color: hsl(16, 97%, 44%);
}

.header {
    z-index: 100;
    opacity: 80%;
    padding: 1%;
    left:0%;
    right:0%;
    position: fixed;
    background-color: hsl(222, 64%, 24%);
    border: 2px inset hsl(189, 4%, 65%);
}

.facts {
    position: relative;
    transform: translate(0%, -600%);
}

.inheader {
    opacity: 100%;
    flex-direction: row;
}

.notblue {
    padding-right: 2%;
    text-decoration: none;
    color: hsl(167, 92%, 40%);
}

.pic {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#beatch {
    filter: blur(5px);
}

.body {
    padding-top: 0%;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 0%;
}