/* Set up a box model on the root element */
html {
  box-sizing: border-box;
}

/*
  1. Make all elements inherit the box-sizing property
  2. Remove default margin and padding
*/
*,
*::before,
*::after {
  box-sizing: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
}

/* Remove default list styles */
li {
  list-style: none;
}

/* Remove default link styles */
a {
  text-decoration: none;
  color: inherit;
}

/*
  1. Use the primary font family
  2. Set font size to 2rem
*/
h1 {
  font-family: "Lobster", cursive; /* 1 */
  font-size: 2rem; /* 2 */
}

/*
  1. Use the secondary font family
  2. Set font size to 1.5rem
*/
h2 {
  font-family: "Martian Mono", monospace; /* 1 */
  font-size: 1.5rem; /* 2 */
}

/*
  1. Use the tertiary font family
  2. Set font size to 1rem
*/
p {
  font-family: "Roboto", Arial, sans-serif; /* 1 */
  font-size: 1rem; /* 2 */
}

/*
  1. Use the secondary font family
  2. Set font size to 1rem and a lighter font weight (300)
  3. Transform the text to uppercase
*/
a {
  font-family: "Martian Mono", monospace; /* 1 */
  font-size: 1rem; /* 2 */
  font-weight: 300; /* 2 */
  text-transform: uppercase; /* 3 */
}

/*
  1. Use the primary font family
  2. Set font size to 1.5rem
  3. Set font weight to 700
  4. Remove text transformation
*/
.logo {
  font-family: "Lobster", cursive;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: unset;
}

/*
  1. Set a default text color
*/
body {
  color: #0F0F0F; /* 1 */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.grid-span-1 {
  grid-column: span 1;
}

.grid-span-2 {
  grid-column: span 2;
}

.grid-span-3 {
  grid-column: span 3;
}

.grid-span-4 {
  grid-column: span 4;
}

.grid-span-5 {
  grid-column: span 5;
}

.grid-span-6 {
  grid-column: span 6;
}

.grid-span-7 {
  grid-column: span 7;
}

.grid-span-8 {
  grid-column: span 8;
}

.grid-span-9 {
  grid-column: span 9;
}

.grid-span-10 {
  grid-column: span 10;
}

.grid-span-11 {
  grid-column: span 11;
}

.grid-span-12 {
  grid-column: span 12;
}

/*
  1. Fix the header to the top of the page
  2. Set the z-index to 100 to ensure it's on top of other elements
  3. Set the width to 100% to span the entire viewport
  4. Add padding to the header for spacing
*/
header {
  position: fixed; /* 1 */
  top: 0; /* 1 */
  z-index: 100; /* 2 */
  width: 100%; /* 3 */
  padding: 15px; /* 4 */
}

/*
  1. Use flex to layout the navigation bar items
  2. Separate the logo and the burger menu button
  3. Center the elements vertically
  4. Wrap the elements to the next line (navigation links)
  5. Add some padding
  6. Add a glassmorphism effect to the navigation bar
  7. Set the logo font size to 1.5rem
*/
nav {
  display: flex; /* 1 */
  justify-content: space-between; /* 2 */
  align-items: center; /* 3 */
  flex-wrap: wrap; /* 4 */
  padding: 15px; /* 5 */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 6 */
  /*
    1. Use flex-center mixin to center the icon
    2. Set the padding to 0.5rem
    3. Set custom border and make the button round
    4. Set the background color to custom white
    5. Add a box shadow for a 3D effect
    6. Change the cursor to a pointer
    7. Set the icon size to 1.5rem
  */
  /*
    1. Hide the navigation links for smaller screens
    2. Make the navigation links vertical
    3. Center the navigation links horizontally
    4. Set the width to 100% to wrap the navigation links to the next line
    5. Add some space between the navigation links and the logo
    6. Hide the home button by default
  */
  /*
    1. Hide the burger menu button
    2. Show the navigation links
    3. Make the navigation links horizontal
    4. Set the width to auto to not wrap the navigation links to the next line
    5. Add some space between the navigation links
    6. Remove the top margin from the navigation links
    7. Set the font size of the navigation links to 0.85rem
  */
  /*
    1. Increase the padding
    2. Make the logo and navigation links larger
    3. Increase the gap between the navigation links
  */
}
nav .logo {
  font-size: 1.5rem; /* 7 */
}
nav #burger-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 1 */
  padding: 0.5rem; /* 2 */
  border: 2px solid #0F0F0F; /* 3 */
  border-radius: 50%; /* 3 */
  background-color: #F5F5F5; /* 4 */
  box-shadow: 0 10px 25px rgba(15, 15, 15, 0.15); /* 5 */
  cursor: pointer; /* 6 */
}
nav #burger-menu-btn span {
  font-size: 1.5rem; /* 7 */
}
nav #nav-links {
  display: none; /* 1 */
  flex-direction: column; /* 2 */
  align-items: center; /* 3 */
  width: 100%; /* 4 */
  /*
  1. Show the navigation links
  */
}
nav #nav-links.show {
  display: flex; /* 1 */
}
nav #nav-links li {
  margin-top: 15px; /* 5 */
}
nav #nav-links li#home-button {
  display: none; /* 6 */
}
@media (min-width: 768px) {
  nav #burger-menu-btn {
    display: none; /* 1 */
  }
  nav #nav-links {
    display: flex; /* 2 */
    flex-direction: row; /* 3 */
    width: auto; /* 4 */
    gap: 15px; /* 5 */
  }
  nav #nav-links li {
    margin-top: 0; /* 6 */
  }
  nav #nav-links li a {
    font-size: 0.85rem; /* 7 */
  }
}
@media (min-width: 992px) {
  nav {
    padding: 25px; /* 1 */
  }
  nav .logo {
    font-size: 2rem; /* 2 */
  }
  nav #nav-links {
    gap: 25px; /* 3 */
  }
  nav #nav-links li a {
    font-size: 1rem; /* 2 */
  }
}

