/******************************************************************************
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: #69F7BE;
  --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";
}

/* 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");
}

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

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

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

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

/* 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);
}

a {
  text-decoration: underline;
}

p {
  line-height: 1em;
}

.results-group {
  border: 1px dashed;
  padding: 10px;
  margin: 8px;
  width: 225px;
  float: left;
  border-radius: 8px;
}

.results-group:hover {
  cursor: grab;
}

.main-word {
  font-weight: bold;
  text-decoration: none;
  margin: 13px 0;
  width: 90%;
}

.buttons {
  float: right;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  height: 50px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

/* Dropdown Button */
.dropbtn {
  background-color: white;
  color: black;
  padding: 3px 8px;
  font-size: 16px;
  border: none;
  width: 100%;
  margin: 3px 0;
  text-align: left;
}

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

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 100%;
  box-shadow: 2px 2px 16px 8px rgb(0 0 0 / 40%);
  z-index: 1;
  left: 60px;
  top: 30px;
  cursor: help;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* 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: #d1d1d1;
}

sub {
  font-size: 0.5em;
}

.omniscore {
  float: right;
  color: grey;
  opacity: 0.4;
}

.pos {
  float: right;
  color: grey;
  opacity: 0.3;
  font-size: 0.8em;
}

.close {
  text-decoration: none;
  font-size: 0.8em;
  color: grey;
  position: absolute;
  right: 10px;
}

a:hover {
  color: black;
}

.close:hover {
  cursor: crosshair;
}

/* .noun {
    color: red;

}
.verb {
    color: blue;

}
.adjective {
    color: greent;

} */