/* default root */












a {
  text-decoration: none;
}

.logo-img {
    height: 100%;
}




.white-button{
    border: none;
    background: white;
    border-radius: 1rem;
    
}



.pink-button {
  transition-duration: .4s;
  border-radius: .5rem;
  background: var(--main-color);
  font-family: inter;
  border: none;
  color: white;
}

.main-button {
  transition-duration: .4s;
  border-radius: .5rem;
  background: var(--text-color);
  font-family: inter;
  border: none;
  color: var(--background-color);
}

.border-button {
  transition-duration: .4s;
  border-radius: .5rem;
  font-family: inter;
  border: solid 2px white;
  color: white;
  background: none;
  font-weight: var(--fw-800);
  padding: .2rem;
}

.pink-plain-button {
  background: var(--main-color);
  border: none;
  border-radius: .5rem;
  color: white;
  font-family: inter;
  font-weight: var(--fw-600);
  font-size: 1rem;
  padding: .5rem;
}


.gradient-plain-button {
  background: var(--gradient1);
  border: none;
  border-radius: .5rem;
  color: white;
  font-family: inter;
  font-weight: var(--fw-600);
  font-size: 1rem;
  padding: .5rem;
}
.pink-plain-button.bold {
  font-family: Ginto Nord;
  font-size: 1rem;
}

.pink-plain-button.flex {
  display: flex;
  flex-direction: row;
  gap: .25rem;
  justify-content: center;
  align-items: center;
}
.pink-plain-button:hover {
  background: var(--main-color);
  cursor: pointer;
}


body:not(.darkmdode) .border-button.pale {
  border: solid .2rem var(--main-color);
  color: var(--main-color);
}

.border-button:hover {
  background: white;
  color: var(--main-color);
}

body:not(.darkmdode) .border-button.pale:hover {
  background: var(--main-color);
  color: white;
  fill: white;
}

.data-flex {
  display: flex;
  flex-direction: row;
  column-gap: .15rem;
}

.data-flex.center {
  justify-content: center;
  align-items: center;
}

button.data-flex.center i {
  font-size: 1.15rem;
}

.pink-button:hover {
  transition-duration: .4s;
  background: var(--main-color-dark);
}

@keyframes rainbow-scroll {
  from{
    background-position: 0 0;
  }
  to {
    background-position: 100000% 0;
  }
}

.pink-button.gradient {
  background: var(--gradient1-c);
  color: white;
}

.pink-button.gradient i {
  color: white;
}

.pink-button.rainbow {
  transition-duration: .4s;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
  background-repeat: repeat-x;
  background-size: 300% 100%;
  animation-name: rainbow-scroll;
  animation-duration: 1000s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

.pink-button.glower:hover {
  transition-duration: .4s;
  background: var(--main-color-dark);
  box-shadow: 0px 0px .75rem var(--main-color-dark);
}





.woosher-woosh {
  transition-duration: .5s;
}



body.darkmode .pink-button.def-glow {
  box-shadow: 0px 0px .85rem var(--main-color);
}

body.darkmode .pink-button.def-glow:hover {
  box-shadow: 0px 0px 1.65rem var(--main-color-dark);
}


.pink-button.woosher:hover .woosher-woosh {
  transition-duration: .5s;
  transform: translateY(.1rem) rotate(360deg);
}



.arrow-woosher-woosh {
  transition-duration: .25s;
  font-size: 1rem;
}

.pink-button.arrow-woosher:hover .arrow-woosher-woosh {
  transform: translateX(.15rem);
}

.feature-box {
  border-radius: .65rem;
  background: var(--background);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  margin: .5rem;
}

.feature-title {
  display: flex;
  flex-direction: row;
  column-gap: .25rem;
  color: var(--main-color);
  align-items: center;
  margin-bottom: 1rem;
}

.feature-list {
  display: grid;
}

.input-pink {
  border: solid 5px var(--main-color);
  border-radius: 1rem;
  padding: .5rem;
  overflow-y: auto;
}


::placeholder { 
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--text-color-desc);
  -webkit-text-fill-color: var(--text-color-desc);
  opacity: 1; /* Firefox */
}

