@import "../nord.scss";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

$roboto-slab: 'Roboto', sans-serif;

html {
    background-color: $nord0;
}

h1 {
    color: $nord6;
    font-family: $roboto-slab;
    font-size: 48pt;
}

p {
    color: $nord4;
    font-family: $roboto-slab;
    font-size: 16pt;
}

code {
    font-size: 14pt;
    border: 4px solid $nord13;
}

a {
    color: $nord4;
    font-family: $roboto-slab;
    font-size: 24pt;
}

#subsetOutput {
    color: $nord8;
}

#wholeOutput {
    color: $nord15;
}

#tlOutput{
    color: $nord12;
}

#tOutput{
    color: $nord13;
}

#lOutput{
    color: $nord14;
}

#sumDiv {
    text-align: center;
}

button {
    display: inline-block;
    width: 25%;
    padding: 10px 25px;
    margin: 0.1em;
    border: 4px solid $nord8;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto',sans-serif;
    font-size: 14pt;
    color: $nord2;
    background-color: $nord6;
    text-align: center;
    position: relative;
    transition: all 0.15s;

    &:hover {
        background-color: $nord3;
        color: $nord6;
        border-color: $nord10;
    }

    &:focus {
        border: 4px solid $nord8;
        box-sizing: border-box;
    }
}