body {

    margin: 0;

    padding: 0;

    background-color: rgba(0, 0, 0, 0.893);

    color: rgba(240, 231, 231, 0.902);

    overflow-x: hidden;


}

.header {

    background-color: rgba(16, 16, 16, 0.884);

    width: 100%;

    height: 105px;

    background: linear-gradient(
        to bottom,
        rgba(16, 16, 16, 0.884),
        rgba(0, 0, 0, 0.893)
    );

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

    display: flex;

    flex-direction: row;
    
    align-items: center;

    justify-content: space-between;

    padding: 0 50px;

    box-sizing: border-box;


}

.HomePageHeader {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 32px;

   font-size: 17px;

}

.HomePageTitle {

    font-size: 50px;


}

.HomePageInformation {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin-top: 30px;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeInUp 1s ease-out forwards;

}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.HomePageInformation > h1 {

    font-size: 60px;

}

.HomePageInformation > span {

    font-size: 17px;

    color: rgba(202, 201, 201, 0.779);

}

.loginButton, .registerButton, .logoutButton, .myProfileButton{

    width: 100px;

    height: 40px;

    cursor: pointer;

    border-radius: 7px;

    font-size: 15px;

    background-color: #ffffff;

    color: #111;

    border: 2px solid #999;

    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15),
                0 4px 10px rgba(0, 0, 0, 0.4);

    transition: all 0.3s ease;

}

.myProfileButton {

    background-color: #222;

    color: #f1f1f1;

    border: 2px solid #555;

}



.loginButton:hover, .registerButton:hover, .logoutButton:hover, .myProfileButton:hover {

    background-color: #f2f2f2;

    border-color: #bbb;

    transform: translateY(-3px);

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.myProfileButton:hover {

    background-color: #333;

    border-color: #777;

    transform: translateY(-3px);

    box-shadow: 0 6px 14px rgba(0,0,0,0.6);

}

.HomePageClubs {

    display: flex;

    flex-direction: row;

    margin-top: 100px;

    margin-left: 35px;

    margin-right: 35px;

    justify-content: center;

    align-items: center;

    padding-bottom: 50px;

    gap: 30px;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeInUp 1s ease-out forwards; 

}

.HomePageClubCard {

    background-color: rgba(16, 16, 16, 0.957);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    width: 300px;

    height: min(330px, calc(100vh - 105px - 100px - 20px));

    overflow: auto;

    border-radius: 10px;

    overflow: hidden;

    padding-bottom: 50px;

    transition: all 0.3s ease;

}

.HomePageClubCard:hover {

    transform: translateY(-5px); 

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); 

    border-color: #fff; 

    background-color: rgba(30, 30, 30, 0.95); 

    cursor: pointer;

}


.homeImage {

    width: 100%;

    height: 70%;  

    object-fit: cover; 

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}

.HomePageClubCard span {

    text-align: center;

    padding: 10px 0;

    color: rgba(240, 231, 231, 0.902);

    font-weight: bold;

    font-size: 20px;

}

.HomePageButtons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    margin-top: 40px;

    animation: fadeInUp 1s ease-out forwards;

}

.navButton {

    width: 220px;

    height: 55px;

    font-size: 18px;

    font-weight: 600;

    border-radius: 10px;

    border: 2px solid #222;

    background-color: #0e0e0e;

    color: #f2f2f2;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7),
                0 4px 10px rgba(255, 255, 255, 0.05);

    cursor: pointer;

    transition: all 0.3s ease;

}

.navButton:hover {

    background-color: #1a1a1a;

    border-color: #333;

    transform: translateY(-3px);

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.8),
                0 6px 14px rgba(255, 255, 255, 0.08);
                
}


pre {

    display: none;

}