style.css

/** UTILITY STYLES */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap');

@font-face {
  font-family: "Manrope";
  src: url(/fonts/font-manrope.ttf);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Manrope";
}

body {
  background-color: #3ea1d0;
  overflow-x: hidden !important;
}

code,
textarea,
input:not(:where([type="button"], [type="submit"])),
pre,
pre * {
  font-family: "Jetbrains Mono", monospace !important;
}

#notification-area {
  position: fixed;
  bottom: 1rem;
  right: 10px;
  width: 250px;
  height: 10%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#notification-area.disabled {
  transform: scale(0);
}

#notification-area .notification {
  position: relative;
  padding: 0.875rem 1.75rem;
  background: linear-gradient(to right, var(--accent), var(--selection-color), var(--selection-color));
  color: #f5f5f5;
  font-family: "Main";
  font-size: 1rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  opacity: 0;
  left: 2rem;
  animation: showNotification 500ms forwards alternate;
  text-align: left;
  line-break: strict;
}

.notif.notif-timer {
  position: absolute;
  bottom: 0;
  border-radius: 0.5rem;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.25);

  animation: notf-timer 5000ms ease-in-out forwards;
}

@keyframes showNotification {
  to {
    opacity: 1;
    left: 0px;
  }
}

@keyframes notf-timer {
  to {
    width: 0;
  }
}

#notification-area .notification.success {
  background: #49cc7b;
}

#notification-area .notification.error {
  background: rgb(190, 51, 0);
}

#notification-area .notification.info {
  background: #00acee;
}

.notification:not(.notification.info)::selection {
  background: var(--selection-color);
}

.notification.info::selection {
  background: var(--accent);
}

.cross {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  height: 1rem;
  width: 1rem;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.cross span:first-of-type {
  position: absolute;
  top: 0.5rem;
  right: 0;
  height: 0.15rem;
  width: 100%;
  background-color: white;
  transform: rotate(45deg);
}

.cross span:last-of-type {
  position: absolute;
  top: 0.5rem;
  right: 0;
  height: 0.15rem;
  width: 100%;
  background-color: white;
  transform: rotate(-45deg);
}

/** MAIN STYLES */

h1 {
  text-align: center;
  font-weight: 400;
  font-size: 2.6rem;
  margin-top: 2rem;
}

.add-code {
  margin-top: 3rem;
  height: 300px;
  width: clamp(20rem, 45%, 90vw);
  max-width: 90vw;
  border-radius: .5rem;
  background-color: white;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  cursor: pointer;
}

.add-icon path {
  fill: #333;
}

.add-icon {
  height: 50%;
  aspect-ratio: 1;
}

.add-title {
  font-size: 1.5rem;
}

/* seperator */

.code-container {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  position: absolute;
  top: calc(300px + 10rem);
  left: 50%;
  transform: translate(-50%);
  padding-bottom: 2rem;
}

.code-container .code-div {
  height: 450px;
  width: 50rem;
  max-width: 95vw;
  background-color: #3a434b;
  position: relative;
  border-radius: .3rem;
}

@media (max-width: 574px) {

  .code-div {
    height: 500px !important;
  }

  .code-title {
    left: 50% !important;
    transform: translate(-50%);
  }

  .select-lang {
    left: 50% !important;
    transform: translate(-50%);
    margin-top: 1rem;
  }

  .btn-group {
    top: 7.5rem !important;
    left: 50% !important;
    transform: translate(-50%);
    margin-top: 1rem;
  }

  .area {
    top: 12rem !important;
  }

}

.code-div .code-title {
  font-size: 1.4rem;
  background: none;
  border: solid 2px transparent;
  border-bottom-color: white;
  outline: none !important;
  padding: .3rem;
  color: white;
  transition: border 100ms ease;
  position: absolute;
  left: 1.5rem;
  top: 2.5rem;
  max-width: 13rem;
}

.code-title:focus {
  border: solid 2px white;
}

.btn-group {
  position: absolute;
  top: 3rem;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.btn {
  background-color: #3ea1d0;
  font-size: 1.2rem;
  padding: .35em 1.25em;
  border: solid 1px transparent;
  border-radius: .2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  outline: none !important;
  transition: filter 150ms ease;
}

.btn:where(:hover, :focus) {
  outline: none !important;
  filter: brightness(1.2);
}

.select-lang {
  position: absolute;
  left: 2rem;
  top: 5.5rem;
}

.area {
  font-size: 1.1rem;
  background-color: #0a0c0e;
  height: 250px;
  width: calc(100% - 2rem);
  border-radius: .3rem;
  position: absolute;
  top: 9rem;
  left: 1rem;
  overflow: scroll;
  border: solid 2px transparent;
  padding: .5rem 1rem !important;
  resize: none;
  color: white;
  outline: none !important;
}

.area.hide {
  display: none;
}

.code-area:focus {
  outline: none !important;
}

.edit-area {
  color: rgb(215, 215, 215);
  line-height: 1.5;
}