/*

CSS Guidelines: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

# Tag titles

    example would be for elements of <example>
    #exmple would be for elements with <x id="example">
    .example would be for elements with <x class="example">
    x[example] would be for elements with <x example="">

    example:hover would be for elements with <example> but whilst hovering over

*/

@font-face {
    font-family: "Martius";
    src: url("/static/fonts/Martius.woff2") format("woff2");
}

body {
    --page-height: 2160px;
    --page-width: 3840px;
    font-size: 70px;
    width: var(--page-width);
    height: var(--page-height);
    margin: 0;
    padding: 0;
}

body[scale="half"] {
    transform: scale(0.5);
    transform-origin: top left;
}

html {
    font-family: Martius;
    color: #FFFFFF;
    position: relative;

    --primary-color: #EB48AF;
    --gradient-color: #DA43A3;
}

/* Top Level split into 3 sections */
#page_container {
    display: grid;
    grid-template-columns: calc(var(--page-width) * 0.2) calc(var(--page-width) * 0.6) calc(var(--page-width) * 0.2);
    width: var(--page-width);
    height: var(--page-height);

    background-image: url("/static/images/nbl_totaliser_background.png");
}

.pageSection {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Title Section */
#title_text {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* keep the section centered as a fallback */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* inner element is absolutely centered, then rotated */
#title_text #title_inner {
    position: absolute;
    /* Wants to be 50% but Font offset means this is necessary */
    top: 48.5%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    /* rotate counter-clockwise 90° */
    transform-origin: center;
    transform-box: fill-box;
    -webkit-transform-box: fill-box;
    white-space: nowrap;
    display: inline-block;
    font-size: 600px;
    text-align: center;
    overflow: visible;
}

/* Totaliser Section */
#totaliser_section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#totaliser_container {
    display: flex;
    flex-direction: column;
    justify-content: right;
    width: 100%;
    height: auto;
    gap: 50px;

    --team-bar-height: 200px;
}

.teamEntry {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: right;
    font-size: var(--team-bar-height);
    height: var(--team-bar-height);
}

.teamLogoDiv {
    height: var(--team-bar-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.teamLogoImg {
    height: var(--team-bar-height);
    object-fit: contain;
    filter: drop-shadow(0.250rem 0.250rem 0.250rem black);
}

.teamScoreBar {
    height: 100%;
    width: auto;
    text-align: center;

    /* Required as the font seems to be offset left */
    padding-left: 20px;
    background: linear-gradient(173deg, var(--primary-color) 50%, var(--gradient-color) 50%);
    box-shadow: 0.250rem 0.250rem 0.250rem black;
}

/* Totaliser Side Image */

#totaliser_side_image {
    filter: drop-shadow(0.250rem 0.250rem 0.250rem black);
}