/**
 * Name: CSS
 *
 * Author: Christian Schneider
 * eMail: info@christianschneider.it
 *
 * URI: www.christianschneider.it
 *
 * Date: 2026-08-16
 *
 * Version: 1.0.0
 */

/**
 * Name: CSS-Reset
 * Author URI: www.meyerweb.com/eric/tools/css/reset/
 * Version: 2.0 | 20110126
 * License: none (public domain)
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

/**
 * HTML5 display-role reset for older browsers
 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
}

body {
	line-height:1;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}




/**
 * Style
 *
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    min-height: 100vh;

    background: url('../img/cs-spielstand-bg-web.jpg') no-repeat center center;
    background-size: cover;
    background-position: left center;

    overflow: hidden;
    touch-action: manipulation;
}

/* =====================================================
   SCOREBOARD
===================================================== */

.scoreboard {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* =====================================================
   LOGO
===================================================== */

.logo{
    position:absolute;

    left:50%;
    top:25%;

    transform:translate(-50%,-50%);
    z-index:10;
}

.logo img {
    width: clamp(140px, 12vw, 240px);
    height: auto;

    filter:
        drop-shadow(0 0 10px rgba(0,0,0,.7))
        drop-shadow(0 0 20px rgba(0,0,0,.5));
}

/* =====================================================
   TEAMS
===================================================== */

.team{
    position:absolute;

    top:35%;

    transform:translate(-50%, -50%);

    width:auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

.home{
    left:24%;
}

.guest{
    left:76%;
}

.score {
    color: #ffffff;

    font-family: 'Monomaniac One', sans-serif;
    font-size: clamp(220px, 20vw, 420px);
    font-weight: 400;

    line-height: .9;
    letter-spacing: 4px;

    text-shadow:
        0 0 10px rgba(0,0,0,.9),
        0 0 20px rgba(0,0,0,.8),
        0 0 40px rgba(0,0,0,.7),
        6px 6px 8px rgba(0,0,0,.8);
}

.team-name {
    margin-top: 15px;

    color: #ffffff;

    font-family: 'Ubuntu', sans-serif;
    font-size: clamp(24px, 2.2vw, 42px);
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 3px;

    text-shadow:
        2px 2px 8px rgba(0,0,0,.8);
}

/* =====================================================
   X-SMALL DEVICES
===================================================== */

@media (max-width:576px) {

    body {
        background-position: left center;
        background-size: cover;
    }

    .logo {
        left: 50%;
        top: 13%;
    }

    .logo img {
        width: clamp(80px, 18vw, 140px);
    }

    .team {
        width: 42%;
    }

    .home {
        left: 25%;
        top: 24%;
    }

    .guest {
        left: 75%;
        top: 24%;
    }

    .score {
        font-size: clamp(70px, 20vw, 140px);
        letter-spacing: 1px;
    }

    .team-name {
        font-size: 14px;
        letter-spacing: 1px;
        white-space: nowrap;
    }
}

/* =====================================================
   TABLETS
===================================================== */

@media (min-width:577px) and (max-width:992px) {

    .logo {
        top: 20%;
    }

    .logo img {
        width: clamp(120px, 12vw, 180px);
    }

    .home,
    .guest {
        top: 28%;
    }

    .score {
        font-size: clamp(120px, 18vw, 260px);
    }

    .team-name {
        font-size: clamp(18px, 2vw, 28px);
    }
}

/* =====================================================
   DESKTOP
===================================================== */

@media (min-width:993px) {

    .logo {
        top: 26%;
    }

    .home,
    .guest {
        top: 32%;
    }
}