/*
 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@disroot.org>

@use 'chat'
@use 'logger'
@use 'room'
@use 'prefs'
@use 'menu'

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

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

body.start
    background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./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

body
    font-weight: 300
    background-color: var(--bg-dark)

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
    padding: 0.5em
    margin: 0.25em
    background-color: var(--ac)
    border: 0px solid transparent
    border-radius: 3px
    font-size: small
    font-weight: 400

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

input[type="button"].active,
button.active,
.side-ui-control:active
    filter: hue-rotate(20deg)

input[type="text"],
select,
input[type="number"]
    background-color: var(--bg-dark)
    border: 1px solid var(--ac-light)

input:disabled,
button:disabled,
.side-ui-control:disabled
    filter: sepia(90%)

.side-ui-control input
    display: none

.start-box
    text-align: center
    position: absolute
    max-width: 64em

.instructions
    margin-bottom: 0.5em
    font-size: x-large
    color: #c5c5c5
    text-align: left

.start-box input[type="text"]
    margin: 2em 0 1em 0
    width: 25em
    font-weight: 500
    color: whitesmoke
    border: 0.15em solid var(--ac)
    background-color: rgba(0, 0, 0, 0.3)
    backdrop-filter: blur(5px)
    border-radius: 0.5em
    outline: none

.start-box input[type="text"]:focus
    transition: 0.1s ease-out
    background-color: rgba(0, 0, 0, 0.5)
    border-color: lightgray !important

.start-box input[type="button"]
    margin: 1em 0 1em 0
    border-radius: 0.5em
    font-size: x-large
    width: 12em
    padding: 0.5em
    font-weight: 500
    color: white
    background-color: var(--ac)
    backdrop-filter: blur(5px)
    border: 0
    cursor: pointer
    border: 0.15em solid var(--ac)

.start-box .description
    margin-bottom: 1.5em
    font-size: x-large
    font-weight: bold
    text-align: center

.main
    height: calc(100vh - 64px)
    display: flex

#room-id-input
    padding: 0.5em
    font-size: x-large

@media (max-width: 1100px)
    .start-box
        max-width: 90%

    .start-box input[type="text"]
        width: 90%

@media (max-width: 900px) and (max-height: 700px), (max-height: 550px)
    h1
        font-size: 3em
        font-weight: 700
        text-align: center

    .instructions
        font-size: large

    .start-box .description
        font-size: large

    #room-id-input
        padding: 0.5em
        font-size: large

    .start-box input[type="button"]
        font-size: large