OtherPages.css

/* Global Styles */
@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");

.delayed-link-slide-down-container {
  pointer-events: none;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  position: fixed;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.delayed-link-slidedown-bar,
.slideup-bar {
  transition: .5s all ease-in-out;
  transform: translateY(-100%);
  width: 50%;
  background: #000;
  height: 100%;
}

.delayed-link-slidedown-bar.showing {
  transform: translateY(0);
}

.slideup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  width: 100%;
  height: 110%;
  position: fixed;
  /* background: #0f0e0e; */
  z-index: 999;
  transition: 1s all ease;
}

.slideup-bars-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.slideup-bar {
  background: #000;
  transform: translateY(0);
}

.slideup-bar.hidden {
  transform: translateY(-100%);
}

.slideup-tittle {
  font-size: 1.8rem;
  text-align: center;
  position: absolute;
  transition: 1s all ease;
  transition-delay: .1s;
}

h3:nth-child(1) {
  background: crimson;
  padding: 10px;
  border-radius: 10px;
  box-shadow: var(--text-shadow);
  text-shadow: var(--text-shadow);
  animation: titlefade 1s ease 1;
}

h3:nth-child(2) {
  animation: titlefade2 1s ease 1;
  color: yellow;
}

@keyframes titlefade {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes titlefade2 {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  transition: transform 1s ease-in-out;
  transform: translateY(30px);
}

/* LENIS SMOOTH SCROLL */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

:root {
  --box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%),
    0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%),
    inset 0px -0.01em 0px rgb(58 65 111 / 50%);
  --primary-clr: rgb(13 36 131);
  /* linear-gradient(45deg, #db1313, #f43156) */
  --text-shadow: 2px 2px 2px BLACK;
}

::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #9e9e9e;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(16, 15, 15);
  border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body {
  font-family: "Anta", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  color: #333;
}

body.dark-theme {
  background: #0d0c0c;
  color: #e5e5e5e8;
}

body.dark-theme .theme-toggler {
  background: white;
}

body.dark-theme .theme-toggler::before {
  transition: 1s all ease;
  content: "🌑";
}

.theme-toggler {
  transition: 1s all ease;
  cursor: pointer;
  z-index: 9;
  position: fixed;
  top: 85%;
  left: 94%;
  width: 40px;
  background: #0d0c0c;
  height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: var(--box-shadow);
}

.theme-toggler::before {
  transition: 1s all ease;
  content: "🌞";
}

body.dark-theme input:focus {
  box-shadow: 0px 0px 10px -4px yellow;
  border: none;
  outline: 1px solid yellow;
}

body.dark-theme input {
  color: #f5f5f5;
}

.binary_operations_section,
.octal_operations_section,
.hexadecimal_operations_section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.converter_section {
  display: grid;
  justify-items: center;
  align-content: center;
  max-height: 100vh;
  margin-top: 20px;
}

.btn.activebtn {
  box-shadow: inset 0px 0.1em 0.6em var(--primary-clr), inset 1px 1px 10px var(--primary-clr);
}

figure {
  font-size: 2rem;
  font-weight: bolder;
}

.Menu-bar {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  background: var(--primary-clr);
  position: sticky;
  top: 0;
  z-index: 11;
}

.gradegenie {
  font-size: clamp(2rem, -1.5rem + 8vw, 2.5rem);
  color: whitesmoke;
  font-weight: 100;
}

.logo-section-container,
.logo-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: red; */
}

.logo-section {
  justify-content: flex-start;
  padding-left: 10px;
}

.logo-section-container {
  width: 50%;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 40%;
  filter: none;
}

.Menu-links {
  position: sticky;
  top: 10px;
  z-index: 1000;
  background: transparent;
  width: 80%;
  min-height: 50px;
  justify-content: space-evenly;
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin: auto;
}

.Menu-links a {
  text-decoration: none;
  color: rgb(242 235 235);
  padding: 7px;
  transition: 0.1s all ease;
  border-radius: 10px;
}

.Menu-links a:hover,
.Menu-links a.active {
  color: black;
  background-color: whitesmoke;
  box-shadow: var(--box-shadow);
}

.menu-icon {
  width: 23px;
  height: 23px;
  display: none;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  position: absolute;
  right: 10px;
  z-index: 11;
}

.menu-icon-bar:nth-child(2) {
  transition: 0.5s all ease;
  opacity: 1;
}

.menu-icon-bar:nth-child(1) {
  transition: 0.5s all ease;
  transform: rotate(0deg) translate(0px, 0px);
}

.menu-icon-bar:nth-child(3) {
  transition: 0.5s all ease;
  transform: rotate(0deg) translate(0px, 0px);
}

.menu-icon.cross .menu-icon-bar:nth-child(2) {
  transition: 0.5s all ease;
  opacity: 0;
}

.menu-icon.cross .menu-icon-bar:nth-child(1) {
  transition: 0.5s all ease;
  transform: rotate(45deg) translate(6px, 4px);
}

