*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: black;
    color: white;
}

hr{
    width: 50%;
    height: 3px;
    border: none;
    background: linear-gradient(to left, #0eafed, #fe399a);
}

html {
  scroll-behavior: smooth;
}

.nav_container{
    margin: 20px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.nav_container .nav_container1{
    width: 80vw;
}

.nav_container .nav_container2{
    width: 20vw;
}

.nav_container .nav_container1 img{
    background: white;
    height: 50px;
    width: 50px;
    padding: 10px;
    border-radius: 100px;
}

.nav_container .nav_container1 img:hover{
    box-shadow: 0 0 20px #0ff;
}

.nav_container .nav_container2{
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}

.nav_container .nav_container2 a, .contact_container1 a{
    text-decoration: none;
    font-weight: 500;
    margin: 10px;
}

.nav_container .nav_container2 a:hover, .contact_container1 a:hover{
    color: #fff;
    text-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}

.heroic{
    margin: 50px;
    padding: 20px;
    display: flex;
    gap: 80px;
    width: auto;
}

.heroic .heroic_container1{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 60vw;
}

.heroic .heroic_container1 h1{
    font-size: 3.8rem;
}

.heroic .heroic_container1 h1 span, .project span, .hackathon span, .about span, .contact span{
    background: linear-gradient(to left, #0eafed, #fe399a);
    -webkit-background-clip: text;  -webkit-text-fill-color: transparent;
}

.heroic .heroic_container1 p{
    font-style: italic;
}

.heroic .heroic_container1 a, .hackathon .hackathon_container1 a{
    text-decoration: none;
    width: 15vw;
    border-radius: 5px;
    padding: 14px;
    background: linear-gradient(to left, #0eafed, #fe399a);
    font-weight: 500;
}

.heroic .heroic_container1 a:hover,.hackathon .hackathon_container1 a:hover{
    background: #fe399a;
}

.heroic .heroic_container2{
    width: 40vw;
    display: flex;
    justify-content: center;
}

.heroic .heroic_container2 img{
    padding: 20px;
    height: 450px;
    width: 450px;
}

.project{
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 50px;
    padding: 20px;
    display: flex;
    gap: 40px;
    width: auto;
}

.project .project_container1 h1{
    font-size: 3rem;
    padding: 20px;
}

.project .project_container1 p, .hackathon .hackathon_container1 p, .hackathon_container2_sub1_2 p{
    font-style: italic;
}

.project .project_container2{
    display: flex;
}

.project_container_sub1, .project_container_sub2, .project_container_sub3{
    border-top: 2px solid #fff;
    border-bottom: 10px solid #0eafed;
    background-color: #252627;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    height: 300px;
    width: 300px;
    margin: 20px;
    padding: 20px;
}

.project .project_container2 .project_container_sub1 img, .project_container_sub2 img, .project_container_sub3 img{
    width: 50px;
    height: 50px;
    background-color: #fff;
    padding: 10px;
    border-radius: 100%;
}

.project_container_sub1 h2, .project_container_sub1 p, .project_container_sub2 h2, .project_container_sub2 p ,.project_container_sub3 h2,.project_container_sub3 p {
    text-align: left;
    background-color: #252627;
}

.hackathon{
    margin: 50px;
    padding: 20px;
    display: flex;
    gap: 80px;
    width: auto;
}

.hackathon .hackathon_container1{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}

.hackathon .hackathon_container1 h1{
    font-size: 3rem;
}

.hackathon .hackathon_container2{
    padding: 20px;
    margin: 20px;
    border-radius: 5px;
    background: radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}

.hackathon_container2_sub1, .hackathon_container2_sub2, .hackathon_container2_sub3{
    display: flex;
    gap: 10px;
    border-radius: 3px;
    margin: 10px;
    padding: 20px;
}

.hackathon_container2_sub1{
    display: flex;
    gap: 20px;
}

.hackathon_container2_sub1 .hackathon_container2_sub1_1 h3, .hackathon_container2_sub2 .hackathon_container2_sub1_1 h3, .hackathon_container2_sub3 .hackathon_container2_sub1_1 h3{
    background-color: #fff;
    padding: 15px;
    color: #252627;
    border-radius: 100%;
    font-weight: 900;
}

.hackathon_container2_sub1_2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hackathon_container2_sub1_2 a, .contact_container2_sub a{
    text-decoration: none;
    font-weight: 500;
}

.hackathon_container2_sub1_2 a:hover, .contact_container2_sub a:hover{
    color: #fff;
    text-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}

.about{
    margin: 50px;
    padding: 20px;
    display: flex;
    gap: 80px;
    width: auto;
}

.about .about_container1 h1{
    font-size: 5rem;
}

.about .about_container2{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about_container2_sub1{
    display: flex;
    gap: 30px;
}

.about_container2_sub2{
    display: flex;
    gap: 100px;
}

.about_container2_sub2 h1{
    font-size: 4rem;
}

.about_container2_sub2 p{
    font-size: 1.5rem;
}

.contact{
    margin: 50px;
    padding: 20px;
    display: flex;
    gap: 20vw;
    width: auto;
}

.contact h1{
    font-size: 3rem;
}

.contact_container1{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact_container1 img{
    width: 50px;
    height: 50px;
    background-color: #252627;
    padding: 10px;
    border-radius: 100%;
}

.contact_container1_sub1, .contact_container1_sub2{
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}

.contact_container2{
    display: flex;
    gap: 30px;
}

.contact_container2_sub{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

footer{
    padding: 20px;
    font-size: 1.5rem;
    text-align: center;
}

/* -----------------Responsive--------------- */

@media (max-width: 768px) {
.nav_container .nav_container1{
    width: 100vw;
}

.nav_container .nav_container2{
    width: 100vw;
}

.heroic{
    display: flex;
    flex-direction: column;
    margin: 10px;
}
.heroic .heroic_container1{
    width: 100%;
    gap: 40px;
}

.heroic .heroic_container1 h1{
    font-size: 3rem;
}

.heroic_container2 img{
    display: none;
}

.heroic .heroic_container1 a, .hackathon .hackathon_container1 a{
    width: 100%;
}

.project .project_container1{
    width: 100vw;
    padding: 10px;
}

.project .project_container1 h1,.hackathon .hackathon_container1 h1{
    font-size: 2.5rem;
    padding: 10px;
}

.project_container2{
    display: flex;
    flex-direction: column;
}

.hackathon{
    display: flex;
    flex-direction: column;
    width: 100vw;
    margin: 0px;
    gap: 10px;
}

.hackathon .hackathon_container1 a{
    text-align: left;
}

.hackathon_container1{
    text-align: center;
}

.hackathon_container1 h1{
    font-size: 2rem;
}

.hackathon_container2_sub1 .hackathon_container2_sub1_1, .hackathon_container2_sub2 .hackathon_container2_sub1_1, .hackathon_container2_sub3 .hackathon_container2_sub1_1{
    display: none;
}

.hackathon_container2_sub1, .hackathon_container2_sub2, .hackathon_container2_sub3{
    display: flex;
    flex-direction: column;
}

.about{
    display: flex;
    flex-direction: column;
    width: 100vw;
    margin: 0px;
    gap: 20px;
}

.about .about_container1 h1{
    font-size: 2rem;
}

.about_container2_sub1{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.about .about_container2 .about_container2_sub2{
    gap: 50px;
}

.about .about_container2 .about_container2_sub2 h1{
    font-size: 2rem;
}

.about .about_container2 .about_container2_sub2 p{
    font-size: 1rem;
}

.contact{
    flex-direction: column;
    width: 100vw;
    margin: 0px;
    padding-top: 50px;
}

.contact .contact_container1 h1{
    font-size: 2rem;
}

.contact .contact_container1 .contact_container1_sub1 a,.contact .contact_container1 .contact_container1_sub2 a{
    font-size: 1rem;
}

}