:root {
    --border_radius: 200px;
    --colour1: #51986E;
    --colour2: #6ECB60;
    --colour3: #DBE6BB;
    --colour4: #C1A36A;
    --colour5: #98615A;
    
  } 
body {
    background-color: var(--colour5);
    padding-top: 0;
    margin: 0px;
    overflow-x: hidden;
}
.banner {
    text-align: center;
    font-size: 10vw;
    background-color: var(--colour1);
    color: white;
    margin: 0px;
    padding: 26px;
    border: black;
    font-family: "Comic Sans MS", "Comic Sans";
}
.factstyle {
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: var(--colour1);
  padding: 10px;
  margin: 0;
  font-size: 2vw;
  border-top: 5px solid var(--colour2);
}
.container {
  display: flex;
}
/* TODO need to figure out how to get the first child last/child to work*/
.container > :first-child {
  border-top-left-radius: var(--border_radius);
  border-bottom-left-radius: var(--border_radius);
}
.container > :last-child {
  border-top-right-radius: var(--border_radius);
  border-bottom-right-radius: var(--border_radius);
}
textarea {
  background-color: var(--colour1);
  border: 2px black solid;
  color: white;
  cursor: pointer;
}
textarea::-moz-selection {
border: 5px black solid;
}
.buttonlook {
  background-color: var(--colour4);
  border: black 2px solid;
  border-radius: 5px;
  font-weight: bolder;
  color: black;
  padding: 10px;
  cursor: pointer;
}
.buttonlook:hover {
  background-color: var(--colour3);
}
.instruction-box {
	margin:1%;
	border: 2px white solid;
	color:black;
  font-weight:bold;
	background-color: var(--colour4);
	height:105%;
	padding: 5px; 
}

.top_button_menu {
    flex: 1;
    background-color: var(--colour4);
    border: 1px black solid;
    font-weight: bold;
    font-size: large;
    color: white;
    width: 100%;
    height: 50px;
    border-radius: 5px;
}
@keyframes bar_down {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.time_bar {
  height: 10px;
  border: var(--colour2) solid 2px;
  background-color: var(--colour1);
}
.time_bar.start-animation {
  animation: bar_down 10s linear infinite;
}
@keyframes boing {
    50% {
        transform: scale(1.11);
      }
      100% {
        transform: scale(1);
      }
    }
 /* Dropdown Button */
 .dropbtn {
  color: white;
  padding: 16px;
  font-size: 16px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  background-color: var(--colour4);
  border: black 2px solid;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  position: absolute;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-weight: bold;
  color: white;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--colour1);}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;} 
:hover.top_button_menu {
    background-color: var(--colour1);
    animation: boing 1s ease-in-out;
}
.money_sect {
  display: flex;
}
.money_img_size {
  width: 100px;
  height: 50px;
}
.money_font_size {
  font-size: 150%;
  font-weight: bold;
}
.button_withimage {
  background-size: cover; 
  background-position: center;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
.selected {
  border: var(--colour2) 50px;
  background-color: var(--colour1);
}
.unselected {
  border: none;
  background-color: none;
}