:root {
  --footer-height: 42px;
  --color-black: #161617;
  --default-copy-icon-color: white;
  --default-highlight-copy-icon-color: #e4adff;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--color-black);
  color: white;
  margin: 0;
  font-size: 16px;
  box-sizing: border-box;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a,
a:visited {
  color: #f5cd66;
  text-decoration: none;
  text-align: center;
}

a.ui,
a.ui:visited,
a.button,
a.button:visited {
  color: inherit;
}

a:hover {
  text-decoration: underline;
}

a.ui:hover,
a.button:hover,
a:hover {
  text-decoration: none;
}
.icon {
  height: 1em;
  width: auto;
  margin-inline-start: 0.5ch;
  margin-inline-end: 0.5ch;
}

/* button,
.button:not(.ui),
input[type="submit"] {
  border-image: conic-gradient(
      #f15a24 0,
      #fbb03b 73deg,
      #29abe2 128deg,
      #522785 266deg,
      #ed1e79 308deg,
      #f15a24 360deg
    )
    1;
  border-style: solid;
  border-width: 2px;
  background-color: #666;
  width: fit-content;
  padding: 5px 10px;
  color: white;
  display: flex;
  justify-content: center;
} */

/* button:disabled,
.button:not(.ui):disabled,
input[type="submit"]:disabled {
  border-image: conic-gradient(
      #818181 0,
      #b9b9b9 73deg,
      #8a8a8a 128deg,
      #3e3e3e 266deg,
      #666666 308deg,
      #818181 360deg
    )
    1;
  background-color: #aaa;
  cursor: not-allowed;
  border-radius: 5px;
} */

.error {
  color: orangered;
}

.button_primary {
  background-color: #29abe2;
  margin: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: center;
  min-width: 100px;
  border: 3px solid #161617;
  flex-grow: 1;
  font-size: 16px;
}

.button_primary:hover {
  border: 3px solid #2e3e9b;
}

.form {
  padding: 40px 35px;
  border-radius: 15px;
  border: solid 2px rgb(123, 117, 117);
  line-height: 1.3rem;
}
.form > div > label {
  margin-bottom: 0.5rem;
}
.form input,
select {
  border-radius: 0.25rem;
  background-color: #282829;
  border: solid 1px #282829;
  color: white;
  line-height: 1.5rem;
}
.form_text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #7f858a;
}
.div_button_primary {
  display: flex;
  justify-content: center;
}
.button {
  font-size: 16px;
  height: 2em;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
}
.button1 {
  border-radius: 4px;
  background-color: transparent;
  margin: 5px;
  border: solid 1px #0f62fe;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em;
  color: white;
}
.button1:hover {
  background-color: #0f62fe;
  cursor: pointer;
}
.button2 {
  border-radius: 4px;
  background-color: transparent;
  margin: 5px;
  border: solid 1px #f15a24;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em;
  color: white;
}
.button3:hover {
  background-color: #f15a24;
  cursor: pointer;
}
.section {
  font-size: 1.4em;
  font-family: "Noto Sans", sans-serif;
  padding: 10px 0;
}

#snackbar {
  margin: auto;
  width: fit-content;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: pre-line;
  visibility: hidden;
  font-size: 13px;
  min-width: 250px;
  max-width: 350px;
  line-height: 1.7;
  height: fit-content;
  background-color: rgb(215 215 215);
  color: rgb(7, 7, 7);
  border-radius: 5px;
  padding: 15px 20px;
  position: fixed; /* Sit on top of the screen */
  z-index: 1;
  top: 150px;
  box-shadow: 2px 2px 2px #646161;
}

#snackbar.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0ms;
  z-index: 30;
}

#snackbar {
  visibility: hidden;
  opacity: 0;
  transition: opacity 500ms ease-in, visibility 0ms ease-in 300ms;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav:hover .subnav-content {
  visibility: visible;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: grey;
}
.subnav-content {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  z-index: 1;
  background-color: #808080;
  padding: 10px 0;
}

/* Style the subnav links */
.subnav-content > div,
.subnav-content > a {
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: left;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}
.subnav-content div:hover {
  background-color: #eee;
  color: black;
}

.smui-paper {
  padding: 14px;
}
.smui-paper:hover {
  outline: solid 4px #fbb03b;
}
