:root {
      --bg-color: #eee;
      --card-color: #11eea5;
      --buttons-color: #339dff;
      --topBar-color: #fff;
    }

    #content {
      width: min(600px, 100%);
      display: flex;
      background: #fff;
      align-items: center;
            flex-direction: column;
      transition: transform 0.5s;
      justify-content: center;
	  border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
margin-top: 58px;
box-shadow: 2px 2px 10px gray;
    
	  
    }

    #topBar {
      position: fixed;
      background: var(--topBar-color);
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 48px;
	  box-shadow: 0 1px 3px lightgray;
    }

    #topBar button {
      height: 40px;
      font-size: 20px;
      display: flex;
    }

    #stat {
      text-align: center;
      flex-grow: 1;
      /*font-size: 24px; remove for smartphone*/
    }

    #stat span {
      cursor: help;
    }

    #cardFrame {
      flex: auto 1 1;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: xx-large;
      cursor: pointer;
      flex-direction: column;
      padding: 10px;
      user-select: none;
      height: 100%;
    }

    button {
      border: none;
      color: white;
      background: var(--buttons-color);
      /*flex:100% 1 1;*/
      padding: 0;
      margin: 5px;
    }
	button[disabled]{
		background-color:gray;
		color:darkgrey;
	}


button#easy:hover{
	border-bottom-color: #21a9bf;
}

button#known:hover{
	border-bottom-color:#3bd06f;
}

button#unknown:hover{
	border-bottom-color:#aa4135;
}

    /*#known {
			background: #50ff63;
		}
		#unknown {
			background: #ff5f57;
		}*/
    html {
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      min-height: 100%;
      margin: 0;
      font-family: Go, "Open Sans", sans-serif;
      background: var(--bg-color);
    }

    .cardButtons {
      display: flex;
      width: 100%;
	  border-top: dashed 3px gray;
    }
	
	.cardButtons button{
		box-shadow: 2px 2px 5px lightgray;
border: solid 4px transparent;
color: #444;
	}

    #back {
      opacity: 0;
    }

    #content.flipped #front {
      opacity: 0;
    }

    #content.flipped #back {
      opacity: 1;
    }

    #back,
    #front {
      transition: all 0.3s;
    }

    .cardButtons .side1 {
      display: flex;
      flex: auto 1 1;
    }

    .cardButtons .side2 {
      flex: auto 1 1;
    }

    .side2 {
      display: none;
    }

    .side1 img,.side2 img {
      width: 100%;
      height: 100%;
      object-fit: contain; 
      object-position: center;
    }

    .side1 svg,.side2 svg {
      width: 100%;
      height: 100%;
      object-fit: contain; 
      object-position: center;
    }

    .flipped #card .side2 {
      display: block;
    }

    .flipped .cardButtons .side2 {
      display: flex;
    }

    #card {
      font-size: xx-large;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5px;
    }

    .cardButtons button {
      font-size: 40px;
      flex: auto 1 1;
    }

    #card {
      flex: auto 1 1;
    }

    .flipped .side1 {
      display: none;
    }

    body.end #card {
      display: none;
    }

    body.end .cardButtons {
      display: none;
    }

    button .icon {
      font-weight: bold;
      text-shadow: 1px 1px 2px black;
      background: white;
      color: #11eea5;
      padding: 0 3px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 35px;
    }

    button .textIcon {
      padding: 3px;
      margin: 3px;
    }

    button#validatePackage {
      padding: 15px;
      margin: 5px;
      font-size: xx-large;
    }

    #unknown {
      background: #f9b3ac;
    }
#known{
background:#a5ffc4;
}

    #easy {
      background: #a9f3ff;
    }

button{
border-radius:10px;
box-shadow: 2px 2px 5px lightgray;
}

    #flip {
      background: var(--buttons-color);
	  color: white;
	  border-bottom: solid 4px transparent;
    }
	
	#flip:hover{
		border-bottom-color: #003f79;
	}

    #endMessage {
      display: none;
      align-self: center;
    }

    .end #endMessage {
      display: block;
    }

    #packageSelectorDiv {
      min-height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #eee;
      display: flex;
      flex-direction: column;
    }

    #packageSelectorDiv.hidden {
      display: none;
    }


    #packageSelector {
      display: flex;
      flex-flow: column;
    }

    /*NAVBAR*/
    #menuToggle {
      display: block;
      position: relative;
      top: 3px;
      left: 50px;

      z-index: 1;

      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle a {
      text-decoration: none;
      color: #232323;

      transition: color 0.3s ease;
    }

    #menuToggle a:hover {
      color: tomato;
    }


    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;

      cursor: pointer;

      opacity: 0;
      /* hide this */
      z-index: 2;
      /* and place it over the hamburger */

      -webkit-touch-callout: none;
    }

    /*
 * Just a quick hamburger
 */
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;

      background: #cdcdcd;
      border-radius: 3px;

      z-index: 1;

      transform-origin: 4px 0px;

      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child {
      transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }

    /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
    #menuToggle input:checked~span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }

    /*
 * But let's hide the middle one.
 */
    #menuToggle input:checked~span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
 * Ohyeah and the last one should go the other direction
 */
    #menuToggle input:checked~span:nth-last-child(2) {
      transform: rotate(-45deg) translate(0, -1px);
    }

    /*
 * Make this absolute positioned
 * at the top left of the screen
 */
    #menu {
      position: absolute;
      min-width: 100px;
      margin: -100px 0 0 -50px;
      padding: 15px;
      padding-top: 110px;

      background: #ededed;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */

      transform-origin: 0% 0%;
      transform: translate(-100%, 0);

      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
      padding: 10px 0;
      font-size: 22px;
	  border-bottom: solid thin;
    }

    /*
 * And let's slide it in from the left
 */
    #menuToggle input:checked~ul {
      transform: none;
    }