body {
    background: black;
    font-family: "Courier new", monospace;
}

.loginPage {
    overflow: hidden;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 980">\
        <rect x="0" y="0" fill="rgba(0,0,0,0.94)" width="1920" height="980"></rect>\
        <style>\
            .loginLine{\
                opacity:0;\
            }\
            @keyframes logLine {\
                0% {\
                    opacity: 0;\
                }\
                10%, 60% {\
                    opacity: 1;\
                }\
                100%{\
                    opacity: 0;\
                }\
            }\
        </style>\
        <path class="loginLine" style="animation: logLine 3.80s 0.00s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 0 100 L 1920 900"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 0.20s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1920 250 L 0 800"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 0.40s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1500 0 L 800 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 0.60s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 0 300 L 1920 150"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 0.80s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 700 0 L 900 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 1.00s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1920 550 L 300 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 1.20s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 250 0 L 550 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 1.40s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1200 980 L 0 500"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 1.60s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1700 980 L 1000 0"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 1.80s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1800 0 L 1500 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 2.00s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 200 980 0 L 1650 0"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 2.20s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 450 0 L 700 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 2.40s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 600 0 L 1200 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 2.60s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 500 980 L 950 0"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 2.80s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1550 980 L 1300 0"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 3.00s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1200 0 L 1920 700"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 3.20s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 0 700 L 500 0"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 3.40s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 0 300 L 400 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 3.60s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 850 0 L 1300 980"></path>\
        <path class="loginLine" style="animation: logLine 3.80s 3.80s infinite" stroke="%23AAAAAA" stroke-width="5" d="M 1300 980 L 1920 400"></path>\
    </svg>') no-repeat fixed center center;
    background-size: cover;
}

.menuPage {
    overflow: hidden;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10">\
        <rect x="0" y="0" fill="black" width="20" height="10"></rect>\
        <style>\
            .chess{\
                transform: rotate(45deg);\
                animation: rotate 60s linear infinite;\
            }\
            @keyframes rotate {\
                0% {\
                    transform: rotate(45deg);\
                }\
                100%{\
                    transform: rotate(405deg);\
                }\
            }\
        </style>\
        <defs>\
            <pattern width="2" height="2" patternUnits="userSpaceOnUse" id="pattern">\
                <rect x="1" y="0" fill="rgba(255,255,255,0.3)" width="1" height="1"></rect>\
                <rect x="0" y="1" fill="rgba(255,255,255,0.3)" width="1" height="1"></rect>\
            </pattern>\
        </defs>\
        <circle class="chess" x="-10" y="-10" r="25" fill="url(%23pattern)"></circle>\
    </svg>') no-repeat fixed center center;
    background-size: cover;
}

.gamePage {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 980">\
        <rect x="0" y="0" fill="black" width="1920" height="980"></rect>\
         <style>\
            @keyframes line {\
                2%, 98% {\
                    opacity: 1;\
                }\
                100%{\
                    opacity: 0;\
                }\
            }\
        </style>\
        <path style="opacity: 0; animation: line 10s 0.3s infinite" stroke="%23777777" stroke-width="5" d="M 0 600 L 1920 800"></path>\
        <path style="opacity: 0; animation: line 10s 0.6s infinite" stroke="%23777777" stroke-width="5" d="M 950 980 L 1650 0"></path>\
        <path style="opacity: 0; animation: line 10s 0.9s infinite" stroke="%23777777" stroke-width="5" d="M 1800 980 L 1350 0"></path>\
    </svg>') no-repeat fixed center center;
    background-size: cover;
}

.loginShadow {
    animation: logShadow 0.55s forwards;
}

@keyframes logShadow {
    from {
        box-shadow: 0 0 22px 10px white;
    }
    to {
        box-shadow: 0 0 22px 30px white;
    }
}

.loginInput {
    color: white;
    background-color: black;
    padding: 8px 12px;
    font-weight: bold;
    margin-top: 10px;
    border-radius: 6px;
    border: none;
}

.bwButton {
    width: 100px;
    padding: 7px 12px;
    color: white;
    background-color: black;
    font-weight: bold;
    margin-top: 10px;
    cursor: pointer;
    outline: none;
}

.bwButton-whiteBackground{
    border: 2px solid black;
}

.bwButton-whiteBackground:hover{
    background: white;
    color: black;
}

.bwButton-blackBackground{
    border: 2px solid white;
}

.bwButton-blackBackground:hover{
    background: white;
    color: black;
}

.flexColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo{
    text-shadow: 3px 3px 10px white;
    font-size: 100px;
    font-weight: bold;
    margin-top: -25vh;
    margin-bottom: 10vh;
    font-family: "Courier new", monospace;
    -webkit-text-stroke: 2px white;
    opacity: 0;
    animation: logoAppearance 1.5s 2s forwards;
}

@keyframes logoAppearance {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.mainMenuButton {
    user-select: none;
    -webkit-text-stroke: 1px black;
    font-weight: bold;
    color: white;
    font-size: 80px;
    margin-left: 10%;
    transition: margin-left 0.13s linear;
}

.mainMenuButton:hover {
    background: black;
    border: 5px solid white;
    cursor: pointer;
    margin-left: 7%;
}

.mainMenuButton:hover w {
    color: black;
    background: white;
}

.mainMenuButtonDiv {
    margin-top: 15px;
}

.mainMenuButtonDiv:first-child {
    margin-top: 3%;
}

.grid--exit{
    grid-area: exit;
}

.exitButton {
    color: white;
    font-size: 20px;
}

.practiceGrid {
    display: grid;
    padding: 10px 20px;
    height: 100vh;
    grid-row-gap: 40px;
    grid-column-gap: 20px;
    grid: [row1-start] "exit nothing1 nothing2 nothing3" auto [row1-end] [row2-start] "nothing0 graph graphPanel nothing3" calc(30vh + 100px) [row2-end] [row3-start] "nothing0 graphTable graphTable nothing3" auto [row3-end];
    grid-template-columns: 6fr 10fr 10fr 6fr;
}

.exitButton:hover {
    cursor: pointer;
    text-decoration: underline;
}

.grid--graph {
    grid-area: graph;
}

.grid--graphPanel {
    grid-area: graphPanel;
}

.graphPanel {
    color: white;
    border: 2px solid white;
    padding: 20px 30px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px 10px rgba(0,0,0,0.6);
}

.graphInput {
    color: white;
    background-color: black;
    padding: 8px 12px;
    font-weight: bold;
    margin-top: 10px;
    border-radius: 6px;
    border: 2px solid white;
    width: 7vw;
}

table {
    margin: 0 auto;
    font-family: 'Handlee', cursive;
    border-collapse: collapse;
}

thead {
    border-bottom: 2px solid black;
}

td {
    padding: 4px 7px;
    border-right: 2px solid black;
}

td:last-child {
    border: none;
}

.paper {
    grid-area: graphTable;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 26px auto 0;
    max-width: 300px;
    min-height: 300px;
    padding: 24px;
    position: relative;
    width: 80%;
}

.paper:before, .paper:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.paper:before {
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    left: -5px;
    top: 4px;
    transform: rotate(-2.5deg);
}

.paper:after {
    background: #f6f6f6;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    right: -4px;
    top: -1px;
    transform: rotate(1.7deg);
}

.hidden {
    display: none;
}