.menu-switch {
  color: var(--text-color);
}


.menu-switch:hover {
  color: var(--main-color);
  text-shadow: 0 0 .55rem var(--main-color);
}

.menu-hover-button{
  position:relative;
  backdrop-filter: blur(.75rem);
  background: linear-gradient(210deg,#0a99c479,#e604d381);border-radius: .75rem;
}


.menu-hover-glow{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(210deg,#0a98c4,#e604d3);
  filter: blur(.75rem);
}

body.darkmode .text-glow {text-shadow: 0 0 .95rem var(--main-color)} 



.menu-hover-button:hover{
  background: linear-gradient(210deg,#0a98c4,#e604d3);
  border-radius: .75rem;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: 5s;
}


.theme-changer{
  transition-duration: 0.7s;
  transform: rotate(0deg);
}

#et1{
  transition-duration: 0.7s;
  transform: rotate(0deg) ;
}

#ee1:hover #et1{
  transition-duration: 0.7s;
  transform: rotate(180deg);
}

input[type="color"] {
	-webkit-appearance: none;
	border: none;
  padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}



.mb {
  transition-duration: 0.1s;
}

.mb:hover:not(.active){
  transition-duration: 0.1s;
  transform: scale(1.1);
  cursor: pointer;
  border-bottom: 2px groove rgb(223, 91, 15);
}

@media screen and (max-width: 600px) {
  .tex {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  .menu-show {
    display: none;
  }
}

.tex {
  transition-duration: .4s;
  color: var(--text-color);
   
  margin-left: .7rem;
  font-weight: initial; 
  text-align: center;
  font-size: 1rem;
  float: right;
  
}

.tex:hover {
  transition-duration: .4s;
  cursor:pointer;
  color: var(--main-color);
}

body.darkmode .tex:hover {
  text-shadow: 0 0 .75rem var(--main-color);
}

.menu-show{
  transition-duration: .4s;
  color: black;

}

.menu-show:hover{
  transition-duration: .4s;
  cursor: pointer;
  color: var(--main-color);
}


.texc {
   
  margin-top: .7rem;
  font-weight: initial; 
  text-align: center; 
  font-size: 1rem;
  float: right;
  transition-duration: .4s;
  color: var(--text-color);
}
.texc:hover {
  transition-duration: .4s;
  cursor:pointer;
  color: var(--main-color);
}

body.darkmode .texc:hover {
  text-shadow: 0 0 .75rem var(--main-color);
}


.collapsible-menu{
  overflow: hidden;
  transition: all 0.5s cubic-bezier(.175,.885,.3,1.275);
  max-height: 0px;
  margin: 0 .5rem 0 .5rem;
}

.section-display-wrapper {
  width: 50%;
}

.section-text-wrapper {
  width: 50%;
  display: flex; 
  align-items: center; 
  flex-direction: column; 
  justify-content: center; 
  row-gap: .3rem;
}

.section {
  display: flex;
  flex-direction: row;
  margin: 2rem;
  margin-top: 3rem;

}

#scrollheaderlink {
  display: flex; align-items: center; padding: .7rem; justify-content: center; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.219);flex-direction: column; 
}

#scrollheaderlink-menu {
  display: flex; height: 3.5rem; align-items: center; justify-content: space-between; width: 100%;
}

#header.scrollheader #scrollheaderlink {
  margin: .5rem .5rem 0 .5rem;
  border-radius: 1rem;
  box-shadow: 0px 0px .75rem var(--box-shadow-color);
}




/* Success */

#success-display-box {
  width: max-content;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: flex; 
  position: relative;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  border-radius: .75rem;
  background: #39c816;
  max-width: calc(80vw - 3rem);
}

#success-display {
  transition-timing-function: var(--card-transition);
  position: fixed;
  transform: translateY(-125%);
  width: 100%;
  display: grid; 
  place-items: center;
  z-index: 1001;
}

