/*
 This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
 which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
 Copyright (C) 2023 metamuffin <metamuffin.org>

@use 'chat'
@use 'logger'
@use 'room'
@use 'side'
@use 'menu'
@use 'start'
@use 'watches'

@import url("/assets/font/include.css")
@import url("/overrides.css")

:root
    --green: rgb(146, 243, 73)
    --red: #cf3f3f
    --textgrey: #bbbbbb
    font-weight: 300
    color: white

*
    font-family: "Ubuntu", sans-serif
    margin: 0px
    padding: 0px

body.start
    background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("/assets/tile-backdrop.svg")
    background-attachment: fixed
    background-size: cover, 750px
    background-color: var(--ac-dark)
    position: absolute
    inset: 0
    display: flex
    place-content: center
    align-items: center
    overflow: hidden

@media (max-width: 1000px) or (max-height: 700px)
    body.start
        background-size: cover, 500px

body
    height: 100dvh
    width: 100dvw
    overflow: hidden
    background-color: var(--bg-dark)
    display: flex
    flex-direction: column

h1
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
    font-size: 5em
    font-weight: 700
    text-align: center
    margin-bottom: 0.1em

input[type="button"],
button,
.side-ui-control
    color: white
    padding: 0.5em
    margin: 0.25em
    background-color: var(--ac)
    border: 0px solid transparent
    user-select: none
    border-radius: 3px
    font-size: small
    font-weight: 400
    cursor: pointer
    transition: filter 0.1s

input[type="button"]:hover,
button:hover,
.side-ui-control:hover
    filter: brightness(130%)

input:disabled,
button:disabled,
.side-ui-control:disabled
    filter: saturate(30%)

input[type="button"].active,
button.active,
.side-ui-control.checked
    filter: brightness(80%)

input[type="text"],
select,
input[type="number"]
    color: white
    background-color: var(--bg-dark)
    border: 1.5px solid grey
    border-radius: 3px

input:focus
    border-color: var(--ac-light)
    outline: none

button.abort
    left: 0px
    background-color: #9a2020

.side-ui-control input
    display: none

.icon
    height: 15px
    width: 15px
    vertical-align: sub
    margin-right: 0.25em