* {margin: 0; padding: 0; box-sizing: border-box;}
page, section, menu, workspace, screen, name, canvas, item, title {display: block;}
body {font-size: 12px;}
body, * {font-family: 'Arimo', sans-serif;}
body {--bg: #598775; --dark: #302927; --light: #DCDADA; --second: #811B18; --main: #B76B5E; --pad: 4px;}

body { background: var(--dark); position:relative; height: 100%;}
#screen:after, #screen:before {content: ""; display: block; width: 100%; height:100%; position: absolute; top: 0; left: 0;}
#screen:after {background: var(--dark); z-index: -2; opacity: 0.8;}
#screen:before {background: url("../appicon/icon.svg") center no-repeat, var(--dark); z-index: -3;
    background-position: 50% 50%;
}

page {height:100vh; width:100vw; display:flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#screen {
    height: 95%; width: 95%; flex-shrink: 3; min-height: 0; position: relative; overflow: hidden; margin-bottom: 4vmin;
}
#container {
    position: absolute;
    display:grid; grid-gap: 3%; grid-template-columns: repeat(12, 5.5833%); grid-template-rows: repeat(12, 5.5833%);
}
.card {
    background: var(--main); border-radius: 5%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: #0000007d 1px 2px 6px, inset #2020374f -7px -3px 25px;
}
.number {font-weight: 900; font-size: 5vmin; color: var(--light)}
.starter {
    height: 37%; width: 100%;
    margin-bottom: 1vmin;
    background-image: url(../img/starter2.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity:1;
}
.notStarter .starter {opacity:1; background-image: url(../img/starter3.svg);}
.notStarter.newCard .starter {opacity: 0}


input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 30px;
    padding: 3px;
    border: 2px solid var(--light);
    border-radius: 5px;
  }
  
  input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--main);
    box-shadow: inset 1em 1em var(--form-control-color);
  }
  
  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }

  button {
    margin:11vmin; margin-bottom: 2vmin;
    letter-spacing: 0.8vmin;font-weight: 900; background: var(--main); border: none; color: var(--light); text-transform: uppercase; padding:2.8vmin 5vmin; font-size: 5vmin; border-radius: 1vmin;
    box-shadow: #211f20 5px 3px 8px, inset #d9bfbf70 1px 1px 0px, inset #1a193870 -10px -8px 19px, inset #342c33bd -1px -2px 2px;
    transition: all linear 0.1s;
  }
  button:hover {
    background: var(--main);
    box-shadow: #211f20 2px 2px 8px, inset #d9bfbf70 1px 1px 0px, inset #342c339e -6px -5px 19px, inset #342c33bd -1px -1px 2px;
  }
  button:active {
    padding: 3vmin 4.8vmin 2.6vmin 5.2vmin;
    background: var(--main);
    box-shadow:#211f2038 -1px -1px 2px, inset #d9bfbf0d -4px -4px 4px, inset #342c333b -6px -5px 19px, inset #342c33d6 2px 2px 5px;
  }