*, *: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-b1: linear-gradient( 25deg, rgb( 33, 60, 77 ) 50%, rgb( 10 50 178 ) 90% );
    --rl-b1: repeating-linear-gradient( 135deg, transparent 0 4px,rgba( 0, 0, 0, 0.25 ) 3px 16px ),
             linear-gradient( 45deg, rgba( 100, 100, 100, 0.3 ) 0, transparent 60% );
    --lg-b2: linear-gradient( 25deg, rgb( 53, 80, 97 ) 50%, rgb( 30 70 198 ) 90% );
    --rl-b2: repeating-linear-gradient( 135deg, transparent 0 4px,rgba( 255, 255, 255, 0.75 ) 3px 16px ),
             linear-gradient( 45deg, rgba( 120, 120, 120, 0.3 ) 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-mork: rgb( 0 0 0 / .8 );
    --fr-bg: rgb( 0 0 0 / .4 );
    --fr-skygge: rgb( 0 0 0 / .2 );
    --fr-tx: rgb( 255 255 255 / .85 );
    --fr-50: rgba( 255, 255, 255, .4 );
    --fr-01: rgba( 255, 255, 255, .1 );
    --fr-gul: rgb( 235 180 50 );
    --fr-bla: rgb( 94, 93, 240 );
    --fr-bl-4: rgba( 94, 93, 240, .4 );
}

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 );
}

#page {
  display: grid;
  width: 100%;
  height: 97dvh;
  grid-template-areas: "he" "po" "ma" "fo";
  grid-template-rows: .5fr .5fr 4fr .5fr;
}

#page > header {
  grid-area: he;
  font-size: 3rem;
  font-weight: 200;
  align-self: center;
  justify-self: center;
}

#page > div#pop {
  grid-area: po;
}

#page > main {
  grid-area: ma;
  align-self: center;
  justify-self: center;
  display: grid;
}

#page > main .total {
  align-self: center;
  justify-self: center;
  img {
    max-width: 50dvh;
  }
}

#page > main .btn {
  text-align: center;
}

#page > main .button, .zub {
  background: var( --fr-bla );
  border-radius: 10rem;
  box-shadow: var( --fr-bla ) 0 10px 20px -10px;
  /*box-sizing: border-box;*/
  color: var( --fr-tx );
  cursor: pointer;
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.8rem;
  padding: .5rem 3rem;
  text-transform: uppercase;
  letter-spacing: 25%;/*
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;*/
  border: solid 2px var( --fr-bl-4 );
  &:hover {
    background: var( --fr-bl-4 );
    border: solid 2px var( --fr-bla );
  }
}

#gron, #frug, #ber, #nod, #fro, #ndr {
  font-size: 100%;
}

.zub {
  padding: .1rem 3rem;
  margin-top: 1rem;
  box-shadow: none;
}

#page .main .login {
  padding: 2rem;
  border-radius: .6rem;
  box-shadow: var( --fr-tx ) 0 2px 5px 2px;
}

.login .kode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
}

#page main h4, #pop h3 {
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 25%;
  font-weight: 200;
}

#page > footer {
  grid-area: fo;
  align-self: end;
  justify-self: center;
}

[popover] {
	padding: 2rem;
	border: solid 0px var( --fr-mork );
	border-top: solid 2rem var( --fr-bla );
	background-color: var( --fr-tx );
	border-radius: 0 0 2rem 2rem;
	margin-top: 8.3rem;
	animation: fadeOut 1.5s forwards;
  select {
    border: none;
    padding: .2rem;
  }
}

#pop[popover] {
	&:popover-open
	{
		box-shadow: 0 2px 10px var( --fr-skygge );
		animation: fadeIn 1.5s forwards;
	}
	&::backdrop
	{
		background: var( --nav );
	}
}

.itemtx {
  text-transform: capitalize;
}

.btn button {
  font-size: 120%;
  display: block;
  width: 30dvh;
  padding: 1.5dvh 0;
  border: 2px solid transparent;
  text-transform: uppercase;
  border-radius: 5rem;
  margin: 20px auto;
  color: var( --fr-tx );
  background-color: var( --fr-bla );
  letter-spacing: 20%;
  font-weight: 100;
  &:hover {
    background-color: var( --fr-bl-4 );
    border: solid 2px var( --fr-bla );
  }
}

@media ( pointer: fine ) and ( orientation: portrait ) {
  #page > header {
    font-size: 5vw;
  }
  #page > footer {
    font-size: 2vw;
  }
}

@media ( pointer: fine ) and ( orientation: landscape ) {
  #page > header {
    font-size: 5vh;
  }
  #page > footer {
    font-size: 2vh;
  }
}

@media ( pointer: coarse ) {
  .button, .zub {
    font-size: 3vw;
    line-height: 5vw;
    padding: 2vw 6vw;
  }
  [popover] .itemtx {
    font-size: 400%;
  }
  [popover] select {
    text-transform: capitalize;
  }
}

@media ( pointer: coarse ) and ( orientation: portrait ) {
  #page > header {
    font-size: 9vw;
  }
  #page > footer, .button {
    font-size: 4vw;
  }
   #page main h4 {
    font-size: 5vw;
  }
  .label, .nput {
    font-size: 4vw;
  }
  .login .kode {
    margin-bottom: 2vw;
  }
  [popover] {
    min-width: 90vw;
    border-top: solid 6vw var( --fr-bla );
    border-radius: 0 0 4vw 4vw;
  }
  #pop h3 {
    font-size: 5vw;
  }
  [popover] select {
    height: 6vw;
    font-size: 200%;
  }
  .btn button {
    font-size: 300%;
    width: 50dvw;
    padding: 3dvw 0;
  }
}

@media ( pointer: coarse ) and ( orientation: landscape ) {
  #page > header {
    font-size: 12vh;
  }
  #page > footer {
    font-size: 4vh;
  }
   #page main h4 {
    font-size: 5vh;
  }
  .label, .nput {
    font-size: 4vh;
  }
  .login .kode {
    margin-bottom: 2vh;
  }
  [popover] {
    min-width: 90vh;
    border-top: solid 6vh var( --fr-bla );
    border-radius: 0 0 4vh 4vh;
  }
  #pop h3 {
    font-size: 5vh;
  }
  [popover] select {
    height: 6vh;
  }
  .btn button {
    font-size: 300%;
    width: 50dvh;
    padding: 3dvh 0;
  }
}