body {
  margin: 0;
}

header {
  background-color: #780000;
  text-align: center;
  padding: 30px; 
}

h1 {
  color: #fdf0d5;
  font-size: 60px; 
  font-family: sans-serif;
  text-shadow: 0px 0px 5px yellow;
}

.navbar {
  background-color: #c1121f; 
}

.navbar a {
  color: #ffffff; 
  padding: 15px; 
  font-weight: 300;
}



p {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  text-align: center;
}

.subtitle {
  font-family: 'Roboto Slab', serif;
  font-size: 25px;
  font-weight: 300;
  text-align: center;
  background-color: #c1121f;
  color: #fdf0d5;
}

.container-xl {
  border: black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-top: 5px;
}

.my {
  font-family: 'Roboto Slab', serif;
  font-size: 20px; 
  color: white;
  margin: auto;
  width: 100%;
  border: 1px solid #780000; 
  padding: 5px; 
  text-align: center;
  background-color: #780000;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 100%; /* Set to 100% to utilize the flex container's width */
  height: 80%; /* Allow height to adjust based on content */
  text-align: left; /* Align text to the left */
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
  transition: transform 0.8s ease, box-shadow 0.8s ease; /* Add transition for smooth effects */
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card::after,
.card::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #ff0000, #ff0000, #ff0000, #ff0000, #ff0000); /* Solid red */
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.card::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin {
  from {
    --angle: 0deg; /* Start angle */
  }
  to {
    --angle: 360deg; /* Full rotation */
  }
}