@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

.jetbrains-mono {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 5px;
  font-style: normal;
  color: white;
}

body {
    background-color: black;
}

header {
    background-color: black;
}

header img {
    height: 20vh;
    filter: invert(200%);
}

blockquote {
    width: 50%;
    padding: 1em; 
    border-radius: 1em; 
    background-color: rgba(0,0,0,0.75);
}

a {
    text-decoration: none;
    background-color: black;
    color: white;
    font-size: larger;
    padding: 1.5em;
}

a:hover {
    color: grey;
    background-color: rgba(10,10,10,0.8);
}

section.main {
    min-height: 80vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .65);
    background-size: cover;
    background-position: center;
    background-image: url("assets/main_background.jpg");
    background-blend-mode: color;
}

section.second {
    min-height: 0vh;
    width: 100%;
    background-color: rgb(8,8,8);
}

section.third {
    min-height: 75vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .65);
    background-size: cover;
    background-position: center;
    background-image: url("assets/third_background.jpg");
    background-blend-mode: color;
}

section.third h2{
    background-color: rgba(0,0,0,0.85);
    border-radius: .25em .25em 0 0;
    padding: 1em;
}

section.third blockquote {
    min-height: 1em;
    padding: 2em;
    width: 100%;
    border-radius: 0 0 .25em .25em;
    background-color: rgba(0,0,0,0.75);
}

section.third blockquote p {
    text-indent: 2em;
}

section.fourth {
    min-height: 100vh;
    width: 100%;
    color: white;
    background-color: rgb(8,8,8);
}

.card {
    border-radius: 1em;
    border-color: rgba(200,200,200,0.8);
    border-style: solid;
    color: white;
    text-align: center;
    padding: 1.5em;
    width: 275px;
    min-height: 300px;
    background-color: #212121;
}

div .card h4 {
    font-size: 1.4em;
    height: 50%;
}

div .card p {
    margin-top: 1em;
}

footer {
    height: 20vh;
    width: 100%;
    background-color: black;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: grey;
}

@media screen and (max-width: 600px) {
    blockquote {
        width: 100%;
    }
}