:root {
    --padding-default: 1rem;
    --radius-default: 5px;
    --transition-default: 150ms;

    --color-white: white;
    --color-red: #cc0001;
    --color-blue-light: #61a7fd;
    --color-blue: #2e86de;
    --color-blue-dark: #1b4b7f;
    --color-grey: #c7c7c7;

    --color-main: var(--color-blue);
    --color-main-light: var(--color-blue-light);
    --color-main-dark: var(--color-blue-dark);

    --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
    --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    font-family: sans-serif;
}

.card {
    overflow: hidden;
    border-radius: var(--radius-default);
    border: 1px solid var(--color-main);
    box-shadow: var(--box-shadow-z2);
}

.content {
    padding: 1rem;
    min-height: 100dvh;
}

.pc-wrapper {
    gap: 1rem;
    margin-bottom: 1rem;
}

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

.flex-row {
    display: flex;
    flex-direction: row;
}

.text-white {
    color: var(--color-white);
}

.bg-main {
    background-color: var(--color-main);
}

.bg-main-hover:hover {
    background-color: var(--color-main);
}

.bg-main-dark {
    background-color: var(--color-main-dark);
}

.bg-main-dark-hover:hover {
    background-color: var(--color-main-dark);
}