.menu-icon.cross .menu-icon-bar:nth-child(3) {
  transition: 0.5s all ease;
  transform: rotate(-45deg) translate(6px, -4px);
}

.menu-icon-bar {
  width: 20px;
  height: 4px;
  background: whitesmoke;
  border-radius: 4px;
}

.buttons-toggler-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.buttons-toggler-container:hover .buttons-toggler button:not(:hover) {
  filter: blur(4px);
}

.buttons-toggler,
.binary_operations,
.octal_operations,
.hexadecimal_operations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.converters_sections {
  display: grid;
  justify-items: center;
  align-content: center;
}

.converter_section {
  display: none;
}

.converter_section.active {
  display: block;
}


header {
  background: var(--primary-clr);
  color: white;
  text-align: center;
  padding: 1rem 0;
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: -1;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  /* background-color: white; */
  padding: 20px;
  box-shadow: var(--box-shadow);
  border-radius: 10px;
}

h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin-bottom: 10px;
}

a {
  color: var(--primary-clr);
}

button {
  font-size: 18px;
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow, transform;
  background: radial-gradient(100% 100% at 100% 0%, #51a9c2 0%, #2c3cb6 100%);
  box-shadow: var(--box-shadow);
  padding: 0 2em;
  border-radius: 0.3em;
  color: #fff;
  height: 2.6em;
  text-shadow: var(--box-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  font-family: "Anta", sans-serif;
}

button:hover {
  box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%),
    0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%),
    inset 0px -0.1em 0px var(--primary-clr);
  transform: translateY(-0.1em);
}

button:active {
  box-shadow: inset 0px 0.1em 0.6em var(--primary-clr);
  transform: translateY(0em);
}

input {
  border: solid 1.5px #9e9e9e;
  border-radius: 0.5rem;
  background: none;
  padding: 5px 20px 10px 10px;
  font-size: 1rem;
  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 200px;
  transform: scale(1);
  transition: 0.5s all ease;
  margin: 10px;
}

input:disabled {
  background: #d5d4d4;
  box-shadow: inset 0 0 5px black;
}

input:focus {
  transform: scale(1.05);
  box-shadow: 0px 0px 10px -4px var(--primary-clr);
  border: none;
  outline: 1px solid var(--primary-clr);
}

footer {
  background: var(--primary-clr);
  color: white;
  text-align: center;
  padding: 1rem 0;
  width: 100%;
  box-shadow: var(--box-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  span {
    a {
      color: #2eff00;
    }
  }

  span:nth-child(2) {
    color: #2eff00;
  }
}

hr {
  border-color: #2eff00;
}

#confirmation {
  color: lime;
  display: none;
  margin-top: 10px;
}

textarea {
  width: 100%;
  min-height: 30vh;
  margin-top: 10px;
  resize: none;
}

@media (max-width: 768px) {
  .theme-toggler {
    left: 90%;
  }

  .Menu-links {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 100%;
    background: crimson;
    flex-direction: column;
    box-shadow: var(--box-shadow);
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: 0.5s all ease-in-out;
    z-index: 10;
    box-shadow: var(--box-shadow);
  }

  .Menu-links.menu-open {
    transition: 0.5s all ease-in-out;
    top: 0px;
  }

  .Menu-links a {
    font-size: 1.5rem;
    transition: 1s all ease;
  }

  .Menu-links a.menu-open {
    transition: 1s all ease;
  }

  .Menu-links a:nth-child(1) {
    transform: translateY(150px);
  }

  .Menu-links a:nth-child(2) {
    transform: translateY(160px);
  }

  .Menu-links a:nth-child(3) {
    transform: translateY(170px);
  }

  .Menu-links a:nth-child(4) {
    transform: translateY(175px);
  }

  .Menu-links a:nth-child(5) {
    transform: translateY(180px);
  }

  .Menu-links a:nth-child(6) {
    transform: translateY(185px);
  }

  .Menu-links a.menu-open:nth-child(1) {
    transition-delay: 0.1s;
    transform: translateY(0);
  }

  .Menu-links a.menu-open:nth-child(2) {
    transition-delay: 0.2s;
    transform: translateY(0);
  }

  .Menu-links a.menu-open:nth-child(3) {
    transition-delay: 0.3s;
    transform: translateY(0);
  }

  .Menu-links a.menu-open:nth-child(4) {
    transition-delay: 0.4s;
    transform: translateY(0);
  }

  .Menu-links a.menu-open:nth-child(5) {
    transition-delay: 0.5s;
    transform: translateY(0);
  }

  .Menu-links a.menu-open:nth-child(6) {
    transition-delay: 0.6s;
    transform: translateY(0);
  }

  .menu-icon {
    display: flex;
    cursor: pointer;
  }

  .logo-section {
    justify-content: flex-start;
    padding-left: 10px;
  }

  .logo-section-container {
    width: 100%;
  }

  .btn,
  .Opbtn {
    font-size: 13px;
  }
}