@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

*
{
  font-family: "Fjalla One", sans-serif;
  padding: 0;
  margin: 0;

}

a
{
    color: white;
    text-decoration: none;
}

body
{
    background-image: linear-gradient(to right, #0a0a2a , #000000);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container
{
    background-image: 
    
    linear-gradient(to right , #0a0a2a9f 30% , #0000009d ),
    url(about.webp) 
    
    ;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    width: 90%;
    height: 640px;
}

.container:hover
{
    background-image: 
    
    linear-gradient(to bottom , #0a0a2a9f 50% , transparent),
    url(about.webp) 
    
    ;
}


header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.logo
{
    font-size: 30px;
    text-transform: uppercase;
}

ul
{
    width: 60%;
    list-style: none;
    display: flex;
    justify-content: space-evenly;
}

ul a
{
    border-bottom: 2px solid transparent;
}

header ul a:hover
{
    border-bottom-color : white;
}


.content
{
    color: white;
    width: 50%;
    margin-top: 16px;
    padding : 30px;
}


.content h2
{
    font-size : 100px;
    text-transform: uppercase;
}

.content p
{
    letter-spacing: 2px;
    width : 350px;
    padding: 20px 0px;
}

.content button
{
    font-size: 30px;
     padding: 6px 10px;
     border-radius: 10px;
     border: 2px solid transparent;

}

.content button:hover
{
    background-color: transparent;
    cursor:pointer;
    color: white;
    
}


.content #Whatsaap:hover
{
    border-color: rgba(0, 128, 0, 0.64);
    box-shadow: 0px 0px 20px rgba(0, 128, 0, 0.64)  ;

}

.content #Facebook:hover
{
    border-color: rgb(18, 18, 252);
    box-shadow: 0px 0px 20px rgb(18, 18, 252)  ;

}

.content #Instagram:hover
{
    border-color: rgb(140, 82, 239);
    box-shadow: 0px 0px 20px rgb(140, 82, 239)  ;

}

.content #CodeForces:hover
{
    border-color: whitesmoke;
    box-shadow: 0px 0px 20px whitesmoke  ;

}

.content #LinkedIn:hover
{
    border-color: rgb(83, 154, 226);
    box-shadow: 0px 0px 20px rgb(83, 154, 226)  ;

}


.content #Youtube:hover
{
    border-color: red;
    box-shadow: 0px 0px 20px red  ;
}

.content #contact
{

    display: flex;
    align-items:left;
    gap: 20px;
}

.content ul li
{
    padding-top: 10px;
}


.content #dis
{
    letter-spacing: 2px;
    width : 350px;
    padding: 20px 0px;
}


.content #goals
{
 
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    align-items:left;


}


.content #maingoals
{
    text-decoration:underline whitesmoke ;
}


#goals
{
    list-style-position: inside;
    width: 89%;
    display: flex;
}

#goals li
{
        width: fit-content;
        margin-top: 10px;
        transition: 0.8s 0.2s ease-in-out;
}

#goals li:hover{

        width: fit-content;
        background-color: #000000;

}

.contact
{
    background-color: #000000;

}


.contact a {
    text-decoration: none !important; 
    color: white;         

}



@media (max-width:600px)
{
    .content h2
    {
        font-size: 50px;
    }


    .content #contact
{

    flex-direction: column;
    justify-content: center;
    align-items:center;
    gap: 20px;
    padding-left: 120px;
}
}