*{box-sizing:border-box;margin:0;padding:0;}article,aside,blockquote,div,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,legend,main,nav,pre,q,section{display:block;}body,html{font-size:16px;line-height:1;}button,input,select,textarea{display:inline;font-size:1em;zoom:1;}a,abbr,br,code,i,kbd,label,span,sub,sup{display:inline;}abbr{text-decoration:none;}abbr,fieldset,img{border:none;}caption,code,i,kbd,th{font-style:normal;font-weight:normal;text-decoration:none;}caption{display:table-caption;}code{font-size:1em;}col{display:table-column;}colgroup{display:table-column-group;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:700;}input,select{vertical-align:middle;}li{display:list-item;}ol,ul{list-style:none;}sub{vertical-align:sub;}sup{vertical-align:super;}table{display:table;border-collapse:collapse;border-spacing:0;}tbody{display:table-row-group;}td,th{display:table-cell;}tfoot{display:table-footer-group;}thead{display:table-header-group;}tr{display:table-row;}

/* --
/* Variables
-- */
:root {
    --chrysanthemum-orange: #D0920B;
    --hollyhock-red: #9F0132;
    --hollyhock-red-m10: #6B0122;
    --lemon: #E3C211;
    --mint: #23854A;
    --mint-p10: #2EAD61;
    --plate-yellow: #F1E60D;
    --pure-black-p6: #0f0f0f;
    --pure-black-p7: #121212;
    --pure-white: #FFF;
    --pure-white-a05: rgba(255, 255, 255, 0.05);
}


/* --
/* At-Rules and Pseudo
-- */
@font-face {
    font-family: UKNumberPlate;
    src: url('UKNumberPlate.ttf');
}


/* --
/* HTML Tags
-- */
article {
    margin: auto;
    max-width: 60em;
}
body {
    background: var(--pure-black-p7);
    color: var(--pure-white);
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
    line-height: 1.75;
}
body,
html {
    height: 100%;
    scroll-behavior: smooth;
    width: 100%;
}
button {
    background: var(--mint);
    border: 2px solid var(--mint);
    border-radius: 1em;
    color: var(--pure-white);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    margin: auto;
    outline: 0;
    padding: 1em 2em;
    text-align: center;
    transition: all linear 0.25s;
    width: max-content;
}
button:focus,
button:hover {
    background: var(--mint-p10);
    border-color: var(--mint-p10);
}
h1 {
    font-size: 1.5em;
}
h2 {
    color: var(--plate-yellow);
    font-size: 1em;
    margin-bottom: 1em;
    text-align: center;
}
footer {
    padding: 4em 2em;
    text-align: center;
}
form {
    display: grid;
    gap: 1em;
    padding: 0 1em;
}
header {
    align-content: center;
    align-items: center;
    display: grid;
    height: 100vh;
    justify-content: center;
    text-align: center;
    width: 100%;
}
input {
    background: var(--pure-black-p6);
    border: 2px solid var(--plate-yellow);
    border-radius: 0.5em;
    color: var(--pure-white);
    font-family: UKNumberPlate;
    font-size: 1em;
    letter-spacing: 4px;
    outline: 0;
    padding: 0.5em 1em;
    text-align: center;
    width: 100%;

    /* Alternate styling */
    background: var(--plate-yellow);
    color: var(--pure-black-p6);
}
label {
    margin: 1em;
}
li {
    border-radius: 0.75em;
    margin: 0.25em 0;
    padding: 0.5em 1em;
}
section {
    background: var(--pure-black-p6);
    padding: 2em;
}
section + section {
    margin-top: 4em;
}
ul {
    margin-top: 2em;
}
@media screen and (min-width: 240px) {
    input {
        font-size: 1.5em;
    }
}
@media screen and (min-width: 608px) {
    h1 {
        font-size: 2.5em;
    }
    h2 {
        color: var(--plate-yellow);
        font-size: 1.5em;
        margin-bottom: 1.5em;
        text-align: center;
    }
    input {
        font-size: 3em;
    }
}
@media screen and (min-width: 992px) {
    main {
        padding: 4em;
    }
    section {
        border-radius: 2em;
        padding: 4em;
    }
    section + section {
        margin-top: 4em;
    }
}


