* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



html {

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-text-size-adjust: 100%;

    opacity:1 !important;
}


p{

    font-size:14px !important;
}


h1 {
  font-weight: 400;
  margin: 0; 
}


.main-container {
    display:flex;
    flex-direction :column;
    max-width : 900px;
    width:100%;
    align-items:start;
    margin : 150px auto auto auto; 
    animation: fadeIn 0.8s ease;
}
.main-first-column{
    display:flex;
    flex-direction:row;	



}
.div-image {

    min-width: 0;
    width: 100%;
    display: block;	
    flex:1;
}

.div-image img {
    height:auto;
    width: 100%;
    display: block;
    min-width: 0;
    border-radius:30%;
    border:black solid 2px;
}
.aboutme-description{
    flex:1.5;

}

.aboutme-description h1{
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    line-height:1.6;
    margin-bottom:10px;
    max-width:500px;
    color:black;

    font-size:40px;
    text-align:center;
    
}

.aboutme-description p{
    font-size:16px;
    line-height:3;
    padding-top:15px;
    max-width:488px;
    width:100%;
    margin-top : -10px;
    text-align:center;
}

 #id2{
  background-color: #f4f4f4;
  color: #AE13CD;
  padding: 0.5px 3px;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
  font-size: 90%;
}

#id1{
    color:green;
}
#id3{
    color:red;
}
#id4{
    color:white;
}


#id5{
    color:black;
}
#id6{
    color:yellow;
}
#id7{
    color:white;
}

p i {

    font-size:13px;
    margin-left:2px;

}



.collab-button {
    
    display:flex;
    justify-content:center;
    margin: 50px auto auto auto;

} 

.collab-button button  {

    font-size:20px;
    color:#403F48;
    background-color :#E3D9CA; 
    padding: 3px 20px;
    border: solid 1px grey;
    transition : background-color 0.3s , color 0.3s , box-shadow 0.3s;
    cursor:pointer;
}

.collab-button button:hover , .collab-button button:active {

    background-color :#1C2635;
    color: #E3D9CA; 
    box-shadow: 4px 4px 0px grey;
}


.aboutme-description a , .aboutme-description a:visited{

    color:#403F48;
    text-decoration:underline
}


.aboutme-description a:hover{

    color :grey;

}




@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@media (max-width:432px){

     .main-container , .top-navbar , .foot-bar{

	max-width:330px !important;

    }

    .main-first-column{
    
	flex-direction:column;
	margin:auto;
    }

    .top-navbar a{
    
	font-size:12px !important;
    }

    .top-navbar{
    
	height:27px;
    }

    .up-home .home {
    
	margin-left : -15px !important;
    }


    .home a {
	width:27px;
    }



    
    .aboutme-description{
    
	flex:3;

	border:none;


    }

    .aboutme-description h1{
    
	margin-top:20px !important;
	width:auto;
	font-size:26px;
	border-right:none;

	margin:auto;

    }


    .aboutme-description p{
    
	line-height:3;
	width:auto;
	flex:3;
	border:none;


    }


    


    .div-image img{
    
	height:250px;
	width:auto;
	margin:auto;

    }




    .links{
    
	gap:1px;
    }

    .up-home{
    
	flex:0.1 !important;
    } 
    .links {
    
	margin-left:-0px;
	flex:15 !important;
    }

    

    
    .main-container{
    
	margin-top: 80px !important;
    }


    .foot-bar{
    
	grid-template-columns:0.9fr 3fr 0.1fr !important;
    }

    .left-side{


    }
    .center-side{


	padding-left:7px;

    }
    .right-side{

	gap:0px;
    }
    .right-side a i {
    

    }


     .right-side a svg {
     }


}





@media (min-width:432px) and (max-width:534px){ 


     .main-container , .top-navbar , .foot-bar{

	max-width:430px !important;

    }









    .aboutme-description{
    
	flex:2.2 !important;



    }


    .aboutme-description p{
    
	width:auto;
	line-height:1.5;
	font-size:14px;

    }

    .aboutme-description h1{
	font-size:23px;
	width:auto;
    

    }

    .links{
    
	gap:1px;
    }

    .up-home{
    
	flex:0.1 !important;
    } 
    .links {
    
	margin-left:-3px;
	flex:15 !important;
    }

    



     .main-container{
    
	margin-top: 65px !important;
    }








}




@media (min-width:534px) and (max-width:640px){

    
    

    .main-container , .top-navbar , .foot-bar{

	max-width:600px !important;


    }

    .links{
	gap:5px;
    }



    .aboutme-description{
    
	flex:2 !important;



    }

    .aboutme-description h1 {
    
	width:auto;
    }

    
    .aboutme-description p {
    

	line-height:1.8;
    }



    .div-image img{
    
	border-radius:30%;

    }


    
    .main-container{
    
	margin-top: 80px !important;
    }



    
   
    
}


@media (min-width:640px) and (max-width:949px){

    .main-container , .top-navbar , .foot-bar{

	max-width:750px !important;

    }

}


@media (min-width:950px){


    .aboutme-description{
	
	margin-left:70px !important;
	margin-top:25px;
    }


}