* {
    margin: 0;
    ;
    padding: 0;
    border: 0;
}

body {
    background: linear-gradient(15deg,
            rgb(253, 95, 95) 0%,
            rgb(243, 98, 238) 20%,
            rgb(110, 162, 252) 40%,
            rgb(108, 246, 225) 50%,
            rgb(107, 252, 129) 60%,
            rgb(240, 240, 105) 80%,
            rgb(244, 214, 116) 100%);
}

.modeContainer {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
}

.changeMode {
    height: 3rem;
    width: 88%;
    border-radius: 25px;
    background-color: rgb(35, 35, 35);
    display: flex;
    margin-top: 1rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

.changeButton {
    margin-top: 1rem;
    border: none;
    z-index: 111;
    transition: 0.5s;
    height: 3rem;
    border-radius: 20px;
    width: 8rem;
    margin-right: 0.3rem;
}

.changeButton:hover {
    background-color: rgb(237, 149, 178) !important;
}

.changeModes {
    transition: background-color 2s;
    overflow: hidden;
    position: relative;
    border-radius: 30px;
}

.changeMode::before {
    content: '';
    position: initial;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    border-radius: 30px;
    background-color: white;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2s;
}

.changeModes::before {
    transform: scaleX(1);
}

.outerRound {
    width: 17.5rem;
    height: 17.5rem;
    border-radius: 50%;
    margin: 1.7rem auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: radial-gradient(circle, rgba(255, 20, 145, 0.511) 20%, rgba(0, 0, 0, 0) 70%);
    animation: neonGlow 2s infinite alternate ease-in-out;
}

/* Outer Pulsating Glow */
@keyframes neonGlow {
    0% {
        box-shadow: 0 0 2px rgba(255, 20, 147, 0.8), 0 0 2px rgba(239, 20, 255, 0.6), 0 0 2px rgba(20, 134, 255, 0.4);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 10px rgba(255, 20, 147, 0.9), 0 0 15px rgba(255, 20, 243, 0.5), 0 0 20px rgba(20, 204, 255, 0.3);
        transform: scale(1.05);
    }
}

/* Inner Pulsating Circle */
/* .outerRound::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: rgba(255, 20, 145, 0.39);
    animation: innerPulse 2s infinite ease-in-out alternate;
} */

@keyframes innerPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.01;
    }
}

.roundCard {
    width: 17rem;
    border-radius: 50%;
    height: 17rem;
    margin: 1rem auto;
    display: grid;
    align-items: center;
}

