:root {
    --base-width: 80%;
}

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

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--base-width);

    margin: 0 auto;
    background: linear-gradient(90deg, rgba(45, 5, 58, 1) 0%, rgba(9, 4, 54, 1) 100%);
}

header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;

    position: absolute;
    z-index: 2;
    top: 0;

    padding: 15px calc((100% - var(--base-width)) / 2);
    border-bottom: 5px solid rgba(9, 4, 54, 1);
    background: linear-gradient(90deg, rgb(79, 26, 90) 0%, rgb(19, 12, 77) 100%);
    box-shadow: 0 4px 20px rgba(9, 4, 54, 1);
}

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

section, footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-height: 100svh;
    padding: 50px 0;
}

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

    list-style-position: inside;
}

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

    padding: 20px;
}

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

.block {
    position: relative;
    width: 100%;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;

    width: 100svw;
    height: 100svh;

    background: linear-gradient(90deg, rgb(79, 26, 90) 0%, rgb(19, 12, 77) 100%);
    cursor: pointer;
}