/* General Styles */
body {
  
  --angle: 63deg;
  --gradient-thick: 1200px;
  --second-grain: 500px;
  font-family: 'Verdana', sans-serif;
  margin: 0;
  padding: 0;
  background: repeating-linear-gradient(var(--angle) in hsl, #695461, #322c42, 
        #334353, #4b392c, #2e5036, #554c32, #695461 var(--gradient-thick));
  background-size: calc(var(--gradient-thick)/sin(var(--angle))) 100%;
  animation: sh 50s infinite linear;
  /* animation:; */
  color: #000000;
  text-align: center;
  overflow-x: hidden;
  display: flex; /* Создаем гибкую структуру */
  flex-direction: column; /* Располагаем элементы вертикально */
  min-height: 100vh; /* Минимальная высота равна высоте вьюпорта */

}

/* Header */
header {
  --angle: 135deg;
  --gradient-thick: 1000px;
  --second-grain: 500px;
  background: repeating-linear-gradient(var(--angle) in hsl, 
  #ff6ec7, rgba(124, 77, 255, 00.3), #007bff, #ff6e0022, #28a745, #ffc10722, #ff6ec7 var(--gradient-thick)),
  repeating-linear-gradient(55deg in hsl, red, green ,blue, pink,orange, red var(--second-grain));
  background-size: calc(var(--gradient-thick)/sin(var(--angle))) 100%, 100% calc(var(--second-grain)/cos(55deg));

  animation: sh 60s  infinite ease-in-out;
  padding: 20px 0;
  /* background-repeat: ; */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

header h1 {
  font-size: 3rem;
  margin: 0;
  /* color: #fff; */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

/* Card Container */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  gap: 30px;
  padding: 30px;
  justify-items: stretch;
}

/* Card Styles */
.card {
  --angle: 135deg;
  --gradient-thick: 900px;
  --second-grain: 500px;
 
  /* flex-basis: 300px; */
  background: repeating-linear-gradient(var(--angle), #ff6ec7, #7c4dff, 
  #28a745, #ffc107 , #ff6ec7 var(--gradient-thick));
  background-size: calc(var(--gradient-thick)/sin(var(--angle))) 100%;
  animation: sh 30s infinite alternate;
  border-radius: 15px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  min-width: 300px;
  min-height: 300px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 1;
}
a{
  flex: 0 1 30%;

  color: #000;
  text-decoration: none;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.7);
}

/* Card Image */
.card img {
  
  width: 100%;
  height: auto;
  border-bottom: 3px solid rgba(0, 0, 0, 0.5);
}

/* Card Content */
.card-content {
  
  text-size-adjust: 80%;
  /* padding: 20px; */
}

.card-content h2 {
  font-size: 1.8rem;
  margin: 10px 0;
  /* color: #fff; */
}

/* Button */
/* .btn {
  display: inline-block;
  padding: 10px 20px;
  filter: brightness(300%) blur(3) ;*/
  /* color: #ff6ec7; */
/*  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease, color 0.3s ease;
} */

.btn:hover {
  background: #ff6ec7;
  color: #333;
}

/* Footer */    
footer {
  background: linear-gradient(70deg in hsl, #ff6f00a8, #ff6ec7, #ffc107, #007bff, #28a745, #7c4dff,#ff6f00a8);
  background-size: 600% 600%;
  animation: sh 8s infinite alternate;
  padding: 20px 0;
  /* color: #fff; */
  font: bold;
  font-size: 1rem;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
  margin-top: auto; /* Здесь вступает в действие магия Flexbox */
}

/* Gradient Animation */
@keyframes sh {
  0% { background-position: calc(var(--gradient-thick)/sin(var(--angle))) 0, 0 calc(var(--second-grain)/cos(55deg)); }

}