html {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    background-color: black;
    color: white;
    direction: ltr;
}

/* If the screen size is 601px wide or more, do these */
@media screen and (min-width: 601px) {
    p {
        color: white;
        font-size: 16px;
        clear: both;
    }

    button {
        background-color: Transparent;
        border-radius: 100px;
        border: 2px solid white;
        outline: 0;
        display: inline-block;
        cursor: pointer;
        color: white;
        font-size: 16px;
        padding: 10px 15px;
        text-decoration: none;
        margin-right: 0.333em;
        margin-bottom: 0.333em;
    }

    td {
        border: none;
        padding: 0 5px;
    }

    .num {
        color: darkgray;
        font-size: 25px;
    }

    .name {
        color: darkgray;
        font-size: 14px;
    }

    .credit {
        color: darkgray;
        font-size: 18px;
    }

    .history {
        float: left;
        margin-right: 0.25em;
        padding-left: 0.25em;
        padding-right: 0.25em;
        border: 1px dotted darkgrey;
        text-align: center;
    }

    .remaining {
        border: none;
        border-spacing: 0;
        padding: 0 5px 0 0;
        color: white;
        font-size: 21px;
    }

    .remainingGhost {
        border: none;
        border-spacing: 0;
        padding: 0 5px 0 0;
        color: white;
        font-size: 21px;
        cursor: pointer;
    }

    .release {
        background-color: Transparent;
        border-radius: 100px;
        border: 2px solid darkgray;
        outline: 0;
        display: inline-block;
        cursor: pointer;
        color: darkgray;
        font-size: 16px;
        padding: 10px 15px;
        text-decoration: none;
        margin-top: 0.5em;
    }

    .title {
        font-family: serif;
    }

    /* The switch - the box around the slider */
    .switch {
        position: relative;
        float: left;
        display: inline-block;
        width: 113px;
        height: 42px;
        cursor: pointer;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: calc(42px - (2 * 4px) - (2 * 2px));
        width: calc(42px - (2 * 4px) - (2 * 2px));
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(calc(113px - 42px));
        -ms-transform: translateX(calc(113px - 42px));
        transform: translateX(calc(113px - 42px));
    }

    .nightmare {
        position: absolute;
        font-size: 16px;
        color: black;
        font-weight: 600;
        left: 15px;
        bottom: 12px;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 100px;
        border: 2px solid white;
    }
}

/* If the screen size is 600px wide or less, do these */
@media screen and (max-width: 600px) {
    p {
        color: white;
        font-size: 15px;
        clear: both;
    }

    button {
        background-color: Transparent;
        border-radius: 100px;
        border: 1px solid white;
        outline: 0;
        display: inline-block;
        cursor: pointer;
        color: white;
        font-size: 15px;
        padding: 5px 7px;
        text-decoration: none;
        margin-right: 0.333em;
        margin-bottom: 0.5em;
    }

    td {
        border: none;
        padding: 0 2px;
    }

    .num {
        color: darkgray;
        font-size: 20px;
    }

    .name {
        color: darkgray;
        font-size: 10px;
    }

    .credit {
        color: darkgray;
        font-size: 12px;
    }

    .history {
        float: left;
        margin-right: 0.125em;
        padding-left: 0.125em;
        padding-right: 0.125em;
        border: 1px dotted darkgrey;
        text-align: center;
    }

    .remaining {
        vertical-align: top;
        border: none;
        padding: 0 2px 0 0;
        color: white;
        font-size: 17px;
    }

    .remainingGhost {
        vertical-align: top;
        border: none;
        padding: 0 2px 0 0;
        color: white;
        font-size: 17px;
        cursor: pointer;
    }

    .release {
        background-color: Transparent;
        border-radius: 100px;
        border: 1px solid darkgray;
        outline: 0;
        display: inline-block;
        color: darkgray;
        cursor: pointer;
        font-size: 17px;
        padding: 5px 7px;
        text-decoration: none;
        margin-top: 0.5em;
    }

    .title {
        font-family: serif;
    }

    /* The switch - the box around the slider */
    .switch {
        position: relative;
        float: left;
        display: inline-block;
        width: 98px;
        height: 28px;
        cursor: pointer;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: calc(28px - (2 * 3px) - (2 * 1px));
        width: calc(28px - (2 * 3px) - (2 * 1px));
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(calc(98px - 28px));
        -ms-transform: translateX(calc(98px - 28px));
        transform: translateX(calc(98px - 28px));
    }

    .nightmare {
        position: absolute;
        font-size: 15px;
        color: black;
        font-weight: 600;
        left: 10px;
        bottom: 4px;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 100px;
        border: 1px solid white;
    }
}

table, tr {
    border: none;
}

a {
    color: darkgray;
    text-decoration: underline;
}

a:hover {
    cursor: pointer;
}

#reset {
    background-color: #660000;
}

#ghostName {
    color: #8924a3;
}

#evidence {
    color: #349c27;
}

#weakness {
    color: #c98134;
}

#strength {
    color: #c21b10;
}

#vanWarning {
    color: #afa51c;
}

.left {
    float: left;
}

.ecuTotal {
    color: darkgray;
}

.titleA {
    color: white;
    text-decoration: none;
}

.tablist {
    padding: 0;
    margin: 0 0 0 11px;
    list-style: none;
    display: inline-flex;
    justify-content: left;
}

.tablist2, .tablist1, .tablist0 {
    position: relative;
    display: block;
    color: white;
    text-decoration: none;
    border-top: 1px solid white;
    border-radius: 6px 6px 0 0;
    padding: 3px 10px 0 10px;
    margin: 0 5px;
}

.tablist2 {
    z-index: 2;
    font-size: 35px;
}

.tablist1 {
    z-index: 1;
    font-size: 25px;
    top: 100%;
    transform: translateY(-100%);
}

.tablist0 {
    z-index: 0;
    font-size: 25px;
    top: 100%;
    transform: translateY(-100%);
}

.tablistB:before, .tablistB:after, .tablistS:before, .tablistS:after {
    position: absolute;
    content: "";
    background: black;
    top: 2px;
    z-index: -1;
    border-radius: 2px 0 0 0;
}

.tablistB:before, .tablistB:after {
    width: 14px;
    height: 46px;
}

.tablistB:before {
    transform: rotate(21deg);
    border-left: 1px solid white;
    left: -8px;
}

.tablistB:after {
    transform: rotate(-21deg);
    border-right: 1px solid white;
    right: -8px;
}

.tablistS:before, .tablistS:after {
    width: 9px;
    height: 33px;
}

.tablistS:before {
    transform: rotate(21deg);
    border-left: 1px solid white;
    left: -5px;
}

.tablistS:after {
    transform: rotate(-21deg);
    border-right: 1px solid white;
    right: -5px;
}

.box {
    border: 1px solid white;
    padding: 15px 10px;
    margin: 0;
    color: white;
    font-size: 25px;
    z-index: 9;
    clear: both;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #009900;
}

input:focus + .slider {
    box-shadow: 0 0 1px #009900;
}

/* Rounded sliders */
.slider.round {
    border-radius: 100px;
}

.slider.round:before {
    border-radius: 50%;
}