/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #ffffff;
  --color-text-main: #000000;
  --color-primary: #ffff00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #dddddd;
  color: black;
}


/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}



/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

body {
  font-family: HK Grotesk;
  background-color: var(--color-bg);
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #d0fff1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Very light scaling for our illustration */
.title {
  color: #2800ff;
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  font-size: 50px;
  line-height: 100%;
  margin: 0;
  text-align: center;
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}

.w2 {
  font-family: inherit;
  font-size: 35px;
  text-align: center;
}

/* Button - Add it from the README instructions 
button,
input {
  font-family: inherit;
  font-size: 75%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  padding: 1rem 0.0rem;
  transition: 500ms;
}*/

/* Subheading */
h2 {
  color: #2800ff;
}

/* Interactive image */
.illustration:active {
  transform: translateY(5px);
}

/* Button dip
- Toggling this class on and off will move it down and up again
- The button transition property above determines the speed of the translate (500ms)
*/
.dipped {
  transform: translateY(5px);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  background: white;
  border-radius: 10px;
  border: 1px solid #555;
}
input[type="checkbox"]:checked {
  background: #080808;
}

.check {
  text-align: center;
}

table td#R {
  background-color: #ff9800;
  border: 1px solid black;
}
table td#G {
  background-color: #4caf50;
  border: 1px solid black;
}

th,td {
  padding: 10px;
}

table td {
  border: 1px solid black;
  
}



table {
  font-size: 20px;
  text-align: center;
  width: 100%;
  
}



.score {
  font-size: 10px;
  text-align: center;
  width: 100%;
}

input[type="button"] {
  position: relative;
  top: 0px;
  font-size: 15px;
  border: 5px 5px 5px;
  width: 8%;
  height: 35px;
  text-align: center;
  touch-action: manipulation;
  background-color:#000000;
  color:#ffffff;
  -webkit-appearance: none; 
  border-radius: 0; 
  #del {
    width: 20%;
  }
}

form {
  position: relative;
  top: 10px;

  max-width: 100%;
}



.aspectwrapper {
  display: inline-block; /* shrink to fit */
  width: 100%; /* whatever width you like */
  position: relative; /* so .content can use position: absolute */
}
.aspectwrapper::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: "";
}
.content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0; /* follow the parent's edges */
  outline: thin dashed green; /* just so you can see the box */
}

.virtualkey {
  #footer {
    position: fixed;
    bottom: 0px;
      margin-left: auto;
  margin-right: auto;
    width:100%;
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  font-size: 20px;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 14px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}



/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}



/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}