body {
    //width: 70%;
    //font-family: "Bebas Neue", sans-serif;
    font-family: Reddit Mono; // change font here
    //font-family: "Lato", sans-serif; // change font here
    margin: 0 auto; 
    background-color: #FFFFFF;
    color: #212121;
}

.background:before {
    //background-color: #ffffff;
    opacity: 0.1;
    background: radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#1200FF 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #1200FF 2px, #ffffff 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;

    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    //animation: moveBackground 180s linear infinite; /* change duration and timing as needed */
}

.backgroundGradient{
    background: radial-gradient(circle, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 90%);
}

.background {
    position: relative;
}

@keyframes moveBackground {
    from {
        background-position: 0% 0%; /* starting position */
    }
    to {
        background-position: 100% 0%; /* ending position */
    }
}
  
h1 {
    color: #1200FF;
    font-weight: 900;
    font-family: "Bebas Neue", sans-serif;
    font-size: 4rem;
}

h3 {
    color: #1200FF;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem;
}

h2 {
    color: #1200FF;
    font-weight: 500;
    font-family: "Bebas Neue", sans-serif;
    font-size: 3rem;
}

p1 {
    display: flex;
    //text-align: center;
    //position: relative;
    //max-width: 40%;
    width: 100%;
    //min-height: 100%;

}


.center {
    margin: auto;
    width: 80%;
    //border: 3px solid green;
    padding: 1rem;
}

.name {
    margin: auto;
    width: 80%;
    //border: 3px solid green;
    //padding: 1rem;
    //font-weight: 800;
    
    

}

.header {
    display: flex;
    background-color: #1200FF;
    text-align: center;
    justify-content: center; /* Center the text */
    gap: 2rem;

    padding: 2rem;
}

.icon {
    fill: #FFCC33;
    //fill: #FFBF00;
}

.cards {
    justify-content: center; /* Center the cards */

    display: flex;
    gap: 8px;
    padding: 20px 20px;
    min-width: 60%;
    flex-wrap: wrap; /* Allow cards to wrap onto new lines */
}

.card {
    background-color: #ffffff;
    height: 450px;
    width: 450px;
    border-radius: 10px;
    //cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.card img{
    width: 100%;
    height: auto;
}

.card-content{
    padding: 16px;
}

.card:hover {
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 400px) {
    .cards {
        justify-content: center; /* Center the cards */
    }

    .card {
        flex-basis: calc(100% - 16px); /* Set card width to 100% minus gap */
        margin: 8px; /* Adjust margin to create gap */
    }
}

.button {
    background-color: #1200FF;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    margin: auto;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 8px;
    font-family: Reddit Mono;

    padding: 1rem;
  }
  
  .button:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #1200FF;
  }