/*general stylings*/
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: cursive;
} */

/* Start General Stuff */

/* Box sizing rules */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove default margin */
/* body, */
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  /* to prevent text lines breaking at spaces */
  white-space: nowrap;
  /* hide text which does not fit inside its element */
  overflow: auto;
  overflow-y: auto;
  /* ellipsis: hint on hidden text (overflown) by "..." */
  text-overflow: clip;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
  justify-content: center;

  /* line-height: 1.5; */

  /* color: hsl(130, 60%, 66%); */
  /* font-size: 1.25rem; */
  /* background-color: hsl(204, 6%, 17%); */
  color: hsl(120, 1%, 21%);
  /* font-size: 1.25rem; */
  /* background-color: hsl(210, 17%, 98%); */
  /* background: #eeeeee; */
  background: #4a4a4c;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* body { */
/* place-content: center; */

/* font-family: var(--ff-primary); */
/* font-weight: var(--fw-400); */

/* background-color: hsl(var(--clr-neutral-200)); */
/* } */

h1,
h2,
h3 {
  font-weight: var(--fw-700);
}

/* Root font-size on the document level */
html {
  /* font-size: 20px; */
  font-size: 20px;
}

@media (max-width: 900px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 12px;
  }
}

/* End General Stuff */

/* Start Layout Related */

main {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  margin: 0;
  max-width: 700px;

  /* overflow: hidden; */
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  /* max-width: 720px; */
  height: 100vh;
  height: 100dvh;

  color: hsl(120, 1%, 21%);
}
/* End Layout Related */

/* Start Styling Related */
.header-wrapper {
  flex-grow: 0; /* Don't expand vertically */
  margin: 5px 5px;
}

.header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  gap: 0.1rem;
  justify-items: center;
  justify-self: normal;
  align-items: center;
  /* align-self: normal; */
  text-align: center;

  /* color: hsl(214, 69%, 47%); */
  color: #fcfbfb;

  font-size: 1rem;
  /* padding: 0.1rem 0.1rem; */
  margin: 0 5px;
  line-height: normal;
}

.header a {
  color: yellow;
}

/* .video-area {
  flex-grow: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6fr auto;
  justify-items: center;
  justify-self: top;
  align-items: center;
  align-self: top;
  height: fit-content;
  margin: 0.3rem 0.6rem;
  border: none;
} */

.video-and-image {
  flex-grow: 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr;
  max-height: 25%;
}

/* .image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
} */
.image-container {
  display: flex;
  flex-direction: column;
  /* align-content: center; */
  /* grid-template-columns: 1fr 4fr 1fr; */
  /* grid-template-rows: 1fr; */
  /* position: relative; */
  /* overflow-y: hidden; */
  width: 100%;
  /* grid-column: 1; */
  /* grid-row: 1; */
  height: 100%;
  /* height: inherit; */
  /* max-height: 100%; */
  /* border: 1px solid #ccc; */
}

.label-container {
  display: flex;
  flex: 0;
  justify-content: center; /* Center horizontally */
  align-items: start; /* Align to top vertically */
  min-height: 2.4rem;
}
.label-text {
  display: block;
  flex: 1;
  font-size: 2rem;
  color: hsl(0, 100%, 100%);
  text-align: center; /* Center text horizontally within the label */
}

.image-list {
  flex: 1;
  /* flex-grow: 1; */
  justify-content: center; /* Center horizontally */
  display: flex;
  position: relative;
  height: 100%;
  /* width: 100%; */
  /* height: auto; */
}

.image-list img {
  display: none;
  flex-grow: 0;
  /* flex-grow: 0; */
  /* flex: 0 1 0; */
  /* width: 100%; */
  /* width: inherit; */
  width: auto;
  /* height: auto; */
  height: 100%;
  position: absolute;
  bottom: 0;
  left: auto;
  /* border-radius: 8px; */
  object-fit: contain;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
  /* transition: opacity 1s ease-in-out; */
}

.image-list img:first-child {
  display: flex;
}

.arrows-wrapper {
  display: flex;
  flex: 0;
  flex-direction: row;
}
.arrow {
  flex: 1;
  min-height: 2.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  transition: background 0.3s ease;
  /* z-index: 4; */
}

.arrow:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* .arrow-left {
  left: 0;
} */

/* .arrow-right {
  right: 0;
} */

.video-player-wrapper {
  /* grid-column: 2; */
  /* grid-row: 1; */
  /* display: grid;
  place-items: center; */
  /* display: flex;
  justify-content: center;
  align-items: center; */

  flex-grow: 0;
  /* display: flex; */
  justify-items: center;
  justify-self: center;
  /* align-items: center; */
  /* align-self: center; */
  /* height: fit-content; */
  /* height: 100%; */
  /* height: 50%; */
  /* max-height: 100%; */
  /* height: inherit; */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* width: auto; */
  /* top right buttom left */
  /* margin: 0px 5px 0 5px; */

  /* position: relative; */
}

