@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);
  --orange: rgb(255, 165, 0);
  --dark-gray: rgb(51, 51, 51);
  --medium-gray: rgb(96, 96, 96);
  --light-gray: rgb(204, 204, 204);
  --light-gray2: #aaa;
  --desat-orange: rgba(238, 223, 140, 0.322);
  --desat-orange2: rgba(238, 223, 140, 0.25);
  --dark-blue: rgb(49, 49, 88);
  --common-border: 1px solid rgba(7, 7, 87, 0.618);
  --common-border2: 2px solid #888;
  --common-box-shadow: 0 5px gray;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #e0e7ef;
  color: var(--black);
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header {
  margin-bottom: 2em;
}

header,
footer {
  font-family: "Architects Daughter", cursive;
  font-size: 120%;
}

main {
  padding-bottom: 5em;
}

.hero {
  font-family: "Roboto", sans-serif;
  font-size: 120%;
}

button {
  font-family: "Roboto", sans-serif;
}

h4 {
  margin: 0;
}

a,
a:visited {
  text-decoration: none;
  color: var(--black)0cd;
}

a:hover,
a:focus {
  text-decoration: underline;
}

ul.noun-words {
  list-style: none;
}

.container,
.notes-container,
.footer-container {
  width: 85%;
  max-width: 1100px;
}

.notes-container {
  margin: 0 auto 3em;
}

.header {
  padding: 0.75em 0;
  // background-color: var(--desat-orange2);
  // background-color: var(--dark-blue);
  // color: #e0e7ef;
}

.header-title,
.sub-headline {
  text-align: center;
}

.header-title, .notes-title {
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 400;
  margin: 0;
  padding: 0.5em 0 0;
  letter-spacing: 0.125em;
}

.sub-headline {
  margin: 0 0 1em;
  color: var(--medium-gray);
}

nav,
.logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo span {
  font-weight: 900;
  color: var(--dark-blue);
  letter-spacing: 0.25em;
}

.nav-list {
  display: flex;
  justify-content: flex-end;

  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  font-weight: 600;
  transition: color 250ms ease-out;
}


.nav-link:hover,
.nav-link span:hover,
.nav-list.active {
  text-decoration: none;
  color: rgb(170, 144, 1);
}

.nav-item+.nav-item {
  margin-left: 1.5em;
}

/* ----------HEADER ABOVE--------------------- */
main,
section,
.box,
.keybrd-row,
.alphabet,
.footer-container,
.container {
  margin: 0 auto;
}

.alphabet {
  background-color: rgba(0, 0, 0, 0.247);
  display: block;
  padding: 1.5em;
}

.top-items,
.keybrd-row {
  list-style: none;
  padding: 0;
}

.keybrd-box2 > .top-items button,
.keybrd-box2 > .keybrd-row button {
  margin: 0.125em;
  padding: 0.25em 0.5em;
}

.keybrd-box2 > .top-items {
  display: flex;
  justify-content: center;
}

.keybrd-box2 > .top-items > button {
  width: 3.75em;
  margin: 0.25em 0.25em;
  font-size: 0.875rem;
}

.keybrd-box2 > .top-items > .numpad {
  width: 2em;
  font-size: 0.9rem;
  margin: 0.25em 0.5em;
  padding: 0.375rem;
}

.keybrd-box2 > .top-items > .zero2 {
  width: 5em;
}

.top-items button,
.keybrd-row button,
.special-items button {
  display: inline-block;

  margin: 0.25em;
  padding: 0.375em 0.75em;
  color: var(--dark-gray);
  background-color: var(--white);
  border: var(--common-border);
  border-radius: 0.25em;
  transition: box-shadow 250ms ease-in-out;
}

.top-items button,
.keybrd-row button {
  font-size: 1rem;
}

.special-items button {
  font-size: 0.9375rem;
}

#backspace {
  font-weight: bold;
}

.top-items>.secondary {
  border: none;
  color: var(--light-gray);
  background-color: var(--white);
}

.top-items>.secondary:hover {
  cursor: unset;
  color: var(--light-gray);
  background-color: var(--white);
  box-shadow: none;
}

.top-items>.secondary:active {
  color: var(--light-gray);
  background-color: var(--white);
  box-shadow: none;
  transform: translateY(0);
}

.top-items button:hover,
.keybrd-row button:hover,
.special-items button:hover {
  cursor: pointer;
  color: var(--black);
  background-color: var(--light-gray);
  box-shadow: 0.125em 0.125em 0.25em rgba(7, 7, 87, 0.95);
}

