/*  ========== RESET ==========*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
img {
  max-width: 100%;
}
img,
button {
  display: block;
}
a,
span {
  display: inline-block;
}
a {
  cursor: pointer;
}
button {
  font: inherit;
}
html {
  font-family: "inher", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.8;
}
:focus {
  outline-offset: 4px;
}

/*=============== light theme colors  ===============*/
.light-theme {
  --background-primary: hsl(0, 0%, 100%);
  --background-secondary: hsl(210, 100%, 98%);

  --action-primary: hsl(213, 49%, 89%);
  --action-secondary: hsl(210, 56%, 94%);

  --foreground-primary: hsl(218, 24%, 18%);
  --foreground-secondary: hsl(216, 12%, 47%);
  --foreground-tertiary: hsl(214, 22%, 70%);

  --accent: hsl(229, 94%, 62%);
}

/*=============== dark theme colors  ===============*/
.dark-theme {
  --background-primary: hsl(218, 23%, 23%);
  --background-secondary: hsl(220, 26%, 14%);

  --action-primary: hsl(216, 15%, 52%);
  --action-secondary: hsl(218, 23%, 23%);

  --foreground-primary: hsl(210, 38%, 95%);
  --foreground-secondary: hsl(211, 25%, 84%);
  --foreground-tertiary: hsl(214, 20%, 69%);

  --accent: hsl(229, 94%, 62%);
}

/*  ========== Scrollbar ==========*/
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray;
  border: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 10px;
  border: 2px solid var(--background-primary);
}

/*  ========== menubar ==========*/
.menubar {
  background-color: var(--background-secondary);
  position: fixed;
  width: -webkit-fill-available;
  z-index: 100;
}
.menubar-item {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1150px;
  padding: 1rem 2rem;
}
.menubar .left-menubar .name {
  font-weight: 900;
  font-size: 1.4rem;
}
.menubar .left-menubar .name span {
  color: var(--accent);
}
.menubar .left-menubar .name {
  color: var(--foreground-primary);
}
.right-menubar {
  display: flex;
  justify-content: end;
  font-size: 1rem;
}
.right-menubar .nav-item a {
  color: var(--foreground-primary);
  font-weight: 600;
  opacity: 0.7;
  padding: 0 1rem;
}
.right-menubar .nav-item a:hover {
  color: var(--accent);
}
.light-theme .right-menubar .btn-theme .btn-icon {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: rgb(206, 147, 10);
  background: linear-gradient(
    90deg,
    rgb(218, 145, 11) 0%,
    rgb(214, 134, 20) 35%,
    rgb(234, 84, 10) 100%
  );
  border-radius: 60px;
  border: 0;
  width: 49px;
  height: 1.6rem;
  color: white;
}
.dark-theme .right-menubar .btn-theme .btn-icon {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: rgb(37, 158, 190);
  background: linear-gradient(
    90deg,
    rgba(37, 158, 190, 1) 0%,
    rgba(41, 98, 224, 1) 35%,
    rgba(126, 53, 189, 1) 100%
  );
  border-radius: 60px;
  border: 0;
  width: 49px;
  height: 1.6rem;
  color: white;
}
.right-menubar .btn-theme .btn-icon .change-theme {
  position: absolute;
  width: 45px;
  height: 1.7rem;
  border-radius: 60px;
  padding-right: 3rem;
}
.right-menubar .btn-theme .btn-icon .change-theme ion-icon {
  position: absolute;
  font-size: 1.7rem;
  z-index: 100;
  transition: all 0.5s ease-in-out;
}
ion-icon {
  font-size: 1rem;
}

