/* Font Faces */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Assistant:wght@200..800&family=Baskervville:ital,wght@0,400..700;1,400..700&family=Bitcount+Single:wght@100..900&family=Finlandica+Text:ital,wght@0,100..900;1,100..900&family=Lexend:wght@100..900&family=Marcellus&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mozilla+Headline:wght@200..700&family=New+Tegomin&family=Outfit:wght@100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Urbanist:ital,wght@0,100..900;1,100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap");

/* Fonts:
1. Montserrat
2. Afacad
3. New Tegomin
4. Outfit (NavBar anchor)
5. Bitcount Single
6. Space Grotesk
7. Mozilla Headline
8. Assistant
9. Red Hat Display (Arul Nova Title)
10. Lexend (h2)
11. Urbanist (Hero Buttons)
12. Finlandica Text (h1)
13. Marcellus
14. Zilla Slab
15. Baskervville 
16. Shippori Antique B1

*/

/* Type Selectors */

html {
  scroll-behavior: smooth;
  scrollbar-width: none; /* Options: auto, thin, none */
}

body {
  background-color: #030707;
  color: #fafaff;
  display: flex;
  flex-direction: column;

  /* Creates the horizontal and vertical grid lines */
  background-image:
    linear-gradient(to right, #b0e4cc0e 1px, transparent 1px),
    linear-gradient(to bottom, #b0e4cc0e 1px, transparent 1px);
  z-index: -1;

  /* Size of each grid square (40px by 40px) */
  background-size: 40px 40px;

  /* Grid takes the full screen height */
  min-height: 100vh;
  margin: 0;
}

h2 {
  font-family: "Lexend", sans-serif;
  font-style: normal;
}

a {
  text-decoration: none;
  color: #fafaff;
}

hr {
  margin: 1rem;
  opacity: 1;
  border: none;
  border-top: 3px solid #b0e4cc1e;
}

/* MORE Selectors */

@view-transition {
  navigation: auto;
}

::selection {
  background-color: #b0e4cc94; /* the blue box color */
  color: #ffffff;
}

/* Class Selectors */

#About,
#Skills,
#Projects {
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.NavBar {
  border-radius: 3rem;
  position: sticky;
  top: 1rem;
  background-color: #b0e4cc94;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;

  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;

  width: auto;
  margin: 0 auto;
}

.NavBar a {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  color: #030707;
  position: relative;
  text-decoration: none;
}

.NavBar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #fafaff;
  transition: width 150ms linear;
}

.NavBar a:hover {
  color: #fafaff;
  transition: 150ms linear;
}

.NavBar a:hover::after {
  width: 100%;
}

.Nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.Hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.HeroName {
  font-family: "Red Hat Display", sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 150px;
}

.HeroTitle {
  font-family: "Lexend", sans-serif;
  font-style: normal;
}

.HeroButtons {
  align-self: center;
  display: flex;
  margin: 0.5rem 0;
  gap: 1rem;
}

.HeroButtons a {
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 0.85rem;
  color: #030707;
}

.HeroButtons a:hover {
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 0.85rem;
  color: #f0fffa;
}

.ViewWork,
.BuildToge {
  background-color: #77c5a9;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: 200ms;
}

.ViewWork:hover,
.BuildToge:hover {
  background-color: #2c5f4ea6;
  box-shadow: 0px 0px 250px #77c5a9;
}

.SecHeads {
  padding-left: 2rem;
}

.SecTitle {
  font-family: "Assistant", sans-serif;
  font-style: normal;
}

.About {
  padding: 0 2rem;
}

.aboutstats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-evenly;
  margin-top: 2rem;
}

.projectcount,
.clientcount,
.languagecount,
.workstatus {
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background-color: #2c5f4ea6;
}

.projectcount,
.clientcount,
.languagecount,
.workstatus {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  height: 8rem;
  width: 8rem;
  justify-content: center;
  align-items: center;

  transition: 150ms ease;

  cursor: default;
  user-select: none;
}

