@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --g:#afff6b;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;


}

html{
        scroll-behavior: smooth;
}

body{
    font-family: 'Courier New', monospace;
    background-color: black;
    color: white;
 
    /* padding-left: 100px;
    padding-right: 100px; */
}

nav{
    position:fixed;
    width: 100%;
    height: 40px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    #club-logo {
        display: flex;
        align-items: center;
        img{
            height: 50px;
            width: 80px;
            padding: 2px;
            margin: 15px;
        }
    }
    
    .menus {
        display: flex;
        justify-content: space-between;
        list-style-type: none;
        padding: 50px;
    
        a{
            cursor: pointer;
            margin-left: 20px;
            text-decoration: none;
            color: white;
            
        }

        .a:hover {
            border-bottom: 2px solid white;
        }
    
    }

}

.main{
    /* background-image: url('assets/background 1.jpg'); */
    padding: 40px;
    overflow: hidden;
    /* background-image: url('assets/background 1.jpg'); */
    .scroll{
        margin-top: 50px;
        width: 200vw;
        display: flex;
        transition: transform 0.5s;
        transform: translateX(0);
        .join-container{
            width: 100vw;
            height: 500px;
            display: flex;
            align-items: center;

            .join-section{
                width: 50%;
                text-align: center;
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                text-shadow:1px 0px 15px rgb(0,0,0,0.5);   
                h2{
                    font-size: 80px;
                }
                .join-p{
                    font-size: 30px;
                    letter-spacing: 1px;
                }
                .join-button{
                    width: 200px;
                    height: 50px;
                    background-color: var(--g);
                    font-weight: bold;
                    border-radius: 10px;
                    margin-left: 220px;
                    margin-top: 40px;
                    font-size: 20px;
                    cursor: pointer;
                    border: none;
                    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.4);  

                }
                .join-button:hover{
                    background-color:#ddf3bd ;
                }
            }


        }
        .check-container{
            width: 100vw;
            height: 500px;
            display: flex;
            align-items: center;
            flex-direction:column ;
            justify-content: space-evenly;
            color: black;

            .pop{
            width: 400px;
            background-color: var(--g);
            border-radius: 10px;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 8px 14px 0 rgba(0,0,0,0.4);  

            .id-no{
                font-size: 20px;
            }
            .alert{
                margin: 5px;
                color:red;
            }
            .id-card{
                display: flex;
                gap:5px;
                #input-field{
                    width: 200px;
                    height: 50px;
                    padding: 10px;
                    border-radius:20px;
                    border :none;

                }
                #id-button{
                    width:50px;
                    height: 50px;
                    background-color: white;
                    border :none;
                    border-radius: 50%;

                }
            }
        }
        }
    }
}

.hide{
    display: none;
}

.topics{
    height: 10px;
    display: flex;
    background-color: var(--g);
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
    opacity: 70%;

}

.card-container{
    padding: 80px 40px 80px 40px;
    display: flex;
    color: black;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: space-evenly;
    .card{
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 200px;
        background-color: white;
        border: 3px solid var(--g);
        box-shadow: 0 8px 14px 0 rgba(255,255,255,0.4);
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: transform 0.5s;
        h4{
            font-size: 22px;
            font-weight: bold;
            text-shadow:1px 0px 15px rgb(0,0,0,0.2);        }

        .green{
            width: 70px;
            height: 70px;
            padding: 5px;
            margin: 10px;
            border-radius: 50%;
            background-color: var(--g);
        }
        p{
            font-size: 15px;
        }

      
}
.card:hover{
    transform: scale(1.13);
}
}


.contact{
    width: 40vw;
    height: 200px;
    border: 2px solid var(--g);
    margin: 0 auto;
    background-color: black;
    padding: 30px;
    border-radius: 10px;
    margin-top: 100px;
    text-align: center;
    span{
        color: var(--g);
    }
    h4{
        margin: 15px;
        margin-left: 0;
        font-weight: bold;
        text-shadow:1px 0px 15px rgb(0,0,0,0.2);
}

}

#copy{
    padding: 20px;
    text-align: center;
    margin-top: 50px;
}

@media (width<500px){
    .main{
        height:300px;
        padding: 0;
        padding-top: 80px;
        padding-bottom: 80px;
        .scroll{
            height: 300px;
            padding: 0;
            .join-container{
                height: 100%;
                align-items: flex-start;
                flex-direction: column;
                justify-content: center;
                .join-section{
                    width: 100%;
                    h2{
                        font-size: 40px;
                        margin: 10px;
                    }
                    .join-p{
                        font-size: 20px;
                    }
                    .join-button{
                        margin:0 auto;
                        margin-top: 20px;
                        margin-bottom:40px
                    }
                }
            }
            .check-container{
                .pop{
                    width:300px;
                }

            }
        }
    }
        .card-container{
        flex-direction: column;
        gap: 18px;
        padding: 0;
        align-items: center;
    }

    .contact{
        width: 80vw;
    }
}

@media (width<360px){
    .main{
        height:300px;
        padding: 0;
        padding-top: 40px;
        padding-bottom: 40px;
        .scroll{
            height: 300px;
            padding: 0;
            .join-container{
                height: 100%;
                align-items: flex-start;
                flex-direction: column;
                justify-content: center;
                .join-section{
                    width: 100%;
                    h2{
                        font-size: 30px;
                        margin: 10px;
                    }
                    .join-p{
                        font-size: 16px;
                    }
                    .join-button{
                        margin:0 auto;
                        margin-top: 20px;
                        margin-bottom:40px
                    }
                }
            }

            .check-container{
                .pop{
                    width:300px;
                }

            }
        }
    }

        .card-container{
        flex-direction: column;
        gap: 18px;
        padding: 0;
        align-items: center;
    }


    .contact{
        width: 80vw;
    }

}

@media (width<1000px){
    .main{
        height:300px;
        padding: 0;
        padding-top: 80px;
        padding-bottom: 80px;
        .scroll{
            height: 300px;
            padding: 0;
            .join-container{
                height: 100%;
                align-items: flex-start;
                flex-direction: column;
                justify-content: center;
                .join-section{
                    width: 100%;
                    h2{
                        font-size: 40px;
                        margin: 10px;
                    }
                    .join-p{
                        font-size: 20px;
                    }
                    .join-button{
                        margin:0 auto;
                        margin-top: 20px;
                        margin-bottom:40px
                    }
                }
            }
            .check-container{
                .pop{
                    width:300px;
                }

            }
        }
    }
    .card-container{
    gap: 18px;
    align-items: center;
    }

    .contact{
        width: 80vw;
    }
}

#footer {
  background-color: #111;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  font-family: 'Segoe UI', sans-serif;
}

/* Menu Links */
.footer-menus {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.footer-menus a {
  text-decoration: none;
  color: #ccc;
  transition: color 0.3s, border-bottom 0.3s;
  font-weight: 500;
}

.footer-menus a:hover {
  color: #d4ff00;
  border-bottom: 1px solid #d4ff00;
}

/* Contact Name */
.footer-name {
  font-size: 1rem;
  margin: 10px 0 20px;
}

/* Discord Section */
.footer-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: #ccc;
}

/* Discord Icon Circle */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--g);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.icon-circle img {
  width: 20px;
  height: 20px;
}

.icon-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px #d4ff00;
}

/* Copy Text */
.footer-copy {
  font-size: 0.85rem;
  color: #888;
  margin-top: 10px;
}

body::-webkit-scrollbar{
    display : none;
}