:root {
    --bg-dark: hsl(0 0 5);
    --bg: hsl(0 0 10);
    --bg-light: hsl(0 0 15);
    --bg-accent: hsl(0 0 20);

    --text: hsl(0 0 95);
    --text-muted: hsl(0 0 70);
    --text-subtle: hsl(0 0 45);

    --gold-accent: hsla(35.135, 99.107%, 56.078%);
    --blue-accent: hsla(224.07, 100%, 68.235%);
    --blue-muted: hsla(224.07, 100%, 48.235%);
    --alert: hsla(355.5, 100%, 60.784%);



/* PICO OVERRIDES */
  --pico-primary-hover: #AAAAAA;
  --pico-primary: #FFBA00;
  --primary: #FFBA00;
  --primary-dark: #a97d0d;
  --primary-hover: #a97d0d;
  --primary-focus: rgba(216, 27, 96, 0.25);
  --primary-inverse: #FFF;

  --pico-background-color: var(--bg-dark);
  --pico-primary-background: var(--primary-dark);
  --pico-primary-hover-background: var(--primary-dark);
  --pico-primary-hover-underline: var(--primary-dark);
  --pico-text-selection-color: var(--primary-dark);

}

/* a { */
/*     color: var(--primary); */
/* } */


body {
}


.titlebar {
    position: sticky;
    top: 0;
    background-color: var(--bg-dark);
    border-bottom: var(--bg-light) solid 2px;
    padding: 5px;
    margin: 0px 0px 10px 0px;
    z-index: 10;
}

.titlebar ul {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    padding: 0px;
    margin: 0;
}

.titlebar-flex ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.titlebar ul li {
    text-align: center;
    text-justify: center;
    list-style: none;
}

.lockout-title {
    font-size: 3rem;
    font-family: Georgia, 'Times New Roman', Times, serif
}

.loginpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
}

.loginform {
    max-width: 85vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.loginform input {
    border: var(--bg-light) solid 1px;
}

.loginform button {
}

button, a[role=button] {
    padding: 12px;
}

main {
    padding: 0px 18px;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

.split {
    justify-content: space-between;
}

nav ul li {
    padding: 8px;

}

.score {
    font-size: 4rem;
}

.team1 {
    color: var(--team1color);
}

.team2 {
    color: var(--team2color);
}

.box-list {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 10px;
}

.box-list li {
    list-style: none;
}

.box-item {
    width: 100%;
    background-color: var(--bg-light);
    border: var(--bg-accent) solid 2px;
    padding: 20px;
}

.box-item h2, .box-item h3 {
    margin-bottom: 2px;
}

.box-item img {
    width: 25px;
    height: 25px;
}

.completed {
    background-color: var(--bg);
    border: var(--bg-light) solid 2px;
}


.completed h3, .completed p {
    color: var(--text-subtle);
}

.completed button:not(.secondary) {
    display: none;
}


.team1border {
    border: var(--team1color) solid 2px;
}

.team2border {
    border: var(--team2color) solid 2px;
}

.team1background {
    background: var(--team1color)60;
}

.team2background {
    background: var(--team2color)60;
}

.won {
    border: var(--primary-dark) solid 2px;
}

.icon-mini {
    width: 32px;
    height: 32px;
    padding: 5px;
}

.icon-sm {
    width: 48px;
    padding: 5px;
}

.icon-md {
    width: 64px;
    padding: 5px;
}

.completed {

}

.right {
    justify-content: flex-end;
}

.box-item button {
    max-height: 100%;
    padding: 2px 5px;
}

.box-item p {
    margin: 0px;
}

.flex-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flex-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.center {
    justify-content: center;
    text-justify: center;
    align-items: center;
}

.copyright {
    display: flex;
    flex-direction: column;
}

.copyright p {
    margin: 0px;
}

nav, .copyright {
    border-top: var(--bg-light) solid 2px;
    position: fixed;
    bottom: 0;
    width: 100vw;
    z-index: 10;
    background-color: var(--bg);
}

.navbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10pt;
}

.navbar-item img {
    max-height: 35px;
    height: 35px;
    padding: 5px;
}

.grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.info-block {
    background-color: var(--bg);
    border: var(--bg-accent) solid 2px;
    margin: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-block strong {
    font-size: 2rem;
}

.info-block p {
    margin: 0;
}


#notification {

	position: fixed;
	top: 10px;
	left: 10px;

    padding: 20px;
    width: calc(100vw - 20px);
    max-height: 20vh;
    overflow-y: auto;
    background-color: var(--bg);
    border: var(--bg-accent) solid 2px;

    animation: fadeOut 1s ease-in;

}

#notification h3, #notification p {
    margin: 0;
}


#modal {
	/* Underlay covers entire screen. */
    visibility: hidden;
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal .modal-content {
    position: relative;
    padding: 20px;
	top: 5vh;
    width: 80vw;
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--bg);
    border: var(--bg-accent) solid 2px;
}


#modal .modal-content footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
}

.modal-content h1 {
    margin: 0;
}


.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.versus {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    justify-content: center;
    justify-items: center;
    text-align: center;

}

.versus h4 {
    margin: 0;
    padding: 10px;
}

.versus ul {
    width: 80%;
    padding: 10px;
    /* background-color: var(--bg); */
    /* border: var(--bg-accent) solid 2px; */
}

.versus ul li {
    list-style: none;
}

.log {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 10px;
}


@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}