.projectcount:hover,
.clientcount:hover,
.languagecount:hover,
.workstatus:hover {
  box-shadow: inset 0px 0px 100px #6beec02f;
}

.languagecount .labelonhover {
  display: none;
}

.languagecount:hover .count,
.languagecount:hover .label {
  display: none;
}

.languagecount {
  transition: 200ms;
}

.languagecount:hover {
  padding: 0.75rem;
  background-color: #204639a6;
}

.languagecount:hover .labelonhover {
  display: inline-block;
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
}

.workstatus .count,
.workstatus .label {
  font-family: "Urbanist", sans-serif;
  font-style: normal;
  font-size: larger;
  font-weight: bold;
}

.label {
  margin-top: 5px;
  font-family: "Urbanist", sans-serif;
  font-style: normal;
}

.aboutdesc {
  padding-top: 3.5rem;
  padding-left: 9rem;
  padding-right: 9rem;
  font-family: "Red Hat Display", sans-serif;

  cursor: default;
  user-select: none;
}

.aboutdesc code {
  font-family: "Mozilla Headline", sans-serif;
  border: 0.5px solid transparent;
  border-radius: 0.3rem;
  background-color: #091612a6;
  padding: 3px;
}

.aboutdesc:hover code {
  border-color: #6beec0a6;
  border-style: dashed;
  background-color: #091612a6;
  animation: border-flicker 0.3s step-end 1;
}

@keyframes border-flicker {
  0%,
  100% {
    border-color: #6beec05b;
  }
  50% {
    border-color: transparent;
    box-shadow: none;
  }
}

.aboutcurrent {
  padding-top: 1.5rem;
  padding-left: 4rem;
  font-family: "Outfit", sans-serif;

  cursor: default;
  user-select: none;
}

