* {
  margin: 0;
  padding: 0;
}

button, h1, h2, h3, h4, h5 {
  all: unset;
}

body, html {
  font-family: Arial, sans-serif;
  background-color: #f3f3f3;
}

main {
  display: grid;
  grid-template: "mainMenu" "workspace" "prompt";
  justify-items: center;
  position: relative;
  font-size: 2vw;
}

#prompt {
  grid-area: prompt;
}

#workspace {
  grid-area: workspace;
}

#mainMenu {
  grid-area: mainMenu;
}

#advancedMenu {
  grid-area: advancedMenu;
}

@media only screen and (min-width: 1000px) {
  main {
    grid-template: "advancedMenu workspace mainMenu" max-content "advancedMenu prompt mainMenu" auto/auto max-content auto;
    font-size: 1vw;
  }
}
.button {
  height: 5vw;
  display: flex;
  align-items: center;
  border-radius: 0.25em;
  border: black inset 0.05em;
  background-color: #fffbcc;
  padding: 0.2em;
}
.button img {
  height: 5vw;
  width: 5vw;
}

.button:hover {
  background-color: #fff8a3;
  cursor: pointer;
}

.button.active {
  background-color: #e0d222;
}

h2, h3, h4 {
  font-variant: small-caps;
}

.infoText {
  margin-top: 0.3em;
  font-size: 1em;
  text-align: center;
  color: #6f6f6f;
}

.slider {
  width: 25vw;
  height: 5vw;
}

@media only screen and (min-width: 1000px) {
  .button {
    height: 1.8em;
  }
  .button img {
    width: 1.8em;
    height: 1.8em;
  }
  .slider {
    width: 15vw;
    height: 2.5vw;
    align-self: flex-end;
    margin-top: -0.2em;
  }
}
#workspace {
  display: inline-block;
  position: relative;
  margin: auto;
  width: 90vw;
  height: 90vw;
  background-color: white;
  margin: 0.5em;
}
#workspace canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#cursorCanvas {
  z-index: 1000;
}

@media only screen and (min-width: 1000px) {
  #workspace {
    width: 70vh;
    height: 70vh;
  }
}
#prompt {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  background-color: white;
  border: 0.05em inset #fff8a3;
  border-radius: 0.5em;
  margin: 0.75em;
  padding: 0.75em 0.75em 1.8em;
  width: 81vw;
}

#promptFieldContainer {
  min-height: 3em;
  position: relative;
  width: 100%;
}

#promptField {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.5em;
  border: dashed 1px #b8b8b8;
  margin: 1.8em auto;
  min-width: 60%;
  max-width: 95%;
  width: max-content;
  transition: scale 0.75s ease-in-out;
}
#promptField p {
  font-size: 1em;
  background-color: white;
  text-align: center;
  margin-top: -0.7em;
  padding: 0 0.3em;
}

#realPrompt {
  font-size: 1.5em;
  display: flex;
  align-items: center;
  margin: 0 1em;
  height: 3.3em;
}
#realPrompt p {
  text-align: center;
}

#promptButtons {
  display: flex;
  justify-content: center;
}
#promptButtons button {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#promptButtons h3 {
  margin-left: 0.2em;
  margin-right: 0.2em;
  font-size: 1.4em;
}

#promptRequest > img {
  transition: all 0.5s;
}

#promptRequest:hover > img {
  transform: rotate(-180deg);
}

#promptIncoming {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100%;
  max-width: 100%;
  font-size: 2em;
  visibility: hidden;
}
#promptIncoming img {
  height: 1.4em;
  width: 1.4em;
}
#promptIncoming h2 {
  margin: 0 0.5em;
  text-shadow: -1px -1px 0 #fff8a3, 1px -1px 0 #fff8a3, -1px 1px 0 #fff8a3, 1px 1px 0 #fff8a3;
}

