* {
    font-family: monospace;
}

a {
    color: white;
}

p {
  margin-top: 4px;
  margin-bottom: 0;
}

i {
  color: rgb(244, 228, 6)
}

h2, h3, h4 {
  margin: 0;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.4rem;
}

body {
    background: black;
    margin: 0;
}

img {
    max-width: 80%;
}

.wrapper {
    min-height: 100vh;
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
    display: flex;
    justify-content: center;
    
    /*background-size: 300% 300%;
    background-image: linear-gradient(-45deg, rgb(11, 0, 60) 0%, rgb(5, 0, 23) 25%, rgb(32, 0, 0) 51%, #000a60 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
            animation: AnimateBG 20s ease infinite;*/

    background:
        radial-gradient(circle at 20% 20%, #01161e, transparent 40%),
        radial-gradient(circle at 80% 30%, #598392, transparent 40%),
        radial-gradient(circle at 50% 80%, #000000, transparent 40%);
    background-size: 200% 200%;
    animation: aurora 30s ease-in-out infinite;
}

.site-content {
  max-width: min(600px, 90vw);
  gap: 40px;
  padding: 20px;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 20px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100vw;
    position: sticky;
    padding-bottom: 40px;
    max-width: 600px;
    padding-top: 40vh;
    padding-bottom: 20vh;
}

.main-content {
  width: 100vw;
  max-width: 600px;
}

.container {
  color: white;
  border-radius: 4px;
  padding: 8px;
  width: 100vw;
  max-width: 100%;
}

.container#projects {
  opacity: 0;
}

.post-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.container-post {
  border: solid 1px white;
  padding: 10px;
  border-radius: 8px;
  margin-top: 20px;
}

.container-post p {
  max-width: 500px;
  margin: 20px 0 20px 0;
}

.container-post h4 {
  margin: 0 0 8px 0;
}

.container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: solid 1px rgba(255,255,255,0.2);
}

.container-header img {
  width: 100px;
  height: 100px
}

.container-header .tagline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.container-header .tagline .taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 4px;
}

.container-header .tagline .taglist span {
  background-image: linear-gradient(45deg, rgba(66, 60, 90, 0.4), rgba(66, 60, 90, 0.4));
  padding: 4px;
  border-radius: 4px;
  border: solid 1px #01161e;
  white-space: nowrap;
}

.container .container-post.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.container .container-post.grid .single-tech img {
  height: 60px;
  object-fit: contain;
  max-width: 200px;
}

.container .container-post.grid a:hover {
  background: none;
}

#about-me p {
  margin: 0 0 10px 0;
  max-width: 400px;
}

#about-me h3 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
}

#about-me h4 {
  font-size: 1.2rem;
}

.about-me-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  width: 100%;
}

.me-header {
  padding-bottom: 40px;
}

.about-me-content.text {
  flex-direction: column;
}

#about-me .container-post {
  position: relative;
}

#about-me .category {
  margin-bottom: 20px;
}

#about-me .category p {
  margin-left: 20px;
}

#about-me .container-post img {
  width: 150px;
  height: 150px;
  margin-top: 4px;
  margin-right: 4px;
  border-radius: 100%;
  mix-blend-mode: luminosity;
  object-fit: cover;
  float: right;
}


.menu {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    row-gap: 10px;
}

.menu a {
  text-decoration: none;
}

a {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0,0,0,0.8) 50%);
  background-size: 200%;
  background-position: 0 0;
  transition: .3s ease-in-out;
}

a:hover {
  color: rgb(244, 228, 6);
  background-position: -100% 0;
}

.bg-white {
  background: white;
  padding: 1px;
  border-radius: 4px;
}

.bg-white.round {
  border-radius: 100%;
}

.footer {
  padding: 10px 0 40px 0;
}

  
  @-webkit-keyframes AnimateBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes AnimateBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

    body {
      min-height: 100vh;
      margin: 0;
      background: #01161e;
    }
  
    @keyframes aurora {
      0% {
        background-position: 0% 0%, 100% 0%, 50% 100%;
      }
  
      50% {
        background-position: 100% 100%, 0% 50%, 50% 0%;
      }
  
      100% {
        background-position: 0% 0%, 100% 0%, 50% 100%;
      }
    }