.currentitem {
  padding-left: 2.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.currentitem a {
  cursor: default;
  user-select: none;
}

.currenttitle {
  font-family: "Shippori Antique B1", sans-serif;
  font-style: normal;
  font-size: 10px;
}

.currentdesc {
  font-family: "Shippori Antique B1", sans-serif;
  font-style: normal;
  font-size: 13px;
}

.Skills {
  padding: 0 2rem;
}

.skillset {
  padding-left: 4rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem;
}

.TechIcon {
  width: 1.25rem;
  height: 1.25rem;
}

.langlist a,
.framelist a,
.designlist a {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.langset h5,
.frameset h5,
.designset h5 {
  font-family: "Finlandica Text", sans-serif;
  font-style: normal;
}

.langlist,
.framelist,
.designlist {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.langlist a,
.framelist a,
.designlist a {
  font-family: "Urbanist", sans-serif;
  border: 0.5px solid transparent;
  border-radius: 0.5rem;
  background-color: #091612a6;
  padding: 7px;
  /* padding-left: 15px;
  padding-right: 15px; */

  cursor: default;
  user-select: none;
}

.Technology:hover {
  border-color: #6beec05b;
  background-color: #12271fc2;
}

.education::before {
  content: "";
  position: absolute;

  left: 10px;
  top: 5px;
  bottom: 40px;

  border-radius: 5rem;

  width: 3px;
  background: #6beec0a6;

  opacity: 25%;
}

.education {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: fit-content;
  margin-left: 4rem;
  padding-left: 3rem;
}

.schools {
  border-left: 4.5px solid #6beec0a6;
  border-top: 0.125px solid #6beec0a6;
  border-right: 0.125px solid #6beec0a6;
  border-bottom: 0.125px solid #6beec0a6;
  border-radius: 0.5rem;
  width: auto;
  padding: 7px;
  padding-left: 2rem;
  padding-right: 16rem;
  padding-bottom: 1.5rem;
  z-index: -1;
}

.schools {
  position: relative;
  margin-left: 0;
}

.schools::before {
  content: "";
  position: absolute;

  width: 10px;
  height: 10px;

  background: #6beec0a6;
  transform: rotate(45deg);

  left: -46px;
  top: 24px;
}

.schools h4,
.schools p,
.schools small {
  font-family: "Lexend", sans-serif;
  font-style: normal;
}

.schools p {
  font-size: 15px;
}

.current-learning {
  padding-left: 4rem;
}

.nowlist a,
.laterlist a {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;

  cursor: default;
  user-select: none;
}

.nowstuff h5,
.laterstuff h5 {
  font-family: "Finlandica Text", sans-serif;
  font-style: normal;
}

.nowlist {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.laterlist {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.nowlist a,
.laterlist a {
  font-family: "Urbanist", sans-serif;
  border: 0.5px solid transparent;
  border-radius: 0.5rem;
  background-color: #091612a6;
  padding: 7px;
}

/* Tabs in Skills and Edu */

.skill-tabs {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  padding-left: 3rem;
}

.tab-btn {
  background: none;
  border: none;
  color: #fafaff;
  cursor: pointer;
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: 0.2s;
}

.tab-btn:hover {
  color: #77c5a9a6;
}

.tab-btn.active {
  border-bottom: 2px solid #77c5a9a6;
  color: #77c5a9;
}

.tab-content {
  display: none;
  animation: fade 0.25s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tabs in Skills and Edu - End */

.Projects {
  padding: 0 2rem;
}

.gitactivity {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;

  padding-top: 1rem;
  padding-bottom: 2rem;
}

.activitygraph {
  padding: 2rem;
  background-color: #09161277;
  border-radius: 1rem;
  /* border: 2px solid #fafaff; */
}

.gitbutt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;

  font-family: "Red Hat Display", sans-serif;
  font-size: 16px;
  border-radius: 1.75rem;
  background-color: #1631285b;
  padding: 11px;

  transition: 200ms;
}

.gitbutt:hover {
  background-color: #12271fc2;
  box-shadow: 0px 0px 250px #6beec0a6;
}

.gitbuttleft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.gitbuttright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.BuildSecHead {
  display: flex;
  justify-content: center;
  padding-top: 1rem;

  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 20px;
}

.BuildTogeSec {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding-bottom: 3rem;
  padding-left: 3px;

  font-family: "Shippori Antique B1", sans-serif;
}

.BuildTogeSecButt {
  font-family: "Shippori Antique B1", sans-serif;
  color: #030707;
  background-color: #77c5a9;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 150ms;
}

.BuildTogeSecButt:hover {
  color: #fafaff;
  background-color: #2c5f4ea6;
  box-shadow: 0px 0px 200px #77c5a9;
}

/* Footer CSS */

.Footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.75rem;

  padding-top: 1rem;
  padding-left: 5rem;
  padding-right: 5rem;
  padding-bottom: 3rem;
}

.SocialIcon {
  width: 1rem;
  height: 1rem;
}

.TopFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.TopLeftFoot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.TopLeftFoot a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;

  font-family: "Red Hat Display", sans-serif;
  font-size: 13px;
  color: #ffffff;
  border: 0.5px solid #6beec0a6;
  border-radius: 0.5rem;
  background-color: #1631285b;
  padding: 7px;

  transition: 200ms;
}

.TopLeftFoot a:hover {
  scale: 1.03125;
  box-shadow: 0px 0px 100px #6beec0a6;
}

.TopRightFoot h2 {
  display: flex;
  flex-wrap: wrap;

  font-family: "Red Hat Display", sans-serif;
}

.TopLeftFoot a:hover {
  color: #fafaff;
  background-color: #6beec023;
}

.BottomFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.BotLeftFoot {
  display: flex;
  gap: 0.5rem;
}

.BotRightFoot {
  display: flex;
  gap: 0.5rem;
}

.BotLeftFoot a,
.BotRightFoot a {
  font-family: "Red Hat Display", sans-serif;
  font-size: 13px;
}