*,
*:before,
*:after         {
    box-sizing: border-box;
}
:root           {
    --lg-bg: linear-gradient( 25deg, rgb( 23 50 67 ) 50%, rgb( 0 40 168 ) 90% );
    --rl-bg: repeating-linear-gradient( 135deg, transparent 0 4px,rgb( 0 0 0 / 25% ) 3px 16px ),
             linear-gradient( 45deg, rgb( 0 0 0 / .6 ) 0, transparent 60% );
    --lg-tbl: linear-gradient( 25deg, rgb( 255 255 255 / .4 ), rgb( 255 255 255 / .1 ) 70% );
    --lg-tbl2: linear-gradient( 25deg, rgb( 255 255 255 / .15 ) 10%, rgb( 0 0 0 / .15 ) 80% );
    --lg-odd: linear-gradient( 180deg, rgb( 255 255 255 / .05 ), rgb( 255 255 255 / .09 ) );
    --lg-even: linear-gradient( 180deg, rgb( 0 0 0 / .03 ), rgb( 0 0 0 / .12 ) );
    --fr-bg: rgb( 0 0 0 / .4 );
    --fr-skygge: rgb( 0 0 0 / .2 );
    --fr-tx: rgb( 255 255 255 / .85 );
    --fr-gul: rgb( 235 180 50 );
}

html            {
    background-image: var( --rl-bg ), var( --lg-bg );
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 100%;
    max-height: fit-content;
    margin: 0;
    padding: 0;
}

body            {
    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: .9rem;
    font-weight: 400;
    color: var( --fr-tx );
}

header          {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var( --fr-bg );
    text-align: center;
    padding-block: 0 .4rem;
    font-size: 2.4rem;
    font-weight: 200;
    margin-left: -.5rem;
    text-shadow: -3px -6px 0 rgb( 100 100 250 ), -6px 2px 0 rgb( 250 205 100 / .5 ), 2px 7px 0 rgb( 235 180 50 / .8 );
    color: var( --fr-tx );
}

main            {
    display: block;
    min-height: calc( 100vh - 4.8rem );
    max-height: fit-content;
    max-width: clamp( 400px, 50%, 80vw );
    grid-auto-rows: minmax( 10px, 100vh );
    margin-inline: auto;
    overflow-y: auto;
    overflow-x: scroll;
    margin-top: 50px;
    grid-row: auto;
    row-gap: 0;
}

footer          {
    position: fixed;
    bottom: 0;
    min-width: 100%;
    background-color: var( --fr-bg );
    text-align: center;
    padding: .5rem;
    font-weight: 200;
    margin-left: -.5rem;
}

a               {
    color: var( --fr-tx );
    font-weight: 500;
    text-decoration: none;
}

