* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 20px;
  margin: 0 auto;
  text-align: center;
}


nav ul {
  list-style-type: none;
  padding: 0;
  font-size: 20px;
}

nav ul li {
  display: inline;
  margin: 0 5px;
}

h1 {
  font-weight: bold;
  font-family: "Garamond", Times, serif;

}

nav a:link, nav a:visited {
  color: rgb(0, 0, 0);
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

nav a:hover, nav a:active {
  background-color: rgb(168, 130, 211);
}

a:link, a:visited {
  color: rgb(15, 110, 131);
  padding: 5px;
  text-align: center;
  text-decoration: underline;
  display: inline-block;
}

a:hover, a:active {
  background-color: rgb(197, 240, 223);
}

main {
  width: 80%;
  margin: 0 auto;
  text-align: center;

}

:root {
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 80px;
}

body {
    overflow-x: hidden;
}

.button {
  background: #f6f68c;
  border: 2px solid #f44336;
}

.header {
  padding: 20px;
  text-align: center;
  background: #f5f52a;
  color: rgb(0, 0, 0);
  font-size: 50px;
  text-decoration: none;
}

#header {
  font-family: "Garamond", Times, serif;
}
#header h2 {
  font-weight: bold;
}


.age_group {
  width: 200px;
  border: 2px solid rgb(0, 0, 0);
  padding: 5px;
  margin: 10px;
  background-color: #ffffff;
}

.testing-image{
  width: 550px;
  height: 550px;
  border: 4px solid black;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;  
  background-color: #ffffff;
}

.testing-word {
  width: 200px;
  border: 2px dashed black;
  padding: 5px;
  margin: 20px auto 20px auto;
  background-color: #ffffff;
  font-size: 40px;
}

.testing-radio {
  width: 300px;
  border: 2px dashed black;
  padding: 5px;
  margin: 20px auto 20px auto;
  background-color: #ffffff;

}

.testing-buttons {
  margin: 20px auto 20px auto;
  width: 400px;
  border: 2px dashed black;
  padding: 5px;
  background-color: #ffffff;

  /* margin: 10px; */
}

.home-block {
  border: 2px solid black;
  margin-left: 5px;
  margin-right: 5px;  
}

#block1 {
  border: 2px solid black;
  background-color: rgb(180, 226, 184);
  margin: 5px;
  width: 150px;
  max-width: 500px;
  min-width: 400px;
}
#block2 {
  border: 2px solid black;
  background-color: rgb(235, 210, 178);
  font-size: small;
  margin: 5px;
  line-height: 5px;
  padding-top: 10px;
}
#block3 {
  border: 2px solid black;
  background-color: rgb(247, 136, 219);
  width: 500px;
}

#testingblock1 {
  border: 2px solid black;
  background-color: rgb(251, 222, 244);
  width: 600px;
  margin: 20px auto 20px auto;

}
#testingblock2 {
  border: 2px solid black;
  background-color: rgb(191, 255, 249);
  width: 600px;
  margin: 20px auto 20px auto;

}

#block4 {
  border: 2px solid black;
  background-color: rgb(83, 255, 31);
  margin: 5px;
  padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}
th {
    background-color: #c6de3e;
}

h2 {
  padding: 5px;
  padding-top: 20px;
}


/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}