:root{
  --main-theme-color: #009dff;
  --main-theme-color2: #009dff30;
  --spotify-color: #1ed760;
  --spotify-color2: #1ed76030;
  min-width: 500px;
}

body {
  background-color: #101010;
  user-select: none;
  scroll-behavior: smooth;
  font-family: "Winky Rough", sans-serif;
}

body > div {
  opacity: 0;
  transition: opacity 0.5s ease-out, box-shadow 1s ease;

}

div:hover {
  box-shadow: var(--main-theme-color) 0px 0px 10px;
  transition: box-shadow 0.5s ease;
}

div {
  box-shadow: none;
  transition: 
    box-shadow 1s ease;
}

.pfp {
  text-align: center;
  max-width: 50%;
  margin: 1%;
  border: var(--main-theme-color2) solid 1px;
  border-radius: 10px;
}

.pfp img {
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  max-height: 90%;
  max-width: 90%;
}

.pfp p {
  display: inline-block;
  text-align: center;

  margin-bottom: 10px;
  font-size: 16px;
  margin-top: 0px;
  padding: 10px;
  color: darkgrey;
  font-weight: 300;
}


.main, .spotify, .portfolio, .about_website {
  display: flex;
  font-family: "Winky Rough", sans-serif;
  font-size: 24px;
  color: azure;
  text-align: center;
  max-width: 75%;
  margin: 20px auto;
  padding: 20px;
  backdrop-filter: blur(5px);
  border: var(--main-theme-color) solid 2px;
  border-radius: 10px;
} 

.greetings {
  border-radius: 10px;
  margin: 1%;
}

.greetings h3 {
  font-size: 48px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 10px;
  text-transform: lowercase;
  display: inline-block;
  text-align: center;
}

.greetings p {
  max-width: 70%;
  display: inline-block;
  text-align: center;
  
}

.social-links {
  margin-top: 30px;
  list-style: none;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.social-links:hover {
  box-shadow: none;
}
.social-links a {
  border-bottom: #00000000 solid 2px;
  transition: all 0.3s ease;
}
.social-links a:hover {
  border-bottom: var(--main-theme-color) solid 2px;
  transition: all 0.3s ease;
}
.social-links img {
  width: 40px;
  height: 40px;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.social-links img:hover {
  filter: grayscale(0%);
  transition: all 0.3s ease;
}


.about_website {
  display: block;
  border: #fc5c61 solid 2px;
  border-radius: 10px;
}

.about_website p {
  font-size: 20px;
  margin: 5px;
}

.about_website span {
  font-size: 16px;
  color: darkgray;
}

.about_website h3 {
  margin: 0;
}

.about_website:hover {
  box-shadow: #fc5c61 0px 0px 10px;
  transition: box-shadow 0.5s ease;
}



@media screen and (max-width: 600px) {
  .main, .spotify, .portfolio, .about_website {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }
  .pfp {
    max-width: 85%;
  }
  .pfp p {
    font-size: 14px;
  }
  .greetings {
    max-width: 100%;
  }
  .greetings p {
    max-width: 90%;
    font-size: 18px;
  }
  .greetings h3 {
    max-width: 90%;
    font-size: 32px;
  }
  .social-links img {
    filter: grayscale(0%);
  }
  
}

@media screen and (max-width: 1400px) {
  .main, .spotify, .portfolio, .about_website {
    font-size: 20px;
    max-width: 85%;
  }
  .greetings p {
    max-width: 90%;
  }
}