*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 200ms ease-in-out;
}

html,
body {
  transition: initial; /** reset transition to get a smooth resizing */
}

html {
  font-size: 62.5%; /** 1rem = 10px */
}

img,
video {
  max-width: 100%;
}

:root[data-theme='dark'],
:root {
  --primary-txt-clr: #eee;
  --hilight-primary-txt-clr: #fff;
  --fade-primary-txt-clr: #bbb;

  --secondary-clr: #222;
  --hilight-secondary-clr: #111;
  --fade-secondary-clr: #333;
}
:root[data-theme='light'] {
  --primary-txt-clr: #222;
  --hilight-primary-txt-clr: #111;
  --fade-primary-txt-clr: #333;

  --secondary-clr: #eee;
  --hilight-secondary-clr: #fff;
  --fade-secondary-clr: #bbb;
}

body {
  font: 2rem/1.5 -apple-system, 'Helvetica Neue', sans-serif;
  color: var(--primary-txt-clr);
  min-height: max-content;
}

.background-effect {
  position: fixed;
  width: 100%;
  height: 100%;
  inset: 0;
  filter: blur(35px);
  background-image: url('/assets/images/icon.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;

  z-index: 0;
}
.background-effect::after {
  content: '';
}

:root[data-theme='light'] .background-effect::after {
  opacity: 0.5;
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px,
    0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  background-image: radial-gradient(
      18% 28% at 24% 50%,
      #cefaffff 7%,
      #073aff00 100%
    ),
    radial-gradient(18% 28% at 18% 71%, #ffffff59 6%, #073aff00 100%),
    radial-gradient(70% 53% at 36% 76%, #73f2ffff 0%, #073aff00 100%),
    radial-gradient(42% 53% at 15% 94%, #ffffffff 7%, #073aff00 100%),
    radial-gradient(42% 53% at 34% 72%, #ffffffff 7%, #073aff00 100%),
    radial-gradient(18% 28% at 35% 87%, #ffffffff 7%, #073aff00 100%),
    radial-gradient(31% 43% at 7% 98%, #ffffffff 24%, #073aff00 100%),
    radial-gradient(21% 37% at 72% 23%, #d3ff6d9c 24%, #073aff00 100%),
    radial-gradient(35% 56% at 91% 74%, #8a4ffff5 9%, #073aff00 100%),
    radial-gradient(74% 86% at 67% 38%, #6dffaef5 24%, #073aff00 100%),
    linear-gradient(125deg, #4eb5ffff 1%, #4c00fcff 100%);
}

:root[data-theme='dark'] .background-effect::after,
.background-effect::after {
  position: fixed;
  inset: -100px;
  opacity: 1;

  background-image: radial-gradient(
    75% 75% at 50% 50%,
    #0000009f 0%,
    #000205 100%
  );
  z-index: 2;
}

/* Wrapper */

.page-header {
  position: sticky;
  top: 10px;
  width: 95%;
  max-width: 900px;
  margin: auto;
  padding: 0rem 1rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.page-header.show-header {
  color: #222;
  background-color: rgba(255, 255, 255, 0.507);
  border-radius: 100px;
  border: 1px solid #fff;
  backdrop-filter: blur(5px);
}

.page-header .header__avatar {
  width: 0px;
  height: 0px;
}

.page-header.show-header .header__avatar {
  width: 45px;
  height: 45px;
}

.page-header .header__title {
  font-size: 0px;
}
.page-header.show-header .header__title {
  font-size: 2.7rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
}

.content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;

  width: 100%;
  max-width: 700px;
  margin: auto;
  padding: 7rem 0 5rem;
}

/* Header */

.main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.main-wrapper {
  width: 100%;
  padding: 0 1.5rem;
}

.main-header .avatar {
  max-width: 110px;
}

.main-header {
  text-align: center;
}

.main-header .titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.main-header .title {
  font-size: 2.5rem;
  color: var(--hilight-primary-txt-clr);
  font-weight: 500;
}

.main-header .sub-title {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--fade-primary-txt-clr);
}

/* Main Start */
/* Links Wrap Start */
.links-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.link {
  color: var(--primary-txt-clr);
  background-color: var(--hilight-secondary-clr);
  text-decoration: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 500px;
  padding: 0.3em 0.5em;
  border-radius: 10px;
  width: 100%;
  box-shadow: rgba(60, 64, 67, 0.412) 0px 4px 5px 3px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  transition: box-shadow 200ms ease-in-out;
}

.link:hover,
.link:focus-visible {
  color: var(--hilight-primary-txt-clr);
  box-shadow: none;
}
.link:focus-visible {
  outline: 4px dotted var(--hilight-primary-txt-clr);
  outline-offset: 7px;
}

.link .link__txt {
  flex-grow: 1;
  text-align: center;
}

.link .link__icon {
  display: grid;
  place-items: center;
}

/* Darktheme toggle Style start */

.theme-toggle-wrap {
  max-width: max-content;
  max-height: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  border-radius: 100vmax;
  position: relative;
  right: 0;
  display: block;
  background-color: transparent;
  box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
    inset 0px -5px 115px rgba(255, 255, 255, 0.4);
  transform: scale(0.6);
}

/* Theme Switch Icon Start */
.theme-toggle {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--icon-width, 70px);
  height: var(--icon-height, 70px);
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 100vmax;
}

/* Ripple effect */
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 60%, 0.5);
  transform-origin: center center;
  border-radius: 100vmax;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: transform 320ms ease-in, opacity 200ms linear;
  z-index: -1;
}

.theme-toggle:active:before {
  opacity: 1;
  transform: scale(1);
}

/* Remove it on small screen sizes */
@media (min-width: 600px) {
  .theme-toggle::after {
    content: attr(aria-label);
    width: max-content;
    position: absolute;
    top: 110%;
    font-size: 1.1em;
    background-color: rgb(61, 61, 61);
    color: #eee;
    padding: 0.2em 0.6em;
    border-radius: 5px;
    opacity: 0;
    transform: scale(0);
    transform-origin: top center;
    transition: transform 120ms ease-in, opacity 100ms linear;
  }
  :root[data-theme='dark'] .theme-toggle::after {
    color: #333;
    background-color: rgb(208, 208, 214);
  }
  .theme-toggle:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  .theme-toggle:active:after {
    opacity: 0;
    transform: scale(0);
  }
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  outline: 1px solid transparent;
  background-color: hsla(0, 0%, 50%, 0.1);
}

/* Light mood basic & hover for icon items start*/
.theme-toggle :is(.toggle__star, .toggle__circle) {
  color: hsl(0, 0%, 38%);
}

.theme-toggle:is(:hover, :focus-visible) :is(.toggle__star, .toggle__circle) {
  color: hsl(0, 0%, 0%);
}
/* Light mood basic & hover for icon items end*/

/* Dark mood basic & hover for icon items start*/

:root[data-theme='dark'] .theme-toggle :is(.toggle__star, .toggle__circle) {
  color: hsl(0, 0%, 60%);
}

:root[data-theme='dark']
  .theme-toggle:is(:hover, :focus-visible)
  :is(.toggle__star, .toggle__circle) {
  color: hsl(0, 0%, 100%);
}

/* Dark mood basic & hover for icon items end*/

.toggle__circle,
.toggle__star {
  transform-origin: center center;
}

.toggle__circle {
  transition: transform 0.5s linear;
}

@keyframes star-light-animation {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(0.5turn);
  }
}

@keyframes star-dark-animation {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(-0.5turn);
  }
}

@keyframes circle-light-animation {
  0% {
    transform: translate(0%, 0%) scale(1);
  }
  100% {
    transform: translate(-15%, -1%) scale(1.1);
  }
}

@keyframes circle-dark-animation {
  0% {
    transform: translate(-15%, -1%) scale(1.1);
  }

  100% {
    transform: translate(0%, 0%) scale(1);
  }
}

/* Theme Switch Icon End */
/* Darktheme toggle Style end */

/* Links Wrap End */
/* Main End */

/* Responsiveness Start */
@media (max-width: 500px) {
  .page-header.show-header .header__title {
    font-size: 1.6rem;
  }
  .main-header .title {
    font-size: 2.3rem;
  }

  .main-header .sub-title {
    font-size: 1.3rem;
  }
  .link .link__txt {
    font-size: 1.7rem;
  }
}
/* Responsiveness End */