@media only screen and (min-width: 1000px) {
  #prompt {
    width: 70vh;
    background-color: unset;
    border: none;
    margin: 0;
    padding: 0.5em 0.75em 1.8em;
  }
  #promptField {
    min-height: 10vh;
  }
  #promptField p {
    background-color: #f3f3f3;
  }
  #realPrompt {
    font-size: 1.2em;
    height: calc(10vh - 0.7em);
  }
}
#mainMenu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#advancedMenu {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
}

.menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 1em;
  border: 0.05em inset #fff8a3;
  background-color: white;
  border-radius: 0.5em;
  margin: 0.5em 0.75em;
  width: 85vw;
  align-items: center;
}
.menu-item h2, .menu-item h4 {
  margin: 0.75em;
  font-size: 1.25em;
  text-align: center;
  color: #6f6f6f;
  font-weight: bold;
}
.menu-item .desktop {
  display: none;
}

@media only screen and (min-width: 1000px) {
  .menu-item {
    flex-direction: column;
    width: 18vw;
    border-color: #b8b8b8;
    margin: 0.5em 1em 0;
  }
  .menu-item h2 {
    font-size: 1em;
    margin: 0;
  }
  .menu-item .desktop {
    display: block;
  }
  .menu-item h4 {
    font-variant: normal;
    font-size: 0.95em;
    font-weight: normal;
  }
}
#brushSelector h2::before {
  content: "brush:";
}
#brushSelector h4::before {
  content: "size:";
}

#penOptions, #penSize {
  display: flex;
  flex-flow: row nowrap;
  margin: 0.75em;
  justify-content: flex-start;
  align-items: center;
}

#penOptions .button {
  margin-right: 1.5em;
}

#sizeSlider-container {
  display: flex;
  width: 100%;
  align-items: center;
}

#sizeModifier {
  font-size: 0.8em;
}

@media only screen and (min-width: 1000px) {
  #brushSelector h2::before {
    content: "brush selector";
  }
  #brushSelector h4::before {
    content: "brush size:";
  }
  #penOptions {
    justify-content: space-around;
    width: 80%;
  }
  #penSize {
    margin-bottom: 1.5em;
    display: block;
  }
}
#colorSelector h2::before {
  content: "";
}
#colorSelector h2 {
  display: none;
}

#colorWheel {
  width: 28vw;
  height: 28vw;
  margin: 0.5em auto 0.5;
}

#colorOptions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 2vw;
  margin-right: 4vw;
}
#colorOptions .slider {
  width: 35vw;
  height: 7vw;
  align-self: flex-end;
  z-index: 2;
}
#colorOptions h4 {
  margin-bottom: -0.5em;
}

@media only screen and (min-width: 1000px) {
  #colorSelector h2::before {
    content: "color selector";
  }
  #colorSelector h2 {
    display: block;
  }
  #colorWheel {
    width: 12.5vw;
    height: 12.5vw;
    margin: 1em auto 0;
  }
  #colorOptions {
    margin: 0.5em 0;
    width: 16vw;
  }
  #colorOptions .slider {
    width: 15vw;
    height: 2.5vw;
    align-self: flex-end;
    margin-top: -0.2em;
  }
  #colorCodes {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: space-evenly;
    justify-items: end;
    margin-bottom: 0.5em;
    width: 75%;
  }
  #colorCodes span {
    font-size: 0.7em;
  }
  #colorCodes .value {
    justify-self: center;
  }
}
@media only screen and (min-width: 1000px) {
  #advancedMenu {
    display: flex;
  }
  #example {
    height: 14vw;
    width: 14vw;
    background-color: white;
    position: relative;
    margin-top: 0.5em;
  }
  #collageExample, #collageSelector {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #collageSelector {
    z-index: 1;
  }
  #collageOptions {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    align-items: center;
    margin: 0.8em 0;
  }
  #collageOptions label {
    justify-self: end;
  }
  #collageOptions h4 {
    font-size: 0.9em;
    margin: 0;
  }
  #collageOptions input {
    justify-self: center;
  }
  #collageSlider, #collageSizeSlider {
    width: 10vw;
    height: 2vw;
  }
  #newImage {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
  }
  #layers {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    border: 0.05em solid #b8b8b8;
    width: 70%;
  }
  .layer {
    text-align: center;
    padding: 0.1em;
  }
  .selected {
    background-color: #fff8a3;
  }
  #addLayer {
    margin-top: 0;
    margin-bottom: 1rem;
    border-radius: 0;
    background-color: white;
    border-top: none;
    height: 1em;
    padding: 0.35em;
  }
  #addLayer:hover {
    background-color: #fff8a3;
  }
  #saveMenu {
    display: flex;
    justify-content: center;
    margin-top: 0.75em;
    font-size: 1.1em;
  }
  #saveMenu img {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.25em;
  }
  #saveMenu .button {
    margin: 0 0.5em;
  }
}
dialog:not([open]) {
  display: none !important;
}