main {
  overflow: hidden;
}

/*
  1. Set the position of the coming-soon section to relative
  2. Create a column layout and center the content
  3. Make the coming-soon section span the entire viewport height
  4. Set the background color to a medium gray
*/
.coming-soon {
  position: relative; /* 1 */
  display: flex;
  flex-direction: column;
  /* 2 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2 */
  height: 100vh; /* 3 */
  background-color: rgb(128, 128, 128); /* 4 */
  /*
    1. Set the position to absolute and place it behind the glassmorphism effect
    2. Set the font size to 20rem
    3. Set the text color to a light gray
  */
  /*
    1. Place the h2 element on top of the glassmorphism effect
    2. Add some margin to the top of the h2 element
    3. Set the font size to 2.5rem and text color to white
  */
  /* Create a glassmorphism effect */
}
.coming-soon h1 {
  position: absolute; /* 1 */
  z-index: 1; /* 1 */
  font-size: 20rem; /* 2 */
  color: rgb(175, 175, 175); /* 3 */
}
.coming-soon h2 {
  z-index: 3; /* 1 */
  margin-top: 5rem; /* 2 */
  font-size: 2.5rem; /* 3 */
  color: #F5F5F5; /* 3 */
}
.coming-soon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/*
  1. Add padding to make it clickable and aesthetically pleasing
  2. Add a border for a button-like appearance
  3. Add a border radius to make it more visually appealing
  4. Add a box shadow for a 3D effect
  5. Set the background color to custom white
  6. Switch the text and background colors on hover
*/
a:not(.logo) {
  display: inline-block;
  padding: 0.5rem 1.5rem; /* 1 */
  border: 2px solid #0F0F0F; /* 2 */
  border-radius: 1.5rem; /* 3 */
  box-shadow: 0 10px 25px rgba(15, 15, 15, 0.15); /* 4 */
  background-color: #F5F5F5; /* 5 */
}
a:not(.logo):hover {
  color: #F5F5F5; /* 6 */
  background-color: #0F0F0F; /* 6 */
}

/*
  1. Make the home section span the entire viewport height
*/
#home {
  height: 100vh; /* 1 */
  /*
    1. Use flex and layout the elements in a column
    2. Center the elements vertically
    3. Add some padding
  */
}
#home .txt {
  display: flex;
  flex-direction: column;
  /* 1 */
  display: flex;
  justify-content: center;
  /* 2 */
  padding: 50px; /* 3 */
}
#home .txt h1 {
  font-size: 5rem;
}
#home .txt .bio {
  margin: 25px 0 40px;
}
#home .txt .bio p {
  margin-top: 25px;
}
#home .txt a {
  align-self: flex-start;
}
#home .img {
  display: flex;
  align-items: center;
  justify-content: center;
}
#home .img img {
  width: 450px;
  height: 450px;
  object-fit: cover;
  border-radius: 50% 0 50% 0;
}

/*# sourceMappingURL=main.css.map */