*{
  margin : 0;
  padding : 0;
  font-family : Ubuntu Mono;
}

body{
    background-color : black;
    color : white;
}

header{ 
  height : 5rem;
  width : 100%;
  padding-top : 2%;

  display : flex;
  justify-content : center;
  align-items : center;

  background-color : hsl(0, 0%, 87%);
  background-color : black;
}

nav{
  display : flex;
  justify-content : center;
  align-items : center;
  gap : 2rem;
  z-index : 3;

  border-radius : 5px;

  height : 3rem;
  width : 20rem;
  background-color : black;
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
  position : fixed;
}

nav a{
  text-decoration : none;
  font-size : 18px;
  font-weight : lighter;
padding : 2%;
  color : white;
}

nav a:hover{
  background-color : yellow;
  color : black;
  border-radius : 3px;
}

#hero-section{
  display : flex;
  justify-content : center;
  align-items : center;

  background-color : hsl(0,0%, 80%);
  background-color : transparent;
  height : 100vh;
  width : 100%
}

#hero-content{
  display : flex;
  justify-content : center;
  gap : 3rem;
  align-items:center;
  border-radius : 10px;
  position: relative;


  background-color : black;
  height : 50rem;
  width : 50rem;
}

#my-pic{
  height : 20rem;
  width : 15.5rem;
  border-radius : 10px;
}

#main-text{
  background-color : hsl(0, 0%, 95%);
  background-color : transparent;
  height : 15rem;
  width : 15rem;
  
  display: flex;
  justify-content : center;
  gap : 2rem;
  flex-direction : column;
  align-items : center;
}

#main-text{
  display: flex;
  justify-content : center;
  align-items : center;

  border-radius : 10px;
}

#hero-text{
  display: flex;
  height : 10rem;
  width : 10rem;
  justify-content: center;
  flex-direction : column;
  gap : 1rem;
  align-items: center;
}

#hero-text h1{
  font-size : 3rem;
}

#essential-links a{
  text-decoration : none;
  color : hsl(0, 0%, 10%);
}

#media-box{
  display:flex;
  justify-content: center;
  align-items : center;
  flex-direction : column;
  gap : 2rem;
}

#explore-btn{
  background-color : yellow;
  height : 2rem;
  width: 5rem;

  display : flex;
  justify-content : center;
  align-items : center;
  border-radius : 3px;
}

#explore-btn a{
  text-decoration : none;
  font-weight : bolder;
  color : black;
}


@property --angle{
    syntax: "<angle>";
    initial-value : 0deg;
    inherits : false;
}



#hero-content::after, #hero-content::before{
  content : '';
  position : absolute;
  height : 100%;
  width : 100%;
  background-image: conic-gradient(from var(--angle),transparent 70%, #7eff00, yellow);
  top : 50%;
  left : 50%;
  translate : -50% -50%;
  z-index : -1;
  padding : 10px;
  border-radius : 15px;

  animation : 5s spin ease-in-out infinite;
}

#hero-content::before{
    filter: blur(1.9rem);
}

@keyframes spin{
    from{
        --angle : 0deg;
    }
    to{
        --angle : 360deg;
    }
}