/* =========================
1. General body & layout
========================= */

/* Body styling with background image and center alignment */
body {
   background-image: url('../images/zuyd3.png');
   background-size: cover;
   background-position: center;
   margin: 0;
   padding: 0;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-color: white;
}

/* Container for main content, centered both vertically and horizontally */
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

/* =========================
2. Typography
========================= */

/* Main heading */
.text1 {
    font-weight: bold;
    font-size: 50px;
    margin: 20px;
    color: #E30E28;
}

/* Names under the title */
.namen {
    font-size: 15px;
    color: rgb(221, 221, 221);
}

/* =========================
3. Lines & animations
========================= */

/* Red line with fade-in and width animation */
.line1 {
    background-color: #E30E28;
    width: 90%;
    height: 5px;
    border-radius: 20px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.469);
    animation: lineEnter 0.8s ease-out;
}

/* Width animation keyframes */
@keyframes lineEnter {
    0% { width: 0%; opacity: 0; }
    100% { width: 90%; opacity: 1; }
}

/* =========================
4. Big buttons
========================= */

/* Container for buttons */
.bigButtons {
    display: block;
    padding: 20px;
}

/* Styling for each button */
.bigButtons a {
    display: inline-block;
    width: 250px;
    margin: 20px;
    padding: 30px;
    border-radius: 20px;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    background-color: #E30E28;
    color: white;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.469);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

/* Hover effect */
.bigButtons a:hover {
    transform: translateY(-10px);
    box-shadow: 0px 5px 12px rgba(0,0,0,0.25);
}

/* Click effect */
.bigButtons a:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
}

/* =========================
5. Responsive Styling
========================= */

/* Very large screens */
@media (min-width: 1400px) {
    .text1 { font-size: 60px; margin: 30px; }
    .bigButtons a { width: 300px; padding: 35px; font-size: 24px; margin: 25px; }
    .line1 { height: 6px; }
}

/* Tablets and smaller desktops */
@media (max-width: 768px) {
    .text1 { font-size: 40px; }
    .container { padding: 5px; }
    .bigButtons { padding: 10px; }
    .bigButtons a { width: 220px; padding: 25px; font-size: 18px; margin: 15px; }
}

/* Mobile phones */
@media (max-width: 480px) {
    .text1 { font-size: 32px; margin: 15px; }
    .bigButtons { padding: 5px; }
    .bigButtons a { width: 200px; padding: 20px; font-size: 18px; margin: 10px; }
    .namen { font-size: 14px; }
    .line1 { height: 4px; }
}

/* Small screen heights */
@media (max-height: 700px) {
    body { justify-content: center; padding: 0; }
    .text1 { font-size: 36px; margin: 10px; }
    .bigButtons a { padding: 20px; margin: 10px; }
    .line1 { height: 3px; }
}

/* Mobile landscape mode */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .text1 { font-size: 30px; margin: 10px; }
    .bigButtons { padding: 5px; display: flex; flex-wrap: wrap; justify-content: center; }
    .bigButtons a { width: 200px; padding: 15px; font-size: 16px; margin: 5px; }
    .namen { font-size: 12px; }
    .line1 { height: 3px; width: 80%; }
}

/* Extra small devices */
@media (max-width: 360px) {
    .text1 { font-size: 28px; margin: 10px; }
    .bigButtons a { width: 180px; padding: 15px; margin: 8px; font-size: 16px; }
}