/* ===========  menubar-menu-item (1100px) =========== */
.menubar .right-menubar .icon {
  display: none;
}
.menubar .right-menubar .icon .icon-item {
  display: flex;
}
.menubar .right-menubar .icon .icon-item .btn-icon {
  display: flex;
}
.menubar .right-menubar .icon .icon-item .btn-icon .moon {
  border-radius: 50%;
  display: flex;
  margin-left: 1rem;
  border: none;
  background-color: var(--background-secondary);
  align-items: center;
  position: absolute;
  z-index: 2;
}
.dark-theme .menubar .right-menubar .icon .icon-item button ion-icon {
  color: aliceblue;
}
.menubar .right-menubar .icon .icon-item .btn-icon .sunny {
  border-radius: 50%;
  display: flex;
  margin-left: 1rem;
  border: none;
  z-index: 1;
  background-color: var(--background-secondary);
  align-items: center;
}
.menubar .right-menubar .icon .icon-item .menu .menu-btn {
  border-radius: 50%;
  display: flex;
  margin-left: 1rem;
  border: none;
  background-color: var(--background-secondary);
  align-items: center;
}
.menubar .right-menubar .icon .icon-item button ion-icon {
  font-size: 1.8rem;
  margin: 0.5rem;
  cursor: pointer;
}
.menubar-menu-group {
  position: fixed;
  z-index: 9999;
  margin: -6rem 0;
  padding: 0;
  background-color: var(--background-primary);
  width: 100%;
  height: 2000px;
  display: none;
}
.menubar-menu-group .menu-item-group {
  display: flex;
  flex-direction: column;
}
.menubar-menu-group .menu-item .close-btn {
  display: flex;
  justify-content: end;
  margin: 2rem;
}
.menubar-menu-group .menu-item .close-btn button {
  border-radius: 50%;
  display: flex;
  border: none;
  align-items: center;
  background-color: var(--background-secondary);
}
.menubar-menu-group .menu-item .close-btn button ion-icon {
  font-size: 1.8rem;
  margin: 0.5rem;
}
.menubar-menu-group .menu-item .menu-item-group {
  margin: 1rem;
}
.menubar-menu-group .menu-item .menu-item-group .main-menu {
  margin: 1rem;
}
.menubar-menu-group .menu-item .menu-item-group .main-menu h1 {
  font-size: 0.8rem;
}
.menubar-menu-group .menu-item .menu-item-group .main-menu a {
  font-size: 0.6rem;
}
.menubar-menu-group .menu-item .menu-item-group .topics {
  margin: 1rem;
}
.menubar-menu-group .menu-item .menu-item-group a {
  color: var(--foreground-secondary);
  margin: 0.5rem 0;
  display: flex;
  width: 100%;
}
.menubar-menu-group .menu-item .menu-item-group .topics h1 {
  font-size: 0.8rem;
}
.menubar-menu-group .menu-item .menu-item-group .topics a {
  font-size: 0.6rem;
}
.menubar-menu-group .menu-item .menu-item-group a:hover {
  color: var(--accent);
}

