* {
    margin-top: 15px;
}

h1 { /*  */
    text-align: center;
    color: white;
    font-family:cursive;
}
h3{
    color: #ffffff;
    background: transparent;
    max-width: fit-content;
    border: 2px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(40px);
    border-radius: 10px;
    padding: 30px 40px;
    
    transform: translateY(-510px);
}
ul { /* removes bullet points */
    list-style-type: none;
    font-family: cursive;
}
/* links to their fav toys*/
#links-to-their-toys li a{
    
    text-decoration: none;
    color:#ffffff;

    display: flex;
    float: right;
    padding: 0px;
    margin: 0px;
    gap: 50px;
    cursor: pointer;

    
    
}

.link{
    text-align: center;
    background: linear-gradient(to right, #5f0168, #020a85);
    border: none;
    border-radius: 10px;

    transform: translateY(-510px);
    
    
}
.horizontal-list{
    display: flex;
    float: right;
    padding: 0px;
    margin: 0px;
    gap: 50px;
    cursor: pointer;
}
.horizontal-list li a {
  text-decoration: none; /* Removes underlines from links */
  color: white; 
 
}
.btn{
     /* Fallback background color for older browsers */
  background-color: #46026d; 
  
  /* The gradient effect */
  
  /* Other styling properties */
  border: none;
  color: white;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 1000px; /* Adjust border-radius as needed */
  position: relative;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn::after{
    content: '';
    position: absolute;
    height: 107%;
    width: 102%;
    border-radius: 1000px;
    background-image: linear-gradient(to bottom right, red, blue);
    z-index: -1;
}

.btn:hover{
    z-index: 0;
    box-shadow: 40px 0 100px red, 
    -40px 0 100px blue;
}
/* background image*/
body {
    margin: 0;
    padding: 0;
    background-image: url(image/wallpaperflare.com_wallpaper.jpg);
    background-position: bottom;
    background-attachment: fixed;
    background-size: cover;
}
#box-alignment{
    display: flex; /* Activates flexbox layout */
    justify-content: center; /* Centers items horizontally along the main axis */
    align-items: center; /* Centers items vertically along the cross axis */
    gap: 70px; /* Adds a 20px space between the boxes */
    height: 100vh; /* Makes the container take the full viewport height to center on the page */
    /* Add a border/background to the container to visualize the centering */
    border: none; 
    transform: translateX(420px);
}
#box-1{
    background: linear-gradient(to right, #5f0168, #020a85);
    color:white;
    padding: 15px;
    text-align: center;
    align-items: center;
    max-width: 500px;
    max-height: 550px;
    height: 100vh;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
}
#box-1::after, #box-1::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(red, orange, yellow, green, blue, purple,red);
    z-index: -1;
    padding: 3px;
    border-radius: 20px;
}
#box-1::before{
    filter: blur(1.5rem);

}

.milo-image{
    height: 200px;
    width: 200px;
}
/* box 2*/
#box-2{
    background: linear-gradient(to right, #020a85, #5f0168);
    color:white;
    padding: 15px;
    text-align: center;
    align-items: center;
    max-width: 500px;
    max-height: 550px;
    height: 100vh;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#box-2::after, #box-2::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(red, orange, yellow, green, blue, purple,red);
    z-index: -1;
    padding: 3px;
    border-radius: 20px;
}
#box-2::before{
    filter: blur(1.5rem);

}
.duke-image{
    height: 200px;
    width: 200px;
}