.video-player {
  height: 100%;
  max-height: 100%;
  width: 100%;
  object-fit: scale-down;
  /* object-fit: contain; */
  /* max-width: 100%; */
  /* flex-grow: 0; */
  /* display: block; */
  /* justify-items: center; */
  /* justify-self: center; */
  /* align-items: center; */
  /* align-self: center; */
  /* height: fit-content; */
  /* width: 100%; */
  /* width: inherit; */
  /* width: fit-content; */
  /* max-height: 20vh; */
  /* height: 100%; */
  /* height: inherit; */
  /* top right buttom left */
  /* margin: 0px 5px 0 5px; */
  border: none;
  /* z-index: 1; */
}

/* .video-area-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  justify-self: center;
  align-items: center;
  align-self: center;
  height: 100%;
  gap: 0.3rem;
  margin: 0.3rem 0.6rem;
  border: none;
} */

#text_edit_area {
  flex-grow: 1; /* Expand to fill remaining vertical space */
  margin: 5px 5px 0 5px;
  width: 100%;
  overflow: auto;
  align-self: center;
  /* justify-self: center; */
  resize: none; /* Prevent manual resizing */
  padding: 1rem;
  font-size: clamp(
    1rem,
    2rem,
    2rem
  ); /* Maximum font size of 9.5% of viewport's smaller dimension */
  font-weight: 500;

  user-select: text;
  line-height: 1.15;
  background: #fff;
  border-radius: 2px;
  border: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.16);
  /* z-index: 3; */

  outline: none;
  cursor: text;

  font-family: sans-serif;
}

.buttons-wrapper {
  flex-grow: 0; /* Don't expand vertically */
  margin: 0 0;
  /* align-self: center; */
  justify-content: center;
  align-items: center;
}

/* .video-area-buttons button {
  height: 100%;
  width: 100%;
  font-size: 0.7rem;
  padding: 0.1rem;
  color: white;
  border: none;
  border-radius: 0.3rem;
} */

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  justify-self: normal;
  align-items: center;
  align-self: normal;
  height: fit-content;
  gap: 0.8rem;
  margin: 5px 0;
  border: none;
}

/* audio::-webkit-media-controls-enclosure {
  border-radius: 0.3rem;
} */

.buttons button {
  height: 100%;
  width: 100%;
  font-size: 0.7rem;
  padding: 0.1rem;
  color: white;
  border: none;
  border-radius: 0.3rem;
}

.buttons button span {
  display: block;
  font-size: 1.7rem;
}

.active {
  display: block !important;
}
/*end general stylings*/

#keyboard {
  /* position: fixed; */
  /* bottom: 0; */
  width: 100%;

  padding: 0;
  background: #1a1a1c;
  overflow: auto;
}
#keyboard ul li {
  list-style: none;
  float: left;
  font-family: sans-serif;
  width: 6.85%;
  background: #616161;
  margin: 1.3% 0.65%;
  font-size: 200%;
  text-align: center;
  line-height: 150%;
  color: #fff;
  border-radius: 9%;
  /* make text on keys not selectable */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard */
}
#keyboard ul li .off {
  display: none;
}
#keyboard ul li .on {
  display: block;
}
#keyboard ul li img {
  height: 6.5%;
  position: relative;
  top: 1.5%;
}
.num-key {
  display: none;
}

#keyboard ul li:active,
.key-2:active {
  background: #212121;
}
#keyboard ul li:hover {
  opacity: 0.8;
}

.keyline1 {
  padding: 0;
}

.keyline2 {
  padding: 0;
}

.keyline3 {
  padding: 0;
}

.keyline4 {
  padding: 0;
}

.keyline5 {
  padding: 0;
}

.key-2 {
  width: 8% !important;
  line-height: 150% !important;
  background: #423d39 !important;
}
.key-2:active {
  background: #212121 !important;
}

.space {
  width: 30% !important;
  font-size: 200% !important;
  text-transform: lowercase;
}

.enter {
  width: 22% !important;
  font-size: 200% !important;
  text-transform: lowercase;
}

.change-keys {
  font-size: 200% !important;
  line-height: 11%;
}

.no-padding {
  padding: 0 !important;
}
.uppercase {
  text-transform: uppercase;
}

#busy {
  display: none;
  /* z-index: 2; */
  position: absolute; /* Position relative to the video container */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.busy-anim {
  border: 6px solid rgba(229, 236, 18, 0.1);
  border-top: 8px solid rgb(229, 236, 18);
  border-radius: 48%;
  width: 90px;
  /* width: 32%; */
  height: 88px;
  /* height: 27%; */
  animation: spin 1s linear infinite;
  margin: 20px auto;
  /* margin: 20% auto; */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================ */