* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #21222d;
}

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

/* * ---------- PreLoader animation ---------- * */

.banner {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #21222d;
    z-index: 20;
}


.loader {
    max-width: 15rem;
    width: 100%;
    height: auto;
    stroke-linecap: round;
}
circle {
    fill: none;
    stroke-width: 3.5;
    animation-name: preloader;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: 170px 170px;
    will-change: transform;
}
circle:nth-of-type(1) {
    stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
    stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
    stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
    stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
    animation-delay: -0.15s;
}
circle:nth-of-type(2) {
    animation-delay: -0.3s;
}
circle:nth-of-type(3) {
    animation-delay: -0.45s;
}
circle:nth-of-type(4) {
    animation-delay: -0.6s;
}
@keyframes preloader {
    50% {
        transform: rotate(360deg);
   }
}

/* * ----------------------------------------- * */

.center-img {
    background: hsl(346, 84%, 48%);
    background: linear-gradient(43deg, rgba(223,20,68,1) 0%, rgba(223,20,174,1) 100%);
}

.heading1 {
    background: linear-gradient(43deg, rgba(223,20,68,1) 0%, rgba(223,20,174,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.html_prg {
    background-color: #dd4b25;
}

.sass_prg {
    background-color: #C66394;
}

.bs_prg {
    background-color: #8512F3;
}

.git_prg {
    background-color: #E84E31;
}

.tailwindcss_prg {
    background-color: #0ea5e9;
}

a {
    text-decoration: none;
}

.fa-instagram {
    font-size: 30px;
    color: #f8208c;
}

.fa-linkedin-in {
    font-size: 30px;
    color: #126cf3;
}

.fa-github {
    font-size: 30px;
    color: #fff;
}

.socialMedia {
    color: #fffffff1;
    background: linear-gradient(43deg, rgba(223,20,68,1) 0%, rgba(223,20,174,1) 100%);
    font-weight: 700;
}

.socialMedia:hover {
    color: #fff;
}