/* 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
5. Bitcount Single
6. Space Grotesk
7. Mozilla Headline
8. Assistant
9. Red Hat Display (h1)
10. Lexend (h1)
11. Urbanist
12. Finlandica Text (h1)
13. Marcellus
14. Zilla Slab
15. Baskervville 
16. Shippori Antique B1

*/

/* Element Selectors */

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

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

  background-image:
    linear-gradient(to right, #b0e4cc0e 1px, transparent 1px),
    linear-gradient(to bottom, #b0e4cc0e 1px, transparent 1px);
  z-index: -1;
  background-size: 40px 40px;
  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;
}

/* Class Selectors */

.NavBar {
  border-radius: 3rem;
  position: relative;
  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: fit-content;
  margin-left: 1rem;
}

.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;
}

.WorkToge {
  padding-top: 2rem;
  padding-left: 10rem;
}

.WorkToge h1 {
  font-family: "Shippori Antique B1", sans-serif;
}

.WorkToge p {
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: 100;
}

.MainSocials {
  display: flex;
  justify-content: space-evenly;
  padding-top: 1rem;
  padding-bottom: 5rem;
}

.MainSocials h5 {
  font-family: "Lexend", sans-serif;
}

.MainSocials a {
  font-family: "Outfit", sans-serif;
}

.LeftSocialList,
.RightSocials,
.RightTopSocialList,
.RightBotSocialList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.LeftSocials,
.RightSocials {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 7rem;
  padding-right: 7rem;
  border-radius: 25px;
}

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

  user-select: none;

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

  width: fit-content;

  transition: 150ms ease;
}

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

.RightTopSocialDCItem:hover::after {
  content: "@novarul71";
  font-size: smaller;
}

.RightTopSocialEMItem:hover::after {
  content: "novarul54@gmail.com";
  font-size: smaller;
}

.resbutton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-bottom: 2rem;
}

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

  user-select: none;

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

  width: fit-content;

  transition: 200ms ease;
}

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

.calcomintg h2 {
  display: flex;
  align-items: center;
  justify-content: center;

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

/* 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;
  justify-content: center;
  align-items: center;

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

  transition: 200ms;
}

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

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

.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;
}