:root {
    --background: #000000;
    --Special_txt: #ED1337;
    --pfp-height:24vw;
  }

body {
    overflow: hidden;
    display: flex;
    background: var(--background);
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

* {
    margin:0;
    padding: 0;
    /* border: 1px solid black; */
}


div {
    display : flex;
}

.header_contents{
    flex-direction: column;
    color: white;
    font-family: "Raleway";
    /* border: 2px solid white; */
    height: var(--pfp-height);
    margin-left: 1vw;
}

.bio{
    font-size: calc(var(--pfp-height)/8);
    width: calc((var(--pfp-height)/2.8)*4);
    font-weight: 500;
    line-height: 1;
    height: var(--pfp-height);
    display: inline-flex;
    flex-direction: column;
    
}

.header{
    justify-self: center;
    display: flex;
}

#pfp{
    width: var(--pfp-height);
    height: var(--pfp-height);
}

/* From Uiverse.io by barisdogansutcu */ 
button {
  padding: 1vw 2vw;
  border-radius: 50px;
  cursor: pointer;
  border: 1px solid;
  border-color: white;
  color: white;
  height: fit-content;
  background-color: rgb(0, 0, 0);
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  /* text-transform: uppercase; */
  font-size: 1.5vw;
  transition: all 0.5s ease;
  
}

button:hover {
  letter-spacing: 1px;
  background-color: hsl(261deg 80% 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}

button:active {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}

.icons > a > img{
  width: 4vw;
}



.main{
  display: flex;
  flex-direction: column;
  height: 100vh;

}

nav > ul {
  display: flex;
  position: absolute;
  top: 2vh;
  
}

nav > ul > li{
  
  list-style-type: none;
  color: white;
  
}

nav > ul > li > a{
  margin-right: 2vw;
  text-decoration: none;
  list-style-type: none;
  color: white;
  font-family: "Raleway";
  font-size: 1.2vw;
  
}

button > a{
  text-decoration: none;
  list-style-type: none;
  color: white;
  font-family: "Raleway";
}

@media (max-width: 768px) {



  .main{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}

  .bio{
    font-size: calc(var(--pfp-height)/3);
    margin-bottom: 50vw;
  }


  .header{
    justify-self: center;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -30vw;
    
}

#pfp{
  height: 70vw;
  width: 70vw;
  margin-bottom: 5vw;
}

button{
  padding: 2vw 4vw;
  border-radius: 50px;
  cursor: pointer;
  border: 1px solid;
  border-color: white;
  color: white;
  height: fit-content;
  background-color: rgb(0, 0, 0);
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  /* text-transform: uppercase; */
  font-size: 5vw;
  transition: all 0.5s ease;
}

.icons > a >img{
  width: 10vw;
  margin-left: 2vw;
}

nav > ul > li > a{
  margin-right: 2vw;
  text-decoration: none;
  list-style-type: none;
  color: white;
  font-family: "Raleway";
  font-size: 4vw;
  
}

}