@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto:ital@0;1&display=swap');
body{
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background: rgb(20, 20, 37);
 font-family: Arial, Helvetica, sans-serif;
}
/* root styling */
:root{
    --light:#f8f9fa;
    --secondary:#adb5bd;
    --dark:#343a40;
    --primary-color:rgb(179, 38, 62);
    --secondary-color:#2ec4b6;
    --border:#e9ecef;
}

.box-shadow{
    box-shadow: rgba(63, 82, 252, 0.336) 0px 8px 15px ;
}
#about{
    margin-top: 50px;
    color: rgb(214, 214, 214);
}
.about-info{
    color: #fcfdff;
    font-size: 170%;
    justify-content: center;
    margin-left: 5%;
}
#skills{
    margin-top: 20%;
}
.skill{
    justify-content: center;
    padding-top: 5%;
    margin-top: 1%;
   
}
.myskill{
    margin-right: 1%;
}
.projHeadSkills{
    color: rgb(202, 202, 202);
    margin-top: 10%;
    justify-content: center;
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 50px;
    margin-top: auto;
    margin-bottom: 10%;

}

  /* Loading animation styles */
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(31, 54, 75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: ease-in-out;
    color: rgb(253, 253, 253);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: 180%;
  }

.projHead{
    color: rgb(202, 202, 202);
    margin-top: 10%;
    justify-content: center;
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    margin-top: auto;
}
.contactInfo{
    color: rgb(202, 202, 202);
    margin-top: 10%;
    justify-content: center;
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    margin-top: 10%;
}
.socials{
    margin-right: 15% ;
}
a,a:visited { color: #fff; }
a:hover { color: #fff; }

.social {
	float: right;
	margin: 2em 2em; width: 80px; height: 80px; 	
	display: block; text-align: center; line-height:103px; color: #fff;
	position: relative;
	transform:rotateY(0deg);
	transition:transform .25s ease-out;
	transform-style:preserve-3d;
    
}
.social > div {
	width: 100px; height: 100px; background: #363636;
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 10%;
}
.social >.front {
	transform:translateZ(40px);
}
.social >.back {
	background: #3B5998; font-size: 3em;
	transform:rotateY(-100deg) translateZ(40px);
}

.social.social-twitter > .back { background: #55ACEE; }
.social.social-github > .back { background: #f3f3f3; color: #000; }
.social.social-facebook > .back { background: #12A5F4; }
.social.social-linkedin > .back { background: #4875B4; }
.social.social-instagram > .back { background: #8a1b5f; }

/* Hover */
.social:hover {
	transform: rotateY(100deg);
}