@import url("https://fonts.googleapis.com/css?family=Lato:300");

body {
  display: inline;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: auto;
  background: linear-gradient(315deg, rgba(26, 26, 38, 0.8) 3%, rgb(29, 41, 41) 38%, rgb(0, 153, 204) 68%, rgb(41, 0, 87) 98%);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
}

.gradient-border {
  --border-width: 5px;
  position: relative;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
  align-items: center;
  width: 90%;
  height: 110px;
  font-family: Lato, sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  background: #110328e2;
  border-radius: var(--border-width);

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 5s alternate infinite;
  }
  
}
.gradient-border:hover::after {
    animation-duration: 9s;
  }

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

.logo {
  display: inline-block;
  width: 85px;
  height: 85px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 50%;
}

.logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;

}


.profile-container {
  max-width: 300px;
  height: 30px;
  margin: 40px;
  padding: 2px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 15px;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 15px;
  background-clip: padding-box;
  border-image: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)) 1;
  border-image-slice: 1;
  transition: box-shadow 0.3s ease-in-out;
}

@keyframes multicolorGlow {
  0% {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  }
  25% {
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  }
  75% {
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  }
}

.profile-container:hover {
  animation: multicolorGlow 1s infinite;
}

.profile-name {
  color: rgb(255, 255, 255); /* White text color */
  font-size: 18px; /* Adjust the font size as needed */
  margin: 0;
}



#testbutton1 {
    width: 150px;
    height:50px;
    border-radius:180px;
    position:relative;
    
    top:calc(25% - 25px);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    cursor:pointer;
    line-height:12px;
  }
  
  #testbutton1:before {
    content:'';
    z-index:1;
    position:absolute;
    display:block;
    width:80%;
    height:70%;
    top:15%;
    left:10%;
    transition: 0.3s opacity ease-in-out;
    filter:blur(15px);
    opacity:0;
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  }
  
  #testbutton1:hover:before {
    opacity:1;
    transition: 0.3s opacity ease-in-out;
    filter:blur(25px);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);  
  }
  
  #testbutton1:after {
    content:'♡ special';
    text-align:center;
    line-height:40px;
    font-size:18px;
    color:rgba(235,235,235,1);
    font-weight:bold;
    z-index:5;
    position:absolute;
    display:block;
    border-radius:180px;
    width:97%;
    height:91%;
    top:5%;
    left:1.5%;  
    background-color:rgb(19, 20, 22);
  }
  #testbutton2 {
    width: 150px;
    height:50px;
    border-radius:180px;
    position:relative;
   
    top:calc(25% - 25px);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    cursor:pointer;
    line-height:12px;
  }
  
  #testbutton2:before {
    content:'';
    z-index:1;
    position:absolute;
    display:block;
    width:80%;
    height:70%;
    top:15%;
    left:10%;
    transition: 0.3s opacity ease-in-out;
    filter:blur(15px);
    opacity:0;
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  }
  
  #testbutton2:hover:before {
    opacity:1;
    transition: 0.3s opacity ease-in-out;
    filter:blur(25px);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);  
  }
  
  #testbutton2:after {
    content:'OLD is gold';
    text-align:center;
    line-height:40px;
    font-size:18px;
    color:rgba(235,235,235,1);
    font-weight:bold;
    z-index:5;
    position:absolute;
    display:block;
    border-radius:180px;
    width:97%;
    height:91%;
    top:5%;
    left:1.5%; 
    background-color:rgb(19, 20, 22);
  }
  #testbutton3 {
    width: 150px;
    height:50px;
    border-radius:180px;
    position:relative;
 
    top:calc(25% - 25px);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    cursor:pointer;
    line-height:12px;
  }
  
  #testbutton3:before {
    content:'';
    z-index:1;
    position:absolute;
    display:block;
    width:80%;
    height:70%;
    top:15%;
    left:10%;
    transition: 0.3s opacity ease-in-out;
    filter:blur(15px);
    opacity:0;
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  }
  
  #testbutton3:hover:before {
    opacity:1;
    transition: 0.3s opacity ease-in-out;
    filter:blur(25px);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);  
  }
  
  #testbutton3:after {
    content:'Memories';
    text-align:center;
    line-height:40px;
    font-size:18px;
    color:rgba(235,235,235,1);
    font-weight:bold;
    z-index:5;
    position:absolute;
    display:block;
    border-radius:180px;
    width:97%;
    height:91%;
    top:5%;
    left:1.5%; 
    background-color:rgb(19, 20, 22);
  }
#recent1 {
    width: 95%;
    height: 500px;
    margin: 2%;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.2);
    transition: transform 0.4s ease, background 0.3s ease; /* Smooth transition for transform and background color */
    transform-style: preserve-3d; /* Ensures that child elements are rendered in a 3D space */
    overflow: hidden; /* Hide any content overflow */
    position: relative; /* Positioning context for absolute positioning of images */
}
#recent5 {
  width: 95%;
  height: 300px;
  margin: 2%;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.2);
  transition: transform 0.4s ease, background 0.3s ease; /* Smooth transition for transform and background color */
  transform-style: preserve-3d; /* Ensures that child elements are rendered in a 3D space */
  overflow: hidden; /* Hide any content overflow */
  position: relative; /* Positioning context for absolute positioning of images */
}

#repic {
    position: absolute;
    margin: 2%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.img-container {
    width: 20%; /* Adjust the width of each container as needed */
    position: relative;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain 1:1 aspect ratio and fill the container */
    border-radius: 15px; /* Rounded corners for images */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 
                0 0 20px rgba(255, 255, 255, 0.3), 
                0 0 30px rgba(255, 255, 255, 0.2), 
                0 0 40px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
}

.img-text {
  font-size: 2em;
  font-weight: bold;
  font-family: Helvetica;
  color: rgb(183, 182, 182);
  display: inline-block;
  position: relative;
  text-shadow: 
    0 0.5px 2px rgba(255, 255, 255, 0.393), 
    0 0 1px rgba(255, 255, 255, 0.285), 
    0 0 30px rgba(255, 255, 255, 0.6), 
    0 1px 1px rgba(255, 255, 255, 0.4);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.377); 
  

  backdrop-filter: blur(11px); 
}








.img-container:hover img {
    transform: scale(1.1); /* Enlarge the image on hover */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                0 0 40px rgba(255, 255, 255, 0.6), 
                0 0 60px rgba(255, 255, 255, 0.4), 
                0 0 80px rgba(255, 255, 255, 0.2);
}