.keybrd-row .caps-on,
.keybrd-row .caps-on:hover,
.keybrd-row .shift-on,
.keybrd-row .shift-on:hover {
  background-color: var(--orange);
  box-shadow: var(--common-box-shadow);
  /* transform: translateY(2px); */
}

.top-items button:active,
.keybrd-row button:active,
.special-items button:active {
  background-color: var(--orange);
  box-shadow: var(--common-box-shadow);
  transform: translateY(2px);
}

/* text area and copy */
.main-section {
  margin-top: 4em;
  position: relative;
}

.text-box {
  display: block;
  width: 85%;
  height: 10em;
  font-family: "Roboto", sans-serif;
  margin: 2.5em auto 1.5em;
  background-color: var(--white);
  font-size: 1.125rem;
  color: #222;
  overflow: auto;
  padding: 0.5em;
  box-shadow: inset 0.125em 0.125em 0.375em #666;
  /* outline: 1px solid blue; */
}

.text-box:focus {
  outline: 1px solid green;
  box-shadow: inset 0.125em 0.125em 0.375em #666;
}

.text-box:focus::placeholder {
  color: transparent;
}

.text-box::placeholder {
  color: #aaa;
}

.copy-btn,
.clear-btn {
  cursor: pointer;
  display: block;
  position: absolute;
  background-color: var(--desat-orange);
  color: var(--black);
  padding: 0.25em 0.5em;
  border: var(--common-border2);
  border-radius: 0.25em;
}

.copy-btn {
  top: -5.2%;
  right: 7.5%;
}

.clear-btn {
  top: -5.2%;
  right: 21%;
}

.copy-btn:hover,
.clear-btn:hover {
  background-color: rgba(246, 185, 17, 0.722);
}

.copy-btn:active,
.clear-btn:active {
  background-color: var(--orange);
  color: var(--black);
}

.two-col {
  width: 85%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}

.keybrd-box,
.keybrd-box2 {
  border: 1px solid #888;
  background-color: var(--desat-orange);
  color: var(--black);
  border-radius: 0.375em;
}

.keybrd-box {
  width: 78%;
  max-width: 1000px;
  margin: 0 auto 2em;
  padding: 1.625em 0;
}

.keybrd-box2 {
  width: 22%;
  height: max-content;
  font-size: 0.5rem;
  margin: 0 auto 0.5em;
  padding-bottom: 0.125em;
}

.keybrd-row {
  display: block;
  text-align: center;
}

.keybrd-row button {
  font-weight: bold;
}

.spacebar {
  width: 40%;
}