#success-display.active {
  transition-timing-function: var(--card-transition);
  transform: translateY(1rem);
}











/* technoblade */
#technoblade-display-box {
  width: max-content;
  overflow: hidden;
  display: flex;
  margin-left: 1rem;
  align-items: center;
  justify-content: space-around;
  column-gap: .25rem;
  border-radius: .75rem;
  background: var(--background-color);
  border: solid 1px var(--shadow-color);
  max-width: calc(100vw - 3rem);
  height: 6rem;
}

#technoblade-display-box .border-button:hover {
  color: #050446;
}

#technoblade-display {
  transition-timing-function: var(--card-transition);
  position: fixed;
  transform: translateY(-125%);
  bottom: 2rem;
  z-index: 1002;
}

#technoblade-display.active {
  transition-timing-function: var(--card-transition);
  transform: translateY(1rem);
}



#success-display.active #technoblade-display.active{
  transform: translateY(4rem);
}

















.collapsible-menu-show {
  max-height: 15rem;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.collapsible-menu.collapsible-menu-show #scrollheaderlink {
  border-radius: 1rem 1rem 0 0;
}


@media screen and (max-width: 700px){
  .section {
    flex-direction: column-reverse;
  }

  .section-display-wrapper {
    width: 100%;
    margin-top: 4rem;
  }
  .section-text-wrapper {
    width: 100%;
    margin-top: 4rem;
  }
}


.social-icon {
  background: var(--gradient1);
  -webkit-background-clip: text;
  color: var(--text-color);
  transition-duration: .1s;
  font-size: 2rem;
}

.social-icon:hover{
  transition-duration: .1s;
  color: transparent;
  cursor:pointer;
}


.pointer:hover {
  cursor: pointer;
}
@media screen and (min-width: 500px){
  .footer-grid {
    grid-template-areas: 'a b c d';
    text-align: center;
    
  }
}

.backgi {
  position: absolute;
  font-size: 2rem;
  color: var(--main-color);
  user-select: none;
}

@media screen and (max-width: 500px){
  .footer-grid {
    grid-template-areas: 'a b' 'c d';
    text-align: center;
  }
}

@media screen and (max-width: 200px){
  .footer-grid {
    grid-template-areas: 'a' 'b' 'c' 'd';
    text-align: left;
  }
}
.footer-img {
  height: 2rem; position: absolute;image-rendering: pixelated;opacity: 0.3;
  animation: float 3s infinite;
}

@keyframes float{
  0% {
    transform:translateY(0px)
  }
  50% {
    transform: translateY(.5rem);
  }

  100% {
    transform:translateY(0px)
  }
}

.discord-shower {
  transition-duration: .1s;
  font-size: 2rem;
}


.discord-shower:hover{
  transition-duration: .1s;
  color: var(--main-color);
  cursor:pointer;
}

.discord-hider {
  opacity: 0;
  transition-duration: .5s;
}

.discord-shower:hover .discord-hider {
  opacity: 1;
  transition-duration: .5s;
}

.page-wrapper {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}


#success-display {
  position: fixed;
  transform: translateY(-125%);
  width: 100%;
  display: grid; 
  place-items: center;
  z-index: 1001;
}

#success-display.active {
  transform: translateY(1rem);
}

#fail-display {
  position: fixed;
  transform: translateY(-125%);
  width: 100%;
  display: grid; 
  place-items: center;
  z-index: 1001;

}

#fail-display-box {
  width: max-content;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: flex; 
  align-items: center;
  justify-content: center;
  padding: .5rem 1.5rem .5rem 1.5rem;
  border-radius: 1rem;
  box-shadow: .25rem .25rem 1rem rgba(255, 255, 255, 0.17);
  color: var(--text-color);
  max-width: calc(80vw - 3rem);
  background: #ef2906;
}

