:root {
    --BR-Blue: #1f4b61;
    --BR-Grey: #bec0b8;
    --BR-Red: #cb4734;
    --BR-Yellow: #fcc808;
    --black: #1a1a1a;
    --white: #ffffff;

    --accent: var(--BR-Yellow);
}

@font-face {
    font-family: "Rail Alphabet White";
    src: url('../Font/BR\ White.ttf');
}

@font-face {
    font-family: "Rail Alphabet Black";
    src: url('../Font/BR\ Black.ttf');
}

body {
    background-color: var(--BR-Grey);

    margin: 0;
    padding: 0;

    height: 100vh;

    /*overflow: hidden;*/

    
    font: 16pt "Rail Alphabet Black";
    color: var(--black);
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0;
}


/* Header */
div.header {
    background: linear-gradient(to right, var(--BR-Red) 48%, transparent 60%), url('../Images/br.svg') repeat right top / auto 24pt;

    margin: 0;
    padding: 8pt;

    font: "Rail Alphabet White";
    color: var(--white);

    position: sticky;
    top: 0;
}

div.header h1 {
    margin: 0;
    font-size: 32pt;
}

/* Services */
div.services {
    margin: 0;
    padding: 0;
}

div.service {
    background: #1f4b61;

    margin: 12pt;
    padding: 12pt;

    border-radius: 12pt;

    font: 16pt "Rail Alphabet White";
    color: var(--white);
}

div.service table {
    margin: 0;
    padding: 0;

    width: 100%;

    border-collapse: collapse;

    font: 24pt "Rail Alphabet Black";
}

div.service table tr td.time, div.service table tr td.plat, div.service table tr td.expt {
    margin: 0;
    padding: 0;

    text-align: center;

    width: 12%;
}

div.service table tr td.Delayed {
    color: var(--BR-Yellow);
}

div.service table tr td.Cancelled {
    color: var(--BR-Red);
}



div.coverpage {
    background: var(--BR-Grey);
    position: fixed;
    height: 100vh;
    width: 100vw;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 999;
}

div.coverpage div.float {
    text-align: center;
}

div.coverpage div.float button {
    background: none;
    
    margin: 0;
    padding: 8pt 24pt;

    font-family: "Rail Alphabet Black", sans-serif;
    font-size: 20px;
    
    border: 2px solid var(--BR-Blue);
    border-radius: 24pt;

    cursor: pointer;

    transition: background 0.4s, color 0.4s;
}

div.coverpage div.float button:hover {
    background: var(--BR-Blue);
    color: var(--BR-Yellow);
}