.top-words,
.noun-words {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.top-words button,
.noun-words button {
  display: inline-block;
  font-size: 1rem;
  margin: 0.25em;
  padding: 0.375em 0.75em;
  color: var(--dark-gray);
  background-color: var(--white);
  // border: var(--common-border);
  border-radius: 0.25em;
  transition: box-shadow 250ms ease-in-out;
}

.top-words button:hover,
.noun-words button:hover {
  cursor: pointer;
  color: var(--black);
  background-color: var(--orange);
  box-shadow: 0.125em 0.125em 0.25em rgba(7, 7, 87, 0.95);
}

.top-words button:active,
.noun-words button:active {
  background-color: var(--orange);
  box-shadow: var(--common-box-shadow);
  transform: translateY(2px);
}

/* -------end Alpha ----------- */

/* -------------notes and docs----------------------- */
.notes {
  background-color: var(--white);
  border: 1px solid #bbb;
}

.border {
  padding: 3em 0;
}

.notes {
  margin-top: 2em;
}

.technical h3,
.technical h4 {
  margin-bottom: 0;
  padding: 1em 0 0;
}

/* -------------footer----------------------- */

footer {
  text-align: center;
  background-color: var(--dark-blue);
  color: var(--white);
  padding: 1em 0 0;
}

footer h3 {
  padding: 1em 0 0.75em;
  margin: 0;
  font-weight: 700;
}

.footer-box {
  padding-bottom: 1em;
}

.footer-nav {
  display: flex;
  justify-content: space-evenly;

  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  padding-left: 0.5em;
  transition: transform 250ms ease-out;
}

.footer-nav li:hover {
  transform: translateY(-0.25em);
}

.footer-nav a {
  font-size: 1.25rem;
  color: var(--white);
  transition: color 250ms ease-out;
}

.footer-nav a:hover {
  text-decoration: none;
  color: rgb(240, 213, 62);
}

.copyright {
  font-size: 0.95rem;
  margin: 0;
  padding-bottom: 1em;
}

/* ================================= */
.main-nav {
  margin-bottom: 1em;
  padding: 1em 0 0;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  gap: 0.25em;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  text-align: center;
  list-style: none;
}

.main-nav li {
  display: inline-block;
  border-radius: 0.25em;
  transition: box-shadow 250ms ease-out;
  margin: 0 0.25em 0.5em 0;
}

.main-nav li button {
  cursor: pointer;
  font-size: 1rem;
}
.main-nav li button:hover {
  background-color: var(--light-gray);
}

.main-nav li.active button:hover {
  background-color: var(--orange);
  color: var(--black);
}

.main-nav li:hover {
  text-decoration: none;
  color: var(--black);
  // box-shadow: 0.125em -0.125em 0.25em rgba(7, 7, 87, 0.25);
}

.main-nav .multi {
  letter-spacing: 0.1875rem;
}

.main-nav a,
.main-nav button {
  color: #444;
  display: block;
  padding: 0.25em 0.75em;
}

.submenu {
  position: absolute;
  left: 0;
  background-color: var(--light-gray2);
  width: 100%;
  display: none;
  padding: 0.5em 0.25em 0;
  z-index: 9999;
}

/* consider removing href from all alpha letters or changing the a tag to button */
.main-nav li:hover {
  cursor: pointer;
}

.main-nav li.active>button {
  background-color: var(--orange);
}

.main-nav li:hover .submenu.show {
  display: block;
}

.main-nav li.active {
  background-color: var(--orange);
}

.submenu li a:active {
  background-color: var(--orange);
  box-shadow: var(--common-box-shadow);
  transform: translateY(2px);
}

/* === accordian-like animation for proper nouns === */
.accordian {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  border: none;
  text-align: center;
  outline: none;
  font-size: 1rem;
  /* margin-bottom: 0.5em; */
  padding: 1rem 0;
  background-color: var(--desat-orange);
  color: var(--black);
  border: var(--common-border2);
  transition: background-color 250ms linear;
  border-radius: 0.25em;
}

.accordian:hover {
  background-color: rgba(246, 190, 36, 0.445);
}

.inactive {
  display: none;
  overflow: hidden;
  opacity: 0;
  background-color: var(--white);
}

.panel {
  overflow: inherit;
  opacity: 1;
  animation: active 1000ms forwards;
}

@keyframes active {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* modal styles */
.yes-btn {
  display: block;
  background-color: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--black);
  cursor: pointer;
  padding: 1em 2em;
  border: 0.25em solid rgba(0, 128, 0, 0.75);
  width: 75%;
  margin: 2em auto 1em;
  transition: background-color 500ms ease;
}

.yes-btn:hover {
  background-color: rgb(200, 235, 213);
}

.modal-container {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.modal-container.show-modal {
  display: block;
}

.modal {
  background-color: var(--white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: 25em;
  animation-name: modalopen;
  animation-duration: 1000ms;
}

.modal-header {
  background-color: #708090;
  color: var(--white);
  padding: 15px;
}

.modal-header h3 {
  margin: 0;
}

.modal-content {
  padding: 20px;
}

.modal-form div {
  margin: 15px 0;
}

.modal-form label {
  display: block;
  margin-bottom: 5px;
}

.modal-form .form-input {
  padding: 8px;
  width: 100%;
}

.close-btn {
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--white);
  color: #fff;
  font-size: 25px;
  position: absolute;
  top: 0;
  right: 0;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1058px) {
  .two-col {
    flex-direction: column;
  }

  .keybrd-box {
    width: 100%;
  }

  .keybrd-box2 {
    width: 22%;
    height: max-content;
    font-size: 0.5rem;
    margin: 0 auto 0.5em;
    padding: 1em;
  }


}

@media (max-width: 1000px) {

  .top-items button,
  .keybrd-row button {
    font-size: 0.875rem;
  }
}

@media (max-width: 900px) {

  .top-items button,
  .keybrd-row button,
  .special-items button {
    margin: 0.25em;
    padding: 0.25em 0.5em;
  }

  .keybrd-box2 {
    padding: 2em 10em;
  }

  .keybrd-box2>.top-items>.numpad, .keybrd-box2>.top-items>button {
    padding: 0.5rem;
  }
}

@media (max-width: 590px) {
  footer {
    font-size: 0.875rem;
  }

  .footer-nav a {
    font-size: 1rem;
  }
}