dialog {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 0.5em;
  background-color: white;
  border: solid 0.3em #fff8a3;
  border-radius: 1.5em;
  z-index: 5000;
  font-size: max(16px, 1.25vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  outline: none;
  overflow-x: hidden;
  overflow-y: hidden;
}

dialog::backdrop {
  background-color: #fffbcc;
  opacity: 0.99;
  transition: opacity 1s ease-in-out;
}

#logoContainer {
  position: relative;
  width: min(75vw, 55vh);
  height: min(75vw, 55vh);
}
#logoContainer img {
  position: absolute;
  width: 95%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#evalText {
  font-size: 1.4em;
  font-variant: small-caps;
  margin-bottom: 1em;
  text-shadow: -1px -1px 0 #fff8a3, 1px -1px 0 #fff8a3, -1px 1px 0 #fff8a3, 1px 1px 0 #fff8a3;
}

#captcha {
  max-height: max-content;
  width: min(85vw, 65vh);
}
#captcha .logo {
  width: 7.5em;
  height: 7.5em;
  margin: 1em auto;
}
#captcha p {
  font-size: 0.9em;
  text-align: center;
  margin: 0 1em 0.5em;
  line-height: 1.2em;
}
#captcha h2 {
  margin: 0;
  z-index: 10;
  font-variant: small-caps;
  text-shadow: -1px -1px 0 #fff8a3, 1px -1px 0 #fff8a3, -1px 1px 0 #fff8a3, 1px 1px 0 #fff8a3;
}

#captchaCheckbox {
  width: 1.5em;
  height: 1.5em;
  position: relative;
  margin: 0 0.5em;
  z-index: 10;
}
#captchaCheckbox span {
  display: block;
  width: 0.75em;
  height: 0.75em;
  border: solid 0.2em #b8b8b8;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#captchaCheckbox img {
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#captchaCheckbox:hover > span {
  border-color: black;
  cursor: pointer;
}

#captchaField {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  border: solid 0.1em #b8b8b8;
  border-radius: 0.5em;
  margin: 0.25em auto 1.25em;
  width: 80%;
  padding: 1em;
  font-size: 1.3em;
  transition: max-height 0.2s ease-in;
  position: relative;
}

#topMask, #bottomMask {
  background-color: white;
  position: absolute;
  width: 0;
  height: 0.15em;
  z-index: 5;
}

#topMask {
  top: -0.1em;
  left: 0.1em;
}

#bottomMask {
  bottom: -0.1em;
  right: 0;
}

#captchaField.unfolded {
  padding: 0.1em;
  margin: 0 auto;
  border: none;
  width: 95%;
  font-size: 1em;
}

#captchaContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#captchaContainer p {
  font-size: 0.9em;
  text-align: center;
  margin: 0 1em 0.5em;
  line-height: 1.2em;
}
#captchaContainer h3 {
  font-size: 1.1em;
  font-variant: small-caps;
  text-shadow: -1px -1px 0 #fff8a3, 1px -1px 0 #fff8a3, -1px 1px 0 #fff8a3, 1px 1px 0 #fff8a3;
}
#captchaContainer div {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.1em 0.1em;
  margin: 0.25em 0 0.75em;
}
#captchaContainer .button {
  min-width: 35%;
  font-variant: small-caps;
  font-size: 1.15em;
  margin-bottom: 0.75em;
  justify-content: center;
  height: 1.4em;
}

.profession {
  width: 100%;
  max-width: 15vh;
  max-height: 15vh;
  border: 0.15em solid white;
  opacity: 0.5;
  margin: auto;
  transition: all 0.1s ease-in-out;
}

.profession.selected {
  opacity: 1;
  border-color: #fff8a3;
}

.profession:hover {
  opacity: 1;
  cursor: pointer;
}

.button[disabled] {
  background-color: #b8b8b8;
  opacity: 0.6;
}

.button[disabled]:hover {
  cursor: not-allowed;
  background-color: #b8b8b8;
  opacity: 0.6;
}

#feedback {
  max-height: max-content;
  width: min(85vw, 70vh);
  text-align: center;
}
#feedback .logo {
  width: 6em;
  height: 6em;
  margin: 0.5em auto;
}
#feedback h2 {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  display: block;
}
#feedback h2, #feedback h3 {
  text-shadow: -1px -1px 0 #fff8a3, 1px -1px 0 #fff8a3, -1px 1px 0 #fff8a3, 1px 1px 0 #fff8a3;
}
#feedback p {
  margin: 0 0.5em;
}
#feedback .button {
  font-variant: small-caps;
  padding: 0 0.5em;
  font-size: 1.1em;
  margin: 1.5em;
  justify-content: center;
  height: 1.4em;
}
#feedback #dbButton {
  margin: 1.5em auto -1em;
}

#submitMenu {
  max-height: max-content;
  width: min(85vw, 65vh);
}
#submitMenu .logo {
  width: 4.5em;
  height: 4.5em;
  margin: 0.5em auto;
}
#submitMenu h2 {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  display: block;
  text-shadow: -1px -1px 0 #fff8a3, 1px -1px 0 #fff8a3, -1px 1px 0 #fff8a3, 1px 1px 0 #fff8a3;
}
#submitMenu p {
  margin: 0 0.5em;
  text-align: center;
}
#submitMenu #conclusion {
  margin-bottom: 0.75em;
}

#cancelSubmit {
  position: absolute;
  font-size: 1.4em;
  top: 0.5em;
  right: 1em;
  color: #9f9f9f;
  font-weight: bold;
}

#cancelSubmit:hover {
  color: #666666;
  cursor: pointer;
}

#finalCanvasPreview {
  width: 30vh;
  height: 30vh;
  margin-bottom: 0.5em;
}

#submitPrompt {
  font-size: 1.1em;
  max-width: 80%;
  text-align: center;
}

#submitForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin-top: 0.5em;
}

#username-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60%;
  border-radius: 0.5em;
  border: dashed 1px #b8b8b8;
  position: relative;
  margin: 0.8em 0;
}
#username-container p {
  position: absolute;
  transform: translateY(-0.7em);
  background-color: white;
  padding: 0 0.5em;
}

#username {
  border: none;
  text-align: center;
  width: 100%;
  font-size: 1.1em;
  padding: 0.5em 0;
  border-radius: 0.5em;
}

#submit-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25em;
}
#submit-container .button {
  height: 1.6em;
  margin: 0 0.25em;
}
#submit-container h3 {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

#download {
  position: relative;
  width: 1.6em;
}
#download img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 1.5rem;
  height: 1.5em;
}

#download:hover > #dlArrow {
  animation: download 1s infinite;
}

@keyframes download {
  0% {
    transform: translateY(-0.2em);
  }
  100% {
    transform: translateY(0);
  }
}
#dlArrow {
  z-index: 2006;
}

/*# sourceMappingURL=main.css.map */