/* --
/* Classes
-- */
.advisory {
    background: var(--lemon);
    color: var(--pure-black-p6);
}
.advisory.dangerous {
    background: var(--chrysanthemum-orange);
    color: var(--pure-black-p6);
}
.debug-info { /* debug information styling */
    background-color: var(--mint);
    color: var(--pure-white); 
    padding: 0.5em;
    margin: 1em 0;
    border-radius: 0.5em;
    font-size: 0.9em; 
    text-align: center;
    word-wrap: break-word;
}
.error { /* error message styling */
    background-color: var(--hollyhock-red); 
    color: var(--pure-white); 
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    text-align: center;
}
.alert { /* alert message styling */
    background-color: var(--lemon); 
    color: var(--pure-black-p6); 
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    text-align: center;
}
.fail,
.dangerous,
.prs {
    background: var(--hollyhock-red-m10);
    color: var(--pure-white);
}
.grid-results {
    display: grid;
    gap: 1em;
}
.grid-results > div {
    display: grid;
    gap: 1em;
}
.grid-results > div div:first-of-type {
    font-weight: 700;
}
.major {
    background: var(--hollyhock-red);
    color: var(--pure-white);
}
.minor {
    background: var(--mint);
    color: var(--pure-white);
}
.mot-test::after {
    background: var(--pure-white-a05);
    border-radius: 0.25em;
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    margin: 4em 0;
    position: relative;
    width: 100%;
}
.mot-test:last-of-type::after {
    display: none;
}
.results {
    min-height: 100vh;
}
@media screen and (min-width: 608px) {
    .grid-results {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width: 992px) {
    .grid-results > div {
        grid-template-columns: 0.4fr 0.6fr;
    }
}


/* --
/* IDs
-- */
#back-to-top {
    align-items: center;
    background: var(--pure-white);
    border-radius: 2em;
    bottom: 2em;
    color: var(--black);
    display: grid;
    justify-content: center;
    opacity: 0;
    padding: 1em;
    position: fixed;
    right: 2em;
    transition: all linear 0.25s;
}
#back-to-top span {
    border-bottom: 16px solid var(--pure-black-p6);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    height: 0;
    width: 0;
}
#back-to-top.show {
    opacity: 1;
}
#indicator {
    left: 2em;
    position: fixed;
    top: 0;
}
#mot-history {
    position: relative;
}

/*Debugging*/
pre.var-dump {
    background-color: var(--mint-p10);
    border: 1px solid var(--plate-yellow);
    padding: 10px;
    border-radius: 5px; 
    font-family: Consolas, "Courier New", monospace; 
    font-size: 14px;
    color: var(--pure-black-p6);
    overflow: auto;
}

.failed {
    background: var(--hollyhock-red);
    border: 2px solid var(--hollyhock-red);
    border-radius: 0.75em;
    color: var(--pure-white);
    display: flex;
    font-weight: bold;
    padding: 0.125em 1em;
    width: max-content;
}
.passed {
    background: var(--mint);
    border: 2px solid var(--mint);
    border-radius: 0.75em;
    color: var(--pure-white);
    display: flex;
    font-weight: bold;
    padding: 0.125em 1em;
    width: max-content;
}
/* Navbar Styling within Body */

.body-navbar {
    align-items: center;
    display: flex;
    gap: 2em;
    left: 0;
    padding: 0 2em;
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: var(--mint);
    width: 100%;
}
.nav-item {
    margin: 0;
}
.nav-menu {
    align-items: center;
    display: flex;
    margin: 0;
}
.nav-toggle {
    display: none;
}

.body-navbar a:hover,
.body-navbar a:focus {
    color: var(--mint);
}

.navbar-brand {
    font-family: UKNumberPlate, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
}
.nav-item:hover,
.nav-item:focus {
    background-color: var(--pure-black-p7);
}

/* Responsive Menu within Body */
@media (max-width: 768px) {
    .body-navbar .nav-menu {
        flex-direction: column;
        width: 100%;
        padding: 1em;
        position: relative;
        background: var(--pure-black-p6);
        display: none;
    }

    .body-navbar .nav-menu.active {
        display: flex;
    }

    .body-navbar .nav-toggle {
        display: inline-block;
        cursor: pointer;
        padding: 1em;
    }

    .body-navbar .nav-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: var(--pure-white);
        margin: 5px auto;
        transition: all 0.3s ease;
        display: block;
    }
}
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--pure-black-p6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    color: #333;
    font-size: 24px;
    font-family: Arial, sans-serif;
}

.car-animation {
    height: 50px;
    overflow: hidden;
    position: relative;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car {
    font-size: 32px;
    position: absolute;
    transform: scaleX(-1);
    animation: drive-reverse 2s linear infinite;
}

@keyframes drive-reverse {
    0% { left: -50px; }
    100% { left: 150px; }
}

.loading-text {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}
@media (max-width: 768px) {
    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }

    .loading-text {
        font-size: 16px;
    }

    .car-animation {
        font-size: 24px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    border-radius: 0.25em;
    padding: 6px;
    text-align: center;
}