#success-display-box {
  width: max-content;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: flex; 
  align-items: center;
  justify-content: center;
  padding: .5rem 1.5rem .5rem 1.5rem;
  border-radius: 1rem;
  max-width: calc(80vw - 3rem);
}

#fail-display.active {
  transform: translateY(1rem);
}

#success-display.active + #fail-display.active{
  transform: translateY(calc(3rem + 5vh)) !important;
}





.slide {
  padding: 8%;
    width: calc(100% - 16%);
  display: grid;
  place-items: center;
}

.slide h1{
  font-family: Poppins;
  font-size: 3rem;
  line-height: 3.25rem;
  color: var(--text-color);
  font-weight: var(--fw-900);
  margin: 0;

}

.slide p{
  font-family: Poppins;
  font-size: 1rem;
  color: var(--text-color-desc);
  font-weight: var(--fw-500);
  margin: 0;
}


@media screen and (min-width:1000px) {
  .slide {
      grid-template-columns: repeat(2,calc(50% - 3rem));
      gap: 6rem;
      min-height: 100vh;
  }
}

@media screen and (max-width:1000px){
  .slide {
    margin-top: 30vh;
    text-align: center;
    min-height: 80vh;
    gap: 2rem;
  }

  .slide .align-help {
    margin-left: auto;
    margin-right: auto;
  }

  .slide > div {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .slide > div button {
    padding: .75rem 3rem !important;
  }
}



@media screen and (max-width:600px)
{
  .slide h1 + .slideh1{
    font-size: 2rem;
    max-width: 100%;
  }
  .slide p + .slidep{
    font-size: .75rem;
  }

}







.slide-title {
  width: max-content;
  font-weight: var(--fw-800);
  font-size: 2rem; 
  width: 100%; 
  text-align: center;
  margin: 0; 
  line-height: 2.2rem;
  color: var(--text-color);
}

body.darkmode  .slide-title:not(.block) {
  text-shadow: 0 0 .75rem var(--text-color);
}

.slide-moderate {
  width: max-content;
  font-weight: var(--fw-800);
  font-size: 1.3rem; 
  width: 100%; 
  text-align: center;
  margin: 0; 
  line-height: 1.5rem;
  color: var(--text-color);
}

.slide-little {
  width: max-content;
  font-weight: var(--fw-600);
  font-size: 0.9rem; 
  width: 100%; 
  text-align: center;
  margin: 0; 
  line-height: 1rem;
  color: var(--text-color);
}

.slide-little.actual {
  font-weight: var(--fw-800);
  line-height: 1.8rem;
  font-size: 1.8rem;
}

.slide-little.actual.really {
  font-weight: var(--fw-900);
}

.slide-desc {
  width: max-content;
  font-weight: var(--fw-500);
  font-size: .9rem; 
  width: 100%;
  text-align: center;
  color: var(--text-color-desc);
  margin: 0;
}


.highlight {
  background: linear-gradient(0deg,var(--main-color-dark),var(--main-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-highlight {
  background: var(--gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}



.badge-wrapper {
  position: relative;
  display: grid;
  place-items: center;
}

.badge-background {
  width: 100%;
}

.gradient.one.legendary {
  stop-color: #ffe600;
}

.gradient.two.legendary {
  stop-color: #fa5e04;
}


.gradient.one.mythic {
  stop-color: #ffc400;
}

.gradient.two.mythic {
  stop-color: #9804fa;
}

.badge {
  width: 82%;position: absolute;
}

.data-flex-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


::selection{
  background: var(--text-color);
  color: var(--background-color);
}

.loader-anim {
  animation: loader 1s infinite;
}

#resizer-load {
  transition-duration: 1s;
}

button {
  font-size: .85rem;
}

.arrow-down {
  width: 0px;
  height: 0px;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #ffffff;
}

.themable {
  color: var(--text-color);
}
.themable-desc {
  color: var(--text-color);
}


#card {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 778;
  display: grid; 
  place-items: center;
  transition-timing-function: var(--card-transition);
}

#settings.active {
  transform: translateX(0);
  opacity: 1;
}

.color-input {
  background: var(--background-switch);
  border-radius: 10px;
  width: 50%;
  border: none;
  color: var(--text-color);
  padding: 0;
  height: 1.25rem;
  text-align: center;
  overflow: hidden;
  
}



.context-menu {
  position: absolute;
  text-align: center;
  background: var(--background-color);
  border: 1px solid rgb(61, 61, 61);
  border-radius: .5rem;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.192);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: .5rem;
  z-index: 5000;
}

.context-menu div {
  transition: .5s ease;
  display: flex;
  flex-direction: row;
  gap: .2rem;
  align-items: center;
  justify-content: center;
  margin: .2rem;
  padding: .5rem;
  border-radius: .5rem;
  font-size: .9rem;
  font-family: inter;
  font-weight: var(--fw-700);
  color: var(--text-color)
}

.context-menu div:hover {
  background: rgba(255, 255, 255, 0.099);
  cursor: pointer;
}

.context-menu div:active {
  background: var(--gradient1);
  cursor: pointer;
}



.context-menu div i {
  color: var(--text-color);
  font-size: 1.25rem;
}




/* footer */

.footer {
  width: 100%;
  border-top: solid 1px var(--shadow-color);
  margin: 3rem 0rem;
  min-height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer-flex {
  padding:2rem;
  display: flex;
  width: 50rem;
  max-width: 100%;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}


.footer .data-flex-v {
  display: flex;
  flex-direction: column;
  height: max-content;
}

.footer .data-flex img {
  width: 2.5rem;
  height: 2.5rem;
  margin: .5rem;
}

.footer h1 {
  font-family: Inter;
  font-weight: var(--fw-700);
  font-size: 1.5rem;
  color: var(--text-color);
}



.footer p {
  font-family: Inter;
  font-weight: var(--fw-400);
  font-size: .85rem;
  color: var(--text-color);
  margin: 0;
  cursor: pointer;
  padding: .45rem;
  width: max-content;
  border-radius: .25rem;
}

.footer p:hover:not(.gradient-highlight){
  background: var(--shadow-color-light);
}

.footer p.gradient-highlight {
  color: transparent;
  font-weight: var(--fw-700);
  cursor: text;
  font-size: 1rem;
}

.footer p.c {
  color: var(--text-color-desc);
  font-weight: var(--fw-500);
  font-size: .75rem;
}

.footer .data-flex {
  justify-content: center;
  align-items: center;
  height: max-content;
}

.footer > .data-flex {
  width: 50rem;
  max-width: 100%;
  justify-content: space-around;
  align-items: center;
}

.footer .data-flex .data-flex-v h1 {
  line-height: 1.5rem;
}

.footer .data-flex .data-flex-v p {
  color: var(--text-color-desc); padding: 0;font-size: .75rem;
}


@media screen and (max-width: 630px){
  .footer-flex{
    display: grid;
    grid-template-columns: repeat(2,50%);
    grid-template-rows: repeat(2,auto);
    gap: 2rem;
    max-width: calc(100% - 6rem);
  }

  .footer-flex .data-flex {
    width: max-content;
  }

  .footer > .data-flex > p.c {
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: center;
    width: 100%;

  }

  .footer > .data-flex {
    display: grid;
    grid-template-columns: repeat(2,50%);
    grid-template-rows: repeat(2,auto);
    padding: 1rem;
    width: calc(100% - 2rem);
    gap: 1rem;
  }
}
















.small-button {
  transition: none;
  border-radius: .75rem;
  background: rgba(255, 255, 255, 0.099);
  border: solid 1px var(--shadow-color);
  font-family: inter;
  padding: .5rem;
  color: var(--text-color);
}

.small-button:hover:not(.nohover) {
  transition: none;
  border-radius: .75rem;
  font-family: inter;
  color: white;
  background: var(--gradient1)
}

.small-button i {
  color: var(--text-color);
  transition: 0s;
}

.small-button:hover i {
  transition: 0s;
  color: white;
}