a:hover         {
    color: var( --fr-gul );
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.menu			           {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: .2rem;
    height: 2rem;
    background-color: rgb( 255 255 255 / .13 );
    backdrop-filter: blur( .22rem );
    margin: .5rem;
    border-radius: .2rem;
    box-shadow: 2px 3px 6px 8px var( --fr-skygge );
}

.vuosi, .kaavio           {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: .4rem;
    height: 2rem;
    background-color: rgb( 255 255 255 / .13 );
    backdrop-filter: blur( .22rem );
    margin: .5rem;
    border-radius: .2rem;
    box-shadow: 2px 3px 6px 8px var( --fr-skygge );
}

.kuut           {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    min-height: 2rem;
    background-color: rgb( 255 255 255 / .13 );
    backdrop-filter: blur( .22rem );
    margin: .5rem;
    border-radius: .2rem;
    box-shadow: 2px 3px 6px 8px var( --fr-skygge );
    align-content: space-between;
    justify-content: space-around;
    padding-bottom: .6rem;
}

.main           {
    min-height: calc( 100vh - 10rem );
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login          {
    min-width: 90%;
    border-radius: .2rem;
    box-shadow: 2px 3px 6px 8px var( --fr-skygge );
    background-color: rgb( 255 255 255 / .13 );
    backdrop-filter: blur( .22rem );
    padding-inline: 1.5rem;
}

.menu           {
    margin-block: 1.2rem 1.4rem;
}

.menu > div      {
    text-align: center;
    margin-top: .5rem;
}
.menu > div > a      {
    cursor: pointer;
}

.kuut > div      {
    text-align: center;
}

.vuosi          {
    margin-top: 1.5rem;
    height: 6rem;
    gap: .2rem;
}

.vuosi > div:first-child    {
    grid-column: 1 / 4;
}

.vuosi > div        {
    text-align: center;
}

.vuosi > div > h4, .login h4, .kaavio h4, .modal h4, .modal__window h4   {
    text-align: center;
    text-transform: uppercase;
    margin-top: .5rem;
    margin-bottom: -.2rem;
    font-weight: 200;
    font-size: 1.5rem;
}

.modal > h4           {
    grid-column: span 3;
    color: rgb( 255 255 255 / .6 );
    margin-bottom: .5rem;
}

.kaavio > h4        {
    margin-top: -.4rem;
}

.login h4           {
    margin-block: .8rem .2rem;
}

.modal__window > h4 {
    margin-bottom: .8rem;
}

.kaavio             {
    display: grid;
    grid-template-columns: minmax( 360px, 90% );
    align-content: center;
    justify-content: center;
    margin-top: 1.5rem;
    height: 9rem;
}

.tiedot             {
    display: grid;
    grid-template-columns: repeat( 6, 1fr );
    grid-auto-columns: auto;
    gap: .4rem;
    max-height: 5rem;
    align-content: center;
    padding-inline: .5rem;
}

.tiedot > div       {
    text-align: center;
    font-size: .65rem;
    font-weight: 300;
}

.tieto              {
    height: 4rem;
}

.seli               {
    font-size: 1rem;
    font-weight: 200;
    margin-bottom: .4rem;
    text-transform: uppercase;
}

.ots                {
    padding-block: .6rem;
    text-transform: uppercase;
    font-weight: 300;
}

.kuurivi  {
    grid-column: 1 / 5;
    display:grid;
    grid-template-columns: repeat( 4, 1fr );
    padding: .7rem;
    background-image: var( --lg-even );
    align-content: space-between;
    justify-content: space-around;
}

.kuurivi:last-child     {
    padding-bottom: .5rem;
}

.kuu                    {
    text-transform: uppercase;
    font-weight: 500;
    font-size: .8rem;
}

.kuurivi:nth-child( odd )     {
    background-image: var( --lg-odd );
}

.login button, .modal button, .login input, .modal input, .login select, 
.modal select, .login textarea, .modal__window select, .modal__window input       {
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.--f-               {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: .6rem;
    padding-top: .8rem;
}

.--f-input          {
    grid-column: span 2;
    background-color: var( --fr-tx );
    border-bottom: 1px solid #fff;
}

.login  input[type="text"], .login  input[type="email"], .modal input[type="text"], .modal__window input[type="text"], 
.modal input[type="number"], .modal__window input[type="number"], 
.login  input[type="password"], .modal__window input[type="text"], 
.login select, .modal select, .modal__window select               {
    font: 1rem;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background-color: rgb( 255 255 255 / .3 );
    border-radius: .2rem;
    color: rgb( 0 0 0 / .8 );
}

.tx			{
	font: 1rem;
    display: block;
    box-sizing: border-box;
    grid-column: span 2;
    padding: 0.6rem 0;
    border-radius: .2rem;
    color: var( --fr-tx );
}

.--f- .btn, .modal .btn, .modal__window .btn          {
    background-color: rgb( 255 255 255 / .3 );
    color: rgb( 0 0 0 / .8 );
    max-width: 8rem;
    padding: .4rem;
    font-size: .9rem;
    font-weight: 400;
    border-radius: .2rem;
    backdrop-filter: blur( .4rem );
    margin-bottom: .8rem;
}

.modal__window .btn, .modal .btn     {
    padding-inline: 1rem;
}
.modal__window .btn:hover, .--f- .btn:hover, .modal .btn:hover   {
    background-color: rgb( 255 255 255 / .6 );
}

.url-grid           {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
}
.url-grid > div     {
    width: minmax( 45%, 45% );
    margin-bottom: .7rem;
}

.oik                {
    text-align: right;
}

hr                  {
    color: rgb( 255 255 255 / .3 );
}

/*          Modal       */
dialog              {
    z-index: 2;
}
.modal {
    margin-top: 25vh;
    padding: 1em;
    width: minmax( 400px, 80% );
    max-height: 16rem;
    border: none;
    background-color: rgba( 0 0 0 / .7 );
    border-radius: .2rem;
    box-shadow: 2px 2px 1em rgb( 0 0 0 / .5 );
    background-image: var( --rl-bg ), var( --lg-bg );
}
.rivi           {
    overflow: hidden;
    max-width: 100%;
    margin-bottom: .5rem;
    border: 1px solid transparent;
}    
.mol1           {
    max-width: 30%;
    float: left;
    line-height: 1.8rem !important;
    color: rgb( 255 255 255 / .8 );
}
.mol2           {
    max-width: 65%;
    float: right;
}
.meno           {
    text-align: right;
}

.ruoka, .asunto, .auto, .laake, .harrastus, .muu        {
    cursor: pointer;
}
#ru, #as, #au, #laa, #har, #mu        {
    visibility: hidden;
}
.oik            {
    text-align: right;
}

/*  modal    */
#moudal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba( 0 0 0 / .35 );
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur( .13rem );
}
.modal__window {
    margin-top: -2rem;
    position: relative;
    background-image: var( --rl-bg ), var( --lg-bg );
    background-color: rgb( 255 255 255 / .3 );
    padding: .5em 1.5em;
    min-width: 300px !important;
    border-radius: .3rem;
    color: rgb( 255 255 255 / .6 );
    backdrop-filter: blur( .22rem );
    box-shadow: 4px 4px 1em rgb( 0 0 0 / .5 );
}
.modal__close {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
}
#moudal:not(:target) {
    visibility: hidden;
    opacity: 0;
}
/*  modal    */