body {
    --color-gray: hsl(204, 50%, 90%);

    --color-gray2: hsl(204, 40%, 85%);
    --color-gray3: hsl(204, 30%, 70%);
    --color-light-blue: hsl(204, 95%, 80%);
    --color-light-blue2: hsl(204, 80%, 70%);
    --color-light-blue3: hsl(204, 77%, 45%);
    --color-hot-pink: hsl(300, 100%, 50%);
    --color-dark-blue: #0a0a40;
    --color-light-green: hsl(135, 70%, 75%);
    --color-green: #119933;
    --color-yellow: hsl(50, 89%, 60%);
    --color-bright-orange : hsl(38, 100%, 70%);
    --color-red: #AA1111;
    --color-bright-red: hsl(360, 100%, 50%);

    --font-size-smaller: calc(8px + 1vmin);

    --font-size: calc(10px + 1vmin);
    --font-size-bigger: calc(10px + 2vh);

    font-family: monospace;
    color: var(--color-gray2);
    background-color: var(--color-dark-blue);
    font-size: var(--font-size);

}

div {
    padding-top: 1vmin;
    padding-bottom: 1vmin;
}

.heading {
    color: whitesmoke;
    font-size: var(--font-size-bigger);
}

#linked-stylesheet-element:after {
    content: 'This text is coming from a linked stylesheet';
}

a, button {
    font-size: var(--font-size);
}

a {

    color: var(--color-light-green);
}



button {
    width: 40vw;
}

input {
    font-size: var(--font-size);
    width: 40vw;
}

.xss-test-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /*flex-wrap: wrap;*/
}

.xss-test {
    flex: 1 1 auto;
}

.csp-mode-switcher {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 1vw;
    padding-right: 1vw;
}

.csp-mode {
    display: block;
    /*display: flex;*/
    flex: 1 1 0px;
    text-wrap: pretty;
    border: 1.5px solid var(--color-light-blue);
    padding: 1vmin;
}

.csp-mode-link {
    font-size: var(--font-size-bigger);
}


@media (width <= 999px) {
    .csp-mode-switcher {
        flex-direction: column;
    }
    .xss-test-container {
        flex-direction: column;
    }
    button, input {
        width: 80vw;
    }

    .csp-mode {
        width: 80vw;
    }
}

.csp-mode * {
    flex: 1 1 0px;

}

.csp-mode > li {
    font-size: var(--font-size-smaller);
}

.current-csp-container {
    padding: 2vmin;
}

.current-csp-container span {
    padding: 1vmin;
    color: cyan;
}
.inline-javascript-test > a {
    color: yellow;
}

a.strict-link {
    color: var(--color-light-green);
}
a.strict-link:hover {
    color: #00FF00
}
.moderate-link {
    color: var(--color-yellow);
}
.moderate-link:hover {
    color: yellow;
}
a.relaxed-link {
    color: orange;
}
a.relaxed-link:hover {
    color: var(--color-bright-orange);
}
a.no-csp-link {
    color: var(--color-gray2);
}
a.no-csp-link:hover {
    color: white;
}

#persistent-xss-test-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#persistent-xss-target {
    border: 1px solid red;
    min-width: 50vw;
    min-height: 10vh;
    padding: 1vh;
}

#persistent-xss-target * {
    color: red;
}

#persistent-xss-test-container div {
    flex: 1 1 auto;
}

.persistent-xss-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

a:hover {
    color: white;
}