.topCard1 {
    height: 4.5rem;
    width: 30%;
    margin-left: 5.8rem;
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.topCard2 {
    height: 4.5rem;
    width: 88%;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

.topCard3 {
    height: 4.5rem;
    width: 30%;
    margin-left: 5.8rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.topCard21 {
    height: 4.5rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.randomCard1 {
    height: 99%;
    width: 4.5rem;
    border-radius: 49%;
    box-shadow: 0.5px 0.5px 10px rgb(37, 36, 36);
    background-size: contain;
    background-repeat: no-repeat;
}

.downButton {
    font-family: "Strait", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: rgb(88, 81, 81);
    border: none;
}

.downResume {
    animation: see-saw 0.5s infinite ease-in-out;
}

@keyframes see-saw {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.downResume:hover {
    background-color: rgb(29, 29, 228);
    animation: none;
}

.marginBox {
    width: 98%;
    margin: 1rem auto;
    border-radius: 15px;
}

.iconBeat {
    color: rgb(130, 99, 57);
}

.gFonts {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
}

.card {
    background-color: rgb(35, 35, 35);
    color: white;
    box-shadow: 1px 1px 8px rgba(102, 100, 100, 0.463);
    transition: 1s;
}

.head {
    font-family: "Rye", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    color: rgb(0, 248, 236);
    transition: 2s;
}

.web1 {
    font-family: "Federant", serif;
    font-weight: 400;
    font-style: normal;
}

.web {
    font-family: "Strait", sans-serif;
    /* font-weight: 400; */
    font-style: normal;
    font-size: 1rem;
}

.web2 {
    font-family: "Goblin One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

.linkCard {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
}

.linkCard a {
    text-decoration: none;
}

.linkCircle {
    height: 2.2rem;
    width: 2.2rem;
    border-radius: 50%;
    border: 3px solid rgb(94, 94, 94);
    display: flex;
    margin-left: 5px;
    margin-right: 5px;
    align-items: center;
    justify-content: space-evenly;
    color: rgb(94, 94, 94);
    font-size: 1.1rem;
    transition: 1s;
}

.linkCircle:hover {
    border: 3px solid rgb(241, 144, 32);
    color: rgb(241, 144, 32);
}

.eduSection {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-content: space-evenly;
}

.eduCard {
    color: white;
    border: 2px solid rgba(91, 90, 90, 0.562);
    box-shadow: 1px 1px 8px rgba(102, 100, 100, 0.463);
    border-radius: 15px;
}

#skills {
    text-align: center;
    padding: 10px 20px;
}

.skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid rgba(104, 103, 103, 0.466);
    box-shadow: 1px 1px 8px rgba(102, 100, 100, 0.463);
    transition: transform 0.3s ease;
    width: 120px;
}

.skill:hover {
    transform: scale(1.1);
}

.skill img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.skill p {
    font-size: 16px;
    font-family: "Strait", sans-serif;
    font-weight: 550;
}

.myProjects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.projectImage {
    height: 12.1rem;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    transition: 1s;
    filter: grayscale(100%);
}

.projectBox {
    border-radius: 15px;
    border: 2px solid rgba(104, 103, 103, 0.594);
    box-shadow: 1px 1px 8px rgba(102, 100, 100, 0.463);
}

.projectBox:hover {
    background-color: rgb(82, 82, 114);
}

.projectBox:hover .projectImage {
    filter: none;
}

#deployNote {
    font-family: "Strait", sans-serif;
    color: rgb(109, 100, 22);
}

.logInfo {
    font-family: "Strait", sans-serif;
    color: gray;
    font-size: 0.9rem;
}

.link-div {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.link-div a {
    width: 110px;
}

.projectBody {
    position: relative;
    z-index: 1;
}

.projectName {
    font-family: "Strait", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.myTag {
    font-size: 1.5rem;
    font-family: "Aladin", system-ui;
    font-weight: 400;
    font-style: normal;
}

.linearColorChange {
    transition: 1s;
}

.contactUs {
    background-color: rgb(33, 36, 43);
    margin-top: 1.5rem;
    border: 2px solid rgba(104, 105, 105, 0.406);
}

.ideaFont {
    font-family: "Teko", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    font-style: normal;
}

.mailLink {
    text-decoration: none;
}

.m1 {
    padding-top: 1rem;
}

.contactBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.contactCard {
    border-radius: 15px;
    border: 2px solid rgba(104, 103, 103, 0.466);
    box-shadow: 1px 1px 8px rgba(102, 100, 100, 0.463);
}

.starOpacity{
    opacity: 40%;
}

.projectIdea {
    box-shadow: none;
    border-radius: none;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    background-color: rgb(33, 36, 43);
}

.proButton {
    height: 3rem;
    width: 13rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    border-radius: 15px;
    border: 2px solid rgb(11, 191, 245);
}

.rock {
    height: 2.2rem;
    width: 2.2rem;
    background-image: url(image/a12.webp);
    background-size: contain;
}

.imgRock {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
}

.footer {
    width: 100%;
    height: 2rem;
    margin-top: 0.5rem;
    border-left: none;
    background: linear-gradient(90deg,
            rgb(35, 35, 35) 0%,
            rgb(65, 65, 65) 50%,
            rgb(35, 35, 35) 100%);
}

.contactMe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
}

.footImg {
    height: 17rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.displayBy {
    display: none;
}

@media(min-width:800px) and (max-width:1100px) {
    #contHide1 {
        display: none;
    }
}

@media(max-width:800px) {
    .hideAll {
        display: none;
    }

    .displayBy {
        display: inline;
    }
}