:root {
    --content-weight: 1000px;
    --content-padding: calc( (100vw - var(--content-weight)) / 2 );
    --default-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
    --responsity-padding: 10px;

    --color-background: rgba(240, 240, 240, 1);
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*
    background: url('https://m.media-amazon.com/images/I/91tF-L+0x7L.png') no-repeat center center fixed;
    background-size: cover;
    */
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}

body * {
    box-sizing: border-box;
    user-select: none;
}

a[goto]:not([disabled]),
a[goto]:not([disabled]):hover {
    cursor: pointer;
}


content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--navbar-height));
    margin-top: calc(var(--navbar-height));
    /* padding: 20px var(--content-padding);*/
    overflow-y: scroll;
}



content page {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: left;
    position: relative;
    width: 100%;
    max-width: var(--content-weight);
    padding: var(--responsity-padding);
}

page box {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--content-weight);
    padding: 20px;
    margin: 10px 0px;
    border-radius: 2px;
    background-color: white;
    box-shadow: var(--default-box-shadow);
}

h1 {
    margin: 0;
    font-size: 30px;
    width: 100%;
    max-width: var(--content-weight);
    padding-bottom: 20px;
}

h1::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: blue;
    margin-top: 4px;
    opacity: 0.25;
}

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