body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #283048, #859398);
    color: #333;
}

header {
    background-color: #0044CC;
    color: white;
    padding: 1em;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    padding: 0.5em;
    font-size: 2em;
    animation: slideInFromTop 1s ease-in-out;
}

@keyframes slideInFromTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

main {
    padding: 2em;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 2em auto;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.button-container {
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.service {
    margin-bottom: 2em;
    flex: 1 1 200px;
    margin: 1em;
}

.button {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.5em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button:hover {
    transform: scale(1.05);
}

.button:focus, .button:active {
    outline: none;
}

.button-jellyfin {
    background: linear-gradient(135deg, #31A2AC, #764BA2);
    color: white;
}

.button-jellyfin:hover {
    background: linear-gradient(135deg, #2C8D96, #6A4391);
}

.button-jellyseerr {
    background: linear-gradient(135deg, #764BA2, #31A2AC);
    color: white;
}

.button-jellyseerr:hover {
    background: linear-gradient(135deg, #6A4391, #2C8D96);
}

.button-minecraft {
    background: linear-gradient(to bottom, #34A853, #8B4513);
    color: white;
}

.button-minecraft:hover {
    background: linear-gradient(to bottom, #2E8B57, #A0522D);
}

.button-nintendo {
    background-color: #e70819;
    color: white;
}

.button-nintendo:hover {
    background-color: #c60616;
}

.button-photos {
    background-color: #9C27B0;
    color: white;
}

.button-photos:hover {
    background-color: #8E24AA;
}

.button-cloud {
    background: linear-gradient(135deg, #1E90FF, #FF6347, #FFD700);
    color: white;
}

.button-cloud:hover {
    background: linear-gradient(135deg, #1C86EE, #FF4500, #FFC125);
}

/* Tandoor button */
.button-tandoor {
    background: linear-gradient(135deg, #ddbf86, #bfa463); /* slightly darker second color for contrast */
    color: #333; /* dark text for readability */
}

.button-tandoor:hover {
    background: linear-gradient(135deg, #c8a05f, #aa8e4b); /* darker gradient on hover */
}

.service p {
    margin-top: 0.5em;
    color: #555;
}

footer {
    padding: 2em;
    text-align: center;
    background-color: #f0f0f0;
    color: #333;
    margin: 2em auto;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1.5s ease-in;
}

footer h2 {
    margin-bottom: 1em;
    color: #333;
}

.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    align-items: center;
    margin: 0.5em;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 5px;
    color: white;
    transition: transform 0.3s;
}

.social-link i {
    margin-right: 0.5em;
}

.social-link:hover {
    transform: scale(1.05);
}

.social-link-facebook { background-color: #1877F2; }
.social-link-facebook:hover { background-color: #155DB2; }

.social-link-twitter { background-color: #1DA1F2; }
.social-link-twitter:hover { background-color: #1A91DA; }

.social-link-instagram { background: linear-gradient(45deg, #833AB4, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80); color: white; }
.social-link-instagram:hover { background: linear-gradient(45deg, #6D207B, #E60000, #D64524, #E7690C, #E79E2A, #EBC86F); }

.social-link-linkedin { background-color: #0077B5; }
.social-link-linkedin:hover { background-color: #005C8A; }

.social-link-github { background-color: #333; }
.social-link-github:hover { background-color: #24292E; }

.social-link-discord { background-color: #5865F2; }
.social-link-discord:hover { background-color: #4853C8; }

@media (max-width: 600px) {
    main, footer {
        margin: 1em;
        padding: 1em;
    }
    .button-container {
        flex-direction: column;
    }
}