.main-message{
    
    margin-top:-15px;
    margin-bottom:60px;
    font-family:"Press Start 2P", system-ui;
    color:black;
    margin-right:auto;
    margin-left:auto;
    text-align:center;

}

.contact {
    
    max-width:900px;
    width:100% !important;
    display:flex;
    height:380px;
}

.contact-links{
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content:space-evenly;
    border-right : 2px solid grey;
}
.contact-form{
    display:flex;
    flex:1;
    flex-direction:column;
}
.contact-row{
    
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}




#ln1{

    font-size:20px;
    opacity:0.7;
    transition: opacity 0.2s;
    text-decoration:none;

}



#ln1:hover{
    opacity:1;
}

.contact-row a{

    color:#403F48;

}



.contact-row a:visited {
    
    text-decoration:none;
    color:#403F48;


}


.ln-div1 a{
    
    
    cursor: url('cursor/github-cursor.svg'), pointer;

}


.ln-div2 a{
    
    
    cursor: url('cursor/linkedin-svgrepo-com-cursor.svg'), pointer;

}
.ln-div3 a{
    
    
    cursor: url('cursor/whatsapp.svg'), pointer;

}
.ln-div4 a{
    
    
    cursor: url('cursor/telegram-cursor.svg'), pointer;

}
.ln-div5 a{
    
    
    cursor: url('cursor/email-cursor.svg'), pointer;

}
.ln-div6 a{
    
    
    cursor: url('cursor/link.svg'), pointer;

}


.contact-form h3{
    padding:5px 0px 12px 10px;
}

form{

    margin-top:10px;
    padding-left:20px;

}



form div input {
    
    max-width:400px;
    width:100%;
    margin-top:4px;
    margin-bottom:22px;
    padding:7px;
    border:none;
    border-radius:5px;
    border: solid 2px grey;
    box-shadow: 4px 4px 0px grey;
    transition :  box-shadow 0.3s;

}

form div input:focus{
    box-shadow: 8px 8px 0px grey;
    outline:none;
}

form div input:hover{
    box-shadow: 8px 8px 0px grey;
    outline:none;
}

textarea {
    
    max-width:400px;
    width:100%;
    margin-top:4px;
    padding:7px;
    border:none;
    border-radius:5px;
    height:100px;
    resize:none;
    box-shadow: 5px 5px 0px grey;
    transition :  box-shadow 0.3s;
    border: solid 2px grey;

}

textarea::placeholder{

    font-size:13px;
}

    
textarea:focus{

    outline:none;
    box-shadow: 8px 8px 0px grey;

}
textarea:hover{

    outline:none;
    box-shadow: 8px 8px 0px grey;

}

.textarea-div{


    position:relative;

}

.button-div 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;
    font-family: 'JetBrains Mono', monospace;

}

.button-div button:hover  {

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

.button-div{
    position: absolute;
    top:115%;
    left:37%;
    z-index:100;
}


@media (max-width:432px){

    .main-message{
    
	margin-bottom:20px;
	margin-top:1px;
    }

    .contact{
    
	flex-direction:column;
	margin-top:30px;
	margin-bottom:280px;
    }


    .contact-links{
    
	border:none;
	border-bottom:2px solid grey;
    }

    .contact-row{
    
	margin-bottom:80px;
    }

    .cr3{
    
	margin-bottom:50px;
    }

    form{

	padding-left:8px !important;
	margin-top:20px;
    }


    form div input , form textarea{
    
	max-width:300px;
	width:100%;
    }

    .button-div{
	top:115%;
	left:34%;
    }


    .contact-form h3{
    
	padding: 24px 0px 10px 5px;
    }
}