/*  ========== hero ==========*/
.hero {
  background-color: var(--background-primary);
  padding-top: 6rem;
}
.hero-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1150px;
  margin: auto;
}
.hero-item .right {
  height: 44rem;
  padding-top: 2rem;
}
.hero-item .right .bg-img {
  position: absolute;
  width: 35rem;
  height: 40rem;
  opacity: 0.4;
}
.hero-item .right .bg-hero-outline {
  position: absolute;
  background-color: var(--action-primary);
  margin: 9rem 4.4rem;
  padding: 14.8rem;
  height: 27rem;
  border-radius: 50%;
}
.hero-item .right .bg-hero {
  position: absolute;
  background-color: var(--accent);
  height: 27rem;
  margin: 8rem 4rem;
  padding: 14.3rem;
  border-radius: 50%;
}
.hero-item .right .img-hero {
  position: absolute;
  margin: 1rem 3rem;
  border-radius: 50%;
  height: 36rem;
}
.hero-item .left {
  margin-top: 5rem;
  padding-left: 2rem;
  padding-right: 1.5rem;
}
.hero-item .left h1 {
  font-size: 3rem;
  font-weight: 900;
  color: var(--foreground-primary);
}
.hero-item .left h1 span {
  color: var(--accent);
}
.hero-item .left p {
  color: var(--foreground-primary);
  opacity: 0.7;
  font-size: 2rem;
}
.hero-item .left .btn-group {
  display: grid;
  grid-template-columns: auto auto;
  width: 70%;
  padding: 1rem 0;
}
.hero-item .left .btn-contact {
  border-radius: 20px;
  font-size: 1rem;
  width: 8rem;
  height: 3rem;
  background-color: var(--accent);
  color: var(--background-primary);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-item .left .btn-contact:hover {
  background-color: var(--foreground-secondary);
  color: var(--action-primary);
  border: 1px solid var(--foreground-secondary);
}
.hero-item .left .btn-AboutMe {
  border-radius: 20px;
  font-size: 1rem;
  width: 8rem;
  height: 3rem;
  background-color: var(--background-primary);
  color: var(--foreground-secondary);
  border: 1px solid var(--foreground-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-item .left .btn-AboutMe:hover {
  background-color: var(--background-primary);
  color: var(--accent);
  border: 1px solid var(--accent);
}

/*  ========== main ==========*/
main {
  background-color: var(--background-secondary);
}
.main .container {
  display: grid;
  grid-template-columns: 5fr 2fr;
  max-width: 1150px;
  margin: auto;
}

/*  ========== main-blog ==========*/
.main .container .blog {
  margin-top: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.main .container .blog .text-up {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.main .container .blog .text-up h1 {
  opacity: 0.7;
  font-size: 1.5rem;
  color: var(--foreground-primary);
}
.main .container .blog .line-color {
  background-color: var(--foreground-tertiary);
  border-radius: 5px;
  height: 1.8rem;
  width: 0.3rem;
  margin-right: 2rem;
}
.main .container .blog .blog-box {
  background-color: var(--background-primary);
  display: grid;
  grid-template-columns: 3fr 4fr;
  margin: 1rem 0;
  transition: all 0.5s ease-in-out;
}
.main .container .blog .blog-box:hover {
  transform: translatey(-5px);
}
.main .container .blog .blog-box .left {
  padding: 0.5rem 0.5rem;
}
.main .container .blog .blog-box .left .img {
  overflow: hidden;
  border-radius: 5px;
}
.main .container .blog .blog-box .left .img img {
  object-fit: cover;
}
.main .container .blog .blog-box .right {
  padding: 0.5rem 2rem;
  color: var(--foreground-primary);
}
.main .container .blog .blog-box .right .btn-database button {
  margin: 0.2rem 0rem;
  border-radius: 8px;
  padding: 0.2rem 1rem;
  background-color: var(--action-primary);
  color: var(--foreground-secondary);
}
.main .container .blog .blog-box .right button:hover {
  background-color: var(--foreground-secondary);
  color: var(--action-primary);
}
.main .container .blog .blog-box .right a {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.5rem 0;
}
.main .container .blog .blog-box .right a:hover {
  text-decoration: underline;
}
.main .container .blog .blog-box .right p {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 0.9rem;
}
.main .container .blog .blog-box .profile {
  display: flex;
  margin: 1rem 0;
}
.main .container .blog .blog-box .profile img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--foreground-tertiary);
}
.main .container .blog .blog-box .profile .name-date {
  opacity: 0.7;
  display: grid;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.main .container .blog .blog-box .profile .time-outline {
  color: var(--foreground-tertiary);
  font-size: 1rem;
}
.main .container .blog .blog-box .profile .time-seen {
  display: flex;
  align-items: flex-end;
}
.main .container .blog .blog-box .profile .time-seen .time-outline {
  padding: 10px 0;
}
.main .container .blog .blog-box .profile .time-seen p {
  opacity: 0.7;
  padding: 4.5px 5px;
}
.main .container .blog button {
  border-radius: 30px;
  margin: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
  font-size: 1.3rem;
  padding: 0.7rem 3rem;
  background-color: var(--foreground-secondary);
  border: 0;
}
.main .container .blog button:hover {
  background-color: var(--accent);
}
/*  ========== main-asid ==========*/

/*  ========== main-asid-topics ==========*/
.asid {
  width: 400px;
}
.asid .topics {
  margin: 3rem 3rem;
}
.asid .topics .text-up p {
  font-size: 1.7rem;
  text-align: center;
  font-weight: 700;
  color: var(--foreground-primary);
}
.asid .topics .topics-item {
  margin: 2rem 0;
  color: var(--foreground-primary);
}
.asid .topics .topics-item ion-icon {
  color: var(--foreground-secondary);
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0 2rem;
  border-radius: 1px;
  font-size: 1.3rem;
}
.asid .topics .topics-item p {
  padding-left: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0.7;
}
.asid .topics .topics-item .server {
  display: flex;
  align-items: center;
  background-color: var(--background-primary);
  border-radius: 10px;
  margin: 1rem 1rem;
}
.asid .topics .topics-item .accessibility {
  display: flex;
  align-items: center;
  background-color: var(--background-primary);
  border-radius: 10px;
  margin: 1rem 1rem;
}
.asid .topics .topics-item .rocket {
  display: flex;
  align-items: center;
  background-color: var(--background-primary);
  border-radius: 10px;
  margin: 1rem 1rem;
}
.asid .topics .topics-item .server:hover ion-icon {
  background-color: var(--accent);
  color: white;
  transition: all 0.5s ease-in-out;
}
.asid .topics .topics-item .accessibility:hover ion-icon {
  background-color: var(--accent);
  color: white;
  transition: all 0.5s ease-in-out;
}
.asid .topics .topics-item .rocket:hover ion-icon {
  background-color: var(--accent);
  color: white;
  transition: all 0.5s ease-in-out;
}

/*  ========== main-asid-tags ==========*/
.asid .tags {
  margin: 3rem 3rem;
}
.asid .tags .text-up p {
  font-size: 1.7rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--foreground-primary);
}
.asid .tags .tags-box {
  background-color: var(--background-primary);
  padding: 1.5rem 1.5rem;
  border-radius: 10px;
}
.asid .tags .tags-box p {
  display: flex;
  background-color: var(--action-primary);
  color: var(--foreground-primary);
  display: inline-block;
  font-size: 0.9rem;
  padding: 0.4rem;
  margin: 0.2rem 0rem;
  border-radius: 5px;
  font-weight: 600;
  opacity: 0.5;
}
.asid .tags .tags-box p:hover {
  background-color: var(--foreground-secondary);
  color: white;
}

/*  ========== main-asid-tallk ==========*/
.asid .tallk {
  margin: 3rem 3rem;
  color: var(--foreground-primary);
}
.asid .tallk .text-up p {
  font-size: 1.7rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--foreground-primary);
}
.asid .tallk .tallk-box {
  background-color: var(--background-primary);
  padding: 1rem 0.5rem;
  border-radius: 10px;
}
.asid .tallk .tallk-box p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  padding: 1rem 1rem;
}
.asid .tallk .tallk-box ul {
  display: flex;
  margin-top: 1rem;
  justify-content: space-evenly;
}
.asid .tallk .tallk-box .logo-facebook {
  color: hsl(220, 46%, 48%);
}
.asid .tallk .tallk-box .logo-twitter {
  color: hsl(203, 89%, 53%);
}
.asid .tallk .tallk-box .logo-discord {
  color: hsl(235, 85%, 65%);
}
.asid .tallk .tallk-box ul li ion-icon {
  border-radius: 50%;
  padding: 0.8rem 0.8rem;
  display: flex;
  border-radius: 50%;
  background-color: var(--action-primary);
  font-size: 1.5rem;
}
.asid .tallk .tallk-box ul li ion-icon:hover {
  background-color: var(--accent);
  color: white;
}

/*  ========== main-asid-newsletter ==========*/
.asid .newsletter {
  margin: 3rem 3rem;
}
.asid .newsletter .text-up p {
  font-size: 1.7rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--foreground-primary);
}
.asid .newsletter .newsletter-box {
  background-color: var(--background-primary);
  padding: 1rem 1rem;
  border-radius: 10px;
}
.asid .newsletter .newsletter-box p {
  font-size: 1.1rem;
  opacity: 0.7;
  font-weight: 500;
  padding: 1rem 1rem;
  color: var(--foreground-primary);
}
.asid .newsletter .newsletter-box form input {
  border: none;
  background: var(--action-primary);
  display: block;
  width: 65%;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--foreground-secondary);
  border-radius: 5px;
  margin: auto;
  margin-bottom: 1rem;
}
.asid .newsletter .newsletter-box form button {
  border-radius: 20px;
  padding: 0.6rem 3rem;
  margin: auto;
  background-color: var(--accent);
  color: white;
  font-size: 1.2rem;
  border: none;
}
.asid .newsletter .newsletter-box button:hover {
  background-color: var(--foreground-secondary);
  color: var(--action-primary);
}

