:root {
    --bg1: #242424;
    --bg2: #333333;
    --bg-navbar: #00000088;
    --3ma-green: #05a63f;
    --3ma-green-light: #06c64c;
}

body {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px;
    background-color: var(--bg1);
    color: #fff;
    display: grid;
}

button {
    background-color: var(--3ma-green);
    color: #fff;
    padding: 0.7rem;
    border: transparent solid 1px;
    transition-duration: 0.2s;
}

button:hover {
    background-color: var(--3ma-green-light);
}

a {
    color: var(--3ma-green);
    transition-duration: 0.2s;
    text-decoration: none;
}

a:hover {
    color: var(--3ma-green-light);
    transition-duration: 0.2s;
}

.bg-primary {
    background-color: var(--bg1) !important;
}

.bg-secondary {
    background-color: var(--bg2) !important;
}

.bg-navbar {
    background-color: var(--bg-navbar) !important;
}

.bold {
    font-weight: 700;
}

.mw-75vw {
    width: 75vw;
}

.mw-60vw {
    max-width: 60vw;
}

.mw-40vw {
    max-width: 40vw;
}

nav .navbar-nav li a {
    color: white;
    transition-duration: 0.2s;
}

nav .navbar-nav li a:hover {
    color: var(--3ma-green);
}

.logo {
    width: 200px;
    height: 200px;
}

.spacer {
    height: 10rem;
}

.footer-text {
    font-size: 12px;
}

.separator-down {
    width: 0;
    height: 0;
    border-right: 100vw solid transparent;
    border-bottom: 4vw solid var(--bg1);
    margin-top: -4vw;
}

.separator-up {
    width: 0;
    height: 0;
    border-left: 100vw solid transparent;
    border-bottom: 4vw solid var(--bg2);
    margin-top: -4vw;
}

svg {
  height: 4vw;
  width: 100%;
}

polygon.top-d2l, polygon.bottom-l2d {
  fill: var(--bg1);
}

polygon.bottom-d2l, polygon.top-l2d {
  fill: var(--bg2);
}

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

.hero-title-container {
    display: flex;
    justify-content: center;
}

.hero-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.attack-right p, .attack-right h2 {
    text-align: right;
}

.attack-left p, .attack-left h2 {
    text-align: left;
}

.attack-icon {
    grid-area: attack-icon;
    height: 150px;
    max-width: 20vw;
}

.attack-description-container {
    grid-area: attack-description;
}

.attack-container {
    display: grid;
    gap: 4rem;
    justify-items: center;
    align-items: center;
}

.attack-right {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "attack-icon attack-description";
}

.attack-left {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "attack-description attack-icon";
}

.threat-model-list {
    margin-top: 2rem;
}

.threat-model-list li{
    margin-bottom: 2rem;
}

@media only screen and (max-width: 1024px) {
    .attack-container {
        gap: 4rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        justify-items: center;
        align-items: center;
    }

    .attack-icon {
        max-width: 80vw;
    }

    .attack-right, .attack-left {
        grid-template-areas:
            "attack-icon"
            "attack-description";
    }

    .attack-description-container p, .attack-description-container h2 {
        text-align: center;
    }

}

@media only screen and (max-width: 768px) {
    .body {
        font-size: 14px !important;
    }

    .hero-title-container {
        flex-direction: column;
        align-items: center;
    }

    .logo {
        width: 100px;
        height: 100px;
    }

    .mw-75vw {
        width: 85vw;
    }

    .mw-40vw {
        max-width: 95vw;
    }

    .mw-60vw {
        max-width: 95vw;
    }
}