/*  ========== Footer ==========*/
footer {
  background-color: var(--background-primary);
}
.footer-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1150px;
  margin: auto;
  padding: 6rem 0;
  background-color: var(--background-primary);
}
.footer-container .left {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
}
.footer-container .left h1 span {
  color: var(--accent);
}
.footer-container .left h1 {
  font-weight: 800;
  color: var(--foreground-primary);
}
.footer-container .left p {
  font-size: 1rem;
  opacity: 0.6;
  width: 50%;
  color: var(--foreground-primary);
}
.footer-container .right {
  display: grid;
  grid-template-columns: auto auto;
}
.footer-container .right .group-item {
  display: grid;
}
.footer-container .right a {
  color: var(--foreground-primary);
  opacity: 0.6;
}
.footer-container .right a:hover {
  color: var(--accent);
}
.footer-container .right h1 {
  font-size: 1.5rem;
  color: var(--foreground-primary);
}
.footer-copyright {
  max-width: 1150px;
  margin: auto;
  text-align: center;
  background-color: var(--background-primary);
}
.footer-copyright p {
  padding: 1.5rem 0;
  color: var(--foreground-primary);
}
.footer-copyright a {
  color: var(--accent);
}
.footer-copyright .line {
  width: 100%;
  height: 0.1rem;
  background-color: var(--action-primary);
}