/* sweetAlert2 */
.swal2-html-container {
    text-align: justify !important;
    padding: 0 40px;
}

.lineUp {
    opacity: 1;
    animation: 1s anim-lineUp ease-out forwards;
}

.skewUp {
    opacity: 1;
    animation: 1s zoomIn ease-out forwards;
}

.nameLetters {
    cursor: context-menu;
    /* font-size: 5vw; */
    letter-spacing: 0px;
    /* color: #dbc500; */
    /* color: #ffffff; */
    font-weight: 600;
    display: inline-block;
    animation: 0.75s linear;
    animation-name: none;
    transform-origin: center;
    animation-play-state: running;
    /* font-family: 'Oswald',sans-serif; */
    z-index: 1;
    margin-top: -25px;
}

form .btn {
    font-size: 17px;
    background: transparent;
    border: none;
    text-transform: uppercase;
    position: relative;
    transition: .5s ease;
    border-bottom: 1px solid #ffc506;
}

form .btn::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #7e7e00;
    transition: .5s ease;
}

form .btn:hover {
    color: #000000;
    transition-delay: .5s;
}

form .btn:hover::before {
    width: 100%;
}

form .btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: #ffc506;
    transition: .4s ease;
    z-index: -1;
}

form .btn:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: rgb(0, 0, 0);
}

@keyframes rubberBand {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

    20% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: translateY(0%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

.mainBody {
    display: none;
    width: 100vw;
    height: fit-content;
    position: relative;
    overflow-x: hidden;
    background-color: #030014;
    /* font-family: 'Caveat',cursive; */
    font-family: 'Comfortaa', cursive;
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Oswald',sans-serif; */
    scroll-behavior: smooth;
}

.mainBody .maker{
    position: relative;
    bottom:0px;
    left:0;
    display: flex;
    justify-content: center;
    padding:5px;
    color:white;
    font-size: 10px;
}



.mainBody .nav {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 75px;
    /* background-color: red; */
    /* padding: 10px 30px; */
    transform-origin: right;
    transform: rotate(90deg);
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: fit-content;
    height: fit-content;
    gap: 20px;
}

.mainBody .nav p {
    cursor: pointer;
    position: relative;
    /* background-color: yellow; */
    font-size: 16px;
    color: #ffe600;
    transition: all 0.15s ease-in-out;
    /* background-color: rgb(0, 0, 255); */
    padding: 20px 0px;
    transform-origin: center;
}

.mainBody .nav p a {
    padding: 20px 0px;
    color: #ffe600;
    text-decoration: none;
}

/* .mainBody .nav p:hover {
    transform: rotate(-90deg) scale(1.15); 
    font-weight: bold;
} */
.mainBody .nav .hovered {
    transform: rotate(-90deg) scale(1.15);
    font-weight: bold;
}

.mainBody .nav p:last-child:hover {
    transform: rotate(0deg);
}

.mainBody .floatingDivs {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: 'Caveat', cursive;
}

.mainBody .floatingDivs .nameSign {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    /* box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); */
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(4.5px);
    /* border-radius: 10px; */
    /* border: 2px solid rgba(255, 255, 255, 0.18); */
    /* padding: 5px 20px; */
    /* display: none; */
    overflow: hidden;
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
    border: 2px solid rgba(255, 255, 255, 0.18);
}

.mainBody .floatingDivs .nameSign:hover {
    border: 2px solid #dbc500;
}

.mainBody .floatingDivs .nameSign a {
    padding: 5px 15px;
    text-decoration: none;
    color: #b9a700;
}

.mainBody .floatingDivs .workBg {
    position: absolute;
    top: 10%;
    right: -10%;
    transform: translateY(-20%);
    font-size: 40vw;
    color: #303030;
    z-index: 0;
    font-family: 'Oswald', sans-serif;
}

.mainBody .floatingDivs .downArrow {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 90vh;
    left: 50%;
    transform: translateX(-50%);
}

.mainBody .floatingDivs .aboutBg {
    position: absolute;
    top: 185vh;
    left: -50px;
    font-size: 20vw;
    color: #303030;
    z-index: 1;
    font-family: 'Oswald', sans-serif;
    display: none;
}

/* 






*/
.mainBody .landingPage {
    width: 100%;
    min-height: 100%;
    max-height: fit-content;
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    /* background-color: red; */
    margin: auto;
    padding: 50px 0 50px 50px;
}

.mainBody .landingPage .downArrow {
    color: white;
    font-size: 30px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: red; */
}

.mainBody .landingPage .landingPageTitle {
    width: 50%;
    color: rgb(221, 221, 221);
    justify-self: flex-end;
    font-size: 30px;
    z-index: 2;
    cursor: context-menu;
}

.mainBody .landingPage .landingPageTitle p:first-child {
    color: white;
    color: #dbc500;
    font-size: 36px;
    margin-bottom: 30px;
}

.mainBody .landingPage .landingPageTitle .buttons {
    margin-top: 60px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8%;
}

.mainBody .landingPage .landingPageTitle .buttons a {
    text-decoration: none;
    color: #ffffff;
    background-color: #dbc500;
    background-color: transparent;
    border: 2px solid #dbc500;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 24px;
    box-shadow: 0px 0px 10px 3px rgb(0, 0, 0);
    transition: all 0.10s ease-in-out;
}
.mainBody .landingPage .landingPageTitle .buttons .articleBtn{
    background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
    color: #ffffff;
    border: 2px solid rgba(0, 0, 0, 1);
}

.mainBody .landingPage .landingPageTitle .buttons a:hover {
    transform: scale(0.9);
    background-color: #e5ce00;
    color: #000000;
    box-shadow: 0px 0px 10px 3px rgb(37, 37, 37);
}

.mainBody .landingPage .landingPageTitle .buttons .articleBtn:hover {
    background-image: linear-gradient(144deg, #8830c7, #3a24c5 50%, #00acb9);
    color: #ffffff;
}

.mainBody .landingPage .landingPageDig {
    width: 40%;
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* overflow: hidden; */
    /* background-color: red; */
}

.mainBody .landingPage .landingPageDig img {
    margin-left: -25%;
    width: 100%;
    transform: rotateY(180deg);
    animation: float 3s alternate-reverse infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* gallery page */
/* 





*/
.mainBody .galleryPage {
    width: 100%;
    min-height: 100%;
    max-height: fit-content;
    position: relative;
    background-color: #101010;
    /* background-color: yellow; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0 150px 0;
}

.mainBody .galleryPage .card {
    width: 70%;
    height: 500px;
    background-color: white;
    position: absolute;
    border-radius: 15px;
    box-shadow: 0px 0px 15px 7px #1e1e1e;
    transform: skew(15deg, 0deg);
    opacity: 0;
    overflow: hidden;
    /* position: relative; */
}

.mainBody .galleryPage .card:nth-child(1) {
    margin-right: 100px;
    margin-top: 100px;
    background-color: red;
    background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
}

.mainBody .galleryPage .card:nth-child(2) {
    margin-right: 50px;
    margin-top: 80px;
    background-color: rgb(239, 135, 135);
    background-image: linear-gradient(135deg, #FCCF31 10%, #F55555 100%);
}

.mainBody .galleryPage .card:nth-child(3) {
    margin-right: 0px;
    margin-top: 50px;
    background-color: rgb(0, 123, 255);
    background-image: linear-gradient(135deg, #9796f0 10%, #FBC7D4 100%);
}

.mainBody .galleryPage .card:nth-child(4) {
    margin-right: -50px;
    /* margin-top: -15px; */
    background-color: rgb(255, 187, 0);
    box-shadow: 0px 3px 15px 7px #0c0c0c;
    background-image: linear-gradient(135deg, #FFD3A5 10%, #FD6585 100%);
    /* background-image: linear-gradient(135deg, #89f7fe 10%, #66a6ff 100%); */
    /* background-image: linear-gradient(135deg, #EE9CA7 10%, #FFDDE1 100%); */
    /* background-image: linear-gradient(135deg, #a1c4fd 10%, #c2e9fb 100%); */
    /* background-image: linear-gradient(135deg, #FCCF31 10%, #F55555 100%); */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    position: relative;
}

.mainBody .galleryPage .card:nth-child(4) .digPart {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainBody .galleryPage .card:nth-child(4) .digPart img {
    width: 75%;
    /* transform: skew(-10deg,0deg); */
    filter: drop-shadow(-5px 10px 10px rgb(0, 0, 0));
    transition: all 0.25s ease-in-out;
}

.mainBody .galleryPage .card:nth-child(4) .digPart img:hover {
    transform: scale(1.05);
}

.mainBody .galleryPage .card:nth-child(4) .text {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    flex-wrap: wrap;
    position: relative;
    gap: 10px;
    padding: 0 10px;
}

.mainBody .galleryPage .card:nth-child(4) .text .blocks {
    min-width: 100%;
    /* height: 45%; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.mainBody .galleryPage .card:nth-child(4) .text .blocks img {
    width: 75px;
    filter: drop-shadow(-5px 10px 10px black);
    transition: all 0.25s ease-in-out;
    cursor: context-menu;
}

.mainBody .galleryPage .card:nth-child(4) .text .blocks img:hover {
    transform: scale(0.75);
}

.mainBody .galleryPage .card:nth-child(4) .text .blocks p {
    font-size: 32px;
    /* color: #202020; */
    background: linear-gradient(to right, #222, #333, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
    text-shadow: -5px 5px 5px #0000007a;
    transition: all 0.25s ease-in-out;
    cursor: context-menu;
}

.mainBody .galleryPage .card:nth-child(4) .text .blocks p:hover {
    transform: scale(1.05);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
        transform: skew(15deg, 0deg);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform: skew(15deg, 0deg);
    }
}

/* 





*/
/* about me */
.mainBody .aboutMeBody {
    width: 100%;
    min-height: 100%;
    max-height: fit-content;
    /* background-color: #030014; */
    position: relative;
    /* background-color: red; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 150px 50px 200px 50px;
}

.mainBody .aboutMeBody .aboutBg {
    position: absolute;
    top: -10px;
    left: 0px;
    font-size: 20vw;
    color: #202020;
    font-family: 'Oswald', sans-serif;
}

.mainBody .aboutMeBody .imgDiv {
    z-index: 1;
    width: 300px;
    border-radius: 15px;
    opacity: 0;
    overflow: hidden;
    align-self: center;
    display: flex;
    justify-content: center;
    background-color: rgb(233, 233, 233);
}

.mainBody .aboutMeBody img {
    /* z-index: 1;
    width: 300px;
    border-radius: 15px;
    opacity: 0; */
    width: 150%;
    height: 150%;
    transition: all 0.25s ease-in-out;
    /* border: 10px solid #dbc500; */
}

.mainBody .aboutMeBody img:hover {
    transform: scale(1.15);
    /* border: 2px solid red; */
}

.mainBody .aboutMeBody .text {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    color: white;
    font-family: 'Comfortaa', cursive;
    cursor: context-menu;
    opacity: 0;
    width: 50%;
    border-top: 2px solid #909090;
    border-right: 2px solid #909090;
    padding: 15px 30px;
}

.mainBody .aboutMeBody .text p:nth-child(1) {
    font-size: 40px;
    color: #dbc500;
    margin-bottom: 15px;
}

.mainBody .aboutMeBody .text p:nth-child(2) {
    font-size: 30px;
    color: #a19100;
    margin-bottom: 15px;
}

.mainBody .aboutMeBody .text p:nth-child(3) {
    /* font-size: 30px; */
    /* color: #a19100; */
    margin-bottom: 15px;
    text-align: justify;
    align-self: flex-start;
}

.mainBody .aboutMeBody .text p:nth-child(4) {
    font-size: 24px;
    color: #dbc500;
    text-align: left;
    margin-bottom: 15px;
    align-self: flex-start;
}

.mainBody .aboutMeBody .text .hobbiesList {
    width: 100%;
    height: fit-content;
    align-self: flex-start;
    color: #909090;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10%;
}

.mainBody .aboutMeBody .text .hobbiesList p {
    width: fit-content;
    display: inline-block;
    font-size: 24px;
    color: #909090;
}

/* 





*/
/* Skills */
.mainBody .skillsBody {
    width: 100%;
    min-height: 100vh;
    max-height: fit-content;
    padding: 150px 150px 50px 50px;
    display: flex;
    justify-content: space-around;
    background-color: #030014;
    background-color: #101010;
    align-items: flex-start;
    position: relative;
    flex-direction: row-reverse;
    gap: 50px;
}

.mainBody .skillsBody .skillTitle {
    /* position: absolute; */
    position: relative;
    top: -100px;
    cursor: context-menu;
    /* right:100px; */
    font-size: 20vw;
    color: #303030;
    font-family: 'Oswald', sans-serif;
    z-index: 0;
    /* display: none; */
}

.mainBody .skillsBody .skillText {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    z-index: 1;
}

.mainBody .skillGlobe {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
}

.mainBody .skillGlobe .content {
    width: 100%;
    height: 100%;
    color: #dbc500;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    cursor: context-menu;
    font-weight: bold;
}

.mainBody .skillGlobe .content1 {
    display: flex;
}

.mainBody .skillsBody .skillText .someSkillTexts {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.mainBody .skillsBody .skillText .someSkillTexts .title {
    padding-left: 20px;
    display: none;
}

.mainBody .skillsBody .skillText .someSkillTexts .infoText {
    align-self: flex-start;
    color: white;
    margin-top: -120px;
    z-index: 1;
    font-size: 1rem;
    text-align: center;
}

/* 



*/
/* social Divider */
.mainBody .socialDivider {
    width: 100%;
    height: 250px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 10px; */
    flex-wrap: wrap;
}

.mainBody .socialDivider .block {
    width: 25%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mainBody .socialDivider .block1 {
    background-color: #151515;
}

.mainBody .socialDivider .block2 {
    background-color: #315dff;
}

.mainBody .socialDivider .block3 {
    background-color: #ba31ff;
}

.mainBody .socialDivider .block4 {
    background-color: #4e4e4e;
}

.mainBody .socialDivider .block .socialCover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    z-index: 1;
}

.mainBody .socialDivider .block .coverHover {
    background-color: #16161620;
    display: none;
}

.mainBody .socialDivider .block .socialLinks {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #16161620;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    display: none;
    color: white;
}

.mainBody .socialDivider .block .socialLinks a {
    width: 100%;
    height: 100%;
    background-color: green;
    z-index: 1;
    visibility: hidden;
}

.mainBody .socialDivider .block .socialImage {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
}

.mainBody .socialDivider .block .socialImage img {
    width: 50%;
    height: 60%;
    transition: all 0.25s ease-in-out;
    color: white;
}

/* 



*/
/* Project */
.mainBody .projectBody {
    width: 100%;
    min-height: 100vh;
    max-height: fit-content;
    padding: 200px 150px 100px 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #030014;
    background-color: #101010;
    position: relative;
    flex-direction: column;
    gap: 50px;
}

.mainBody .projectBody .portfolioTitle {
    position: absolute;
    font-size: 15vw;
    color: #303030;
    top: 0;
    left: 0;
    font-family: 'Oswald', sans-serif;
    z-index: 0;
}

.mainBody .projectBody .projectCard {
    width: 100%;
    min-height: 300px;
    max-height: fit-content;
    background-color: transparent;
    border-radius: 15px;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: nowrap;
    /* overflow: hidden; */
    padding: 10px 5px 20px 0;
    position: relative;
    opacity: 0;
}

.mainBody .projectBody .projectCard .projectImage {
    width: 400px;
    height: 200px;
    background-color: green;
    background-color: transparent;
    overflow: hidden;
    left: 0;
    bottom: 0px;
    align-self: flex-end;
    position: absolute;
    z-index: 1;
    border-radius: 10px;
}

.mainBody .projectBody .projectCard .projectImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.15s linear;
}

.mainBody .projectBody .projectCard .projectImage img:hover {
    border: 2px solid #dbdb00;
}

.mainBody .projectBody .projectCard .projectText {
    width: 80%;
    min-height: 80%;
    max-height: fit-content;
    background-color: rgba(51, 51, 51, 0.438);
    color: white;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    padding: 20px 30px 20px 220px;
    border-top: 5px solid #dbc500;
    border-right: 5px solid #dbc500;
    cursor: context-menu;
    gap: 10px;
}

.mainBody .projectBody .projectCard .projectText .title a {
    text-decoration: none;
    font-size: 40px;
    color: #dbc500;
    position: relative;

}

.mainBody .projectBody .projectCard .projectText .title a i {
    font-size: 20px;
    position: relative;
    bottom: 10px;
    display: none;
}

.mainBody .projectBody .projectCard .projectText .title a:hover {
    color: #c2ae00;
    text-decoration: underline;
}

.mainBody .projectBody .projectCard .projectText .aboutProject {
    font-size: 20px;
    color: #ececec;
    align-self: flex-start;
    text-align: left;
}

/* 2nd card */
.mainBody .projectBody .projectCard2 {
    flex-direction: row-reverse;
    justify-content: start;
    padding: 10px 0 20px 5px;
    position: relative;
}

.mainBody .projectBody .projectCard2 .projectImage {
    position: absolute;
    left: unset;
    right: 0;
}

.mainBody .projectBody .projectCard2 .projectText {
    align-items: flex-start;
    padding: 20px 220px 20px 30px;
    border-left: 5px solid #dbc500;
    border-right: none;
}

/* 



*/
/* spaceshuttle */
.mainBody .spaceBody {
    background-color: black;
    background-color: transparent;
    border-bottom: 2px solid #505050;
    width: 100%;
    height: 200px;
    overflow: hidden;
    color: #303030;
    font-size: 48px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 10px;
}

.mainBody .spaceBody i {
    min-width: 100px;
    display: flex;
    justify-content: center;
}

.mainBody .spaceBody .spaceshipLaunch {
    color: #fdfdfd;
    position: relative;
    animation: rocketLaunch infinite 7s;
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.mainBody .spaceBody .spaceshipLaunch .fireBody {
    transform: rotateZ(180deg);
    font-size: 30px;
    color: #dbdb00;
}

@keyframes rocketLaunch {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-100px) rotateZ(0deg);
    }

    50% {
        transform: translateY(-100px) rotateZ(90deg);
    }

    90% {
        transform: translate(110vw, -100px) rotateZ(90deg);
    }

    93% {
        transform: translate(110vw, 1000px) rotateZ(90deg);
    }

    95% {
        transform: translateY(1000px) rotateZ(0deg);
    }

    100% {
        transform: translateY(0);
    }
}

/* 



*/
/* xyz */
.mainBody .myProduct {
    width: 100%;
    min-height: 100vh;
    max-height: fit-content;
    background-color: #030014;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 100px 150px 100px 50px;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 50px;
    position: relative;
}

.mainBody .myProduct .title {
    width: fit-content;
    height: fit-content;
    color: white;
    text-align: center;
    padding: 5px 10px;
    cursor: context-menu;
}

.mainBody .myProduct .title .majorTitle {
    font-size: 36px;
    color: #dbdb00;
    opacity: 0;
    margin-bottom: 10px;
}

.mainBody .myProduct .title .subTitle {
    font-size: 24px;
    color: #505050;
    opacity: 0;
}

.mainBody .myProduct .cards {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.mainBody .myProduct .cards .productCards {
    width: 300px;
    height: 450px;
    background-color: white;
    color: white;
    padding: 30px 20px 15px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    border-radius: 15px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    gap: 15px;
    transition: all 0.15s linear;
    opacity: 0;
}

.mainBody .myProduct .cards .productCards:hover {
    transform: translateY(-10px);
}

.mainBody .myProduct .cards .productCards img {
    width: 150px;
    filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.75));
    transition: all 0.15s linear;
}

.mainBody .myProduct .cards .productCards img:hover {
    transform: scale(1.1);
}

.mainBody .myProduct .cards .productCards .title {
    color: #dbdb00;
    font-size: 28px;
}

.mainBody .myProduct .cards .productCards .info {
    color: #ffffff;
    font-size: 16px;
}

.mainBody .myProduct .cards .productCard1 {
    background: linear-gradient(132deg, rgba(1, 96, 105, 0.5) 37.32%, rgba(0, 72, 95, 0.5) 100.00%);
}

.mainBody .myProduct .cards .productCard2 {
    background: linear-gradient(132deg, rgba(115, 93, 142, 0.5) 0.00%, rgba(58, 33, 86, 0.5) 100.00%);
}

.mainBody .myProduct .cards .productCard3 {
    background: linear-gradient(132deg, rgba(146, 11, 126, 0.5) 0.00%, rgba(52, 29, 49, 0.5) 100.00%);
}

/* 



*/
/* contact */
.mainBody .contactBody {
    width: 100%;
    height: fit-content;
    padding: 100px 150px 100px 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #030014;
    flex-direction: column;
    color: white;
    gap: 15px;
    position: relative;
}

.mainBody .contactBody .floating {
    position: absolute;
    width: fit-content;
    height: fit-content;
    right: 20%;
    top: 350px;
}

.mainBody .contactBody .floating img {
    width: 300px;
    animation: rounding 30s linear infinite;
    transform-origin: center center;
}

@keyframes rounding {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

.mainBody .contactBody .title {
    align-self: center;
    font-size: 48px;
    color: #c1ae00;
    cursor: context-menu;
}

.mainBody .contactBody p {
    color: #505050;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    cursor: context-menu;
}

.mainBody .contactBody .contactInfo {
    width: 100%;
    padding-left: 150px;
}

.mainBody .contactBody .contactInfo #contact-form {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.mainBody .contactBody .contactInfo #contact-form input,
.mainBody .contactBody .contactInfo #contact-form textarea {
    width: 400px;
    font-size: 18px;
    border-radius: 5px;
    background-color: #3030307d;
    border: 2px solid #dbc50093;
    padding: 15px 20px;
    color: white;
}

.mainBody .contactBody .contactInfo #contact-form textarea {
    max-width: 400px;
    min-width: 400px;
    min-height: 100px;
}

.mainBody .contactBody .contactInfo #contact-form input[type='submit'] {
    width: 100px;
    align-self: flex-end;
    border: none;
    background-color: transparent;
    border: 2px solid #7d7d00;
    transition: all 0.15s linear;
    cursor: pointer;
}

.mainBody .contactBody .contactInfo #contact-form input[type='submit']:hover {
    transform: scale(1.05);
    background-color: #bee900;
    border: 2px solid transparent;
    color: black;
}

/* 



*/
/* footer */
.mainBody .footer {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 0px 0px 500px 0px;
    position: relative;
    color: white;
    background-color: #000000;
}

.mainBody .footer .moon {
    position: absolute;
    width: 100%;
    height: 500px;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
}

.mainBody .footer .moon img {
    width: 100%;
    animation: rounding 30s linear infinite;
    transform-origin: center center;
}

.mainBody .footer .footerContent {
    width: 100%;
    height: fit-content;
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 100px 30px;
    padding: 50px 150px 0px 50px;
    opacity: 0;
}

.mainBody .footer .footerContent .hiddenText {
    width: 50%;
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    font-size: 18px;
    cursor: context-menu;
    overflow-x: hidden;
    /* text-align: center; */
    color: #ececec;
    padding: 0 10px;
}

.mainBody .footer .footerContent .hiddenText form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: auto;
    gap: 20px;
    margin-top: 10px;
}

.mainBody .footer .footerContent .hiddenText form textarea {
    /* min-width: 250px;
    max-width: 250px; */
    min-width: 100%;
    max-width: 100%;
    min-height: 150px;
    background-color: transparent;
    border-radius: 7px;
    border: 2px solid #757500;
    padding: 20px 30px;
    color: white;
}

.mainBody .footer .footerContent .hiddenText form button {
    width: fit-content;
    height: fit-content;
    padding: 10px 20px;
    background-color: transparent;
    color: #ececec;
    align-self: flex-start;
    cursor: pointer;
    border: 1px solid #a49400;
}

.mainBody .footer .footerContent .hiddenText form button:hover {
    color: #000000;
}

.mainBody .footer .footerContent .socials,
.mainBody .footer .footerContent .footerNav {
    width: 300px;
    height: 100%;
    position: relative;
}

.mainBody .footer .footerContent .socials p,
.mainBody .footer .footerContent .footerNav p {
    color: #707070;
    margin-top: 15px;
    transition: all 0.25s linear;
}

.mainBody .footer .footerContent .socials p a,
.mainBody .footer .footerContent .footerNav p a {
    color: #909090;
    transition: all 0.05s linear;
    text-decoration: none;
}

.mainBody .footer .footerContent .socials p a:hover,
.mainBody .footer .footerContent .footerNav p a:hover {
    color: white;
    transform: scale(1.01);
}

.mainBody .footer .footerContent .socials p:first-child,
.mainBody .footer .footerContent .footerNav p:first-child {
    margin: 0;
    margin-bottom: 50px;
    position: relative;
    /* top:-7px; */
    color: #ececec;
}









@media screen and (max-width:1300px) {
    .mainBody .contactBody .floating {
        right: 200px;
    }
}

@media screen and (max-width:1200px) {
    .mainBody .contactBody .floating {
        right: 150px;
    }

    .mainBody .contactBody .floating img {
        width: 250px;
    }
}

@media screen and (max-width:1100px) {
    .mainBody .nav {
        right: 50px;
    }

    .mainBody .nav p {
        font-size: 16px;
    }

    .mainBody .landingPage .landingPageDig img {
        width: 400px;
        /* transform: rotateY(180deg); */
    }

    .mainBody .galleryPage .card:nth-child(4) {
        flex-direction: column;
        padding: 0 10px;
        overflow: visible;
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart {
        width: 100%;
        height: 40%;
        overflow: visible;
        /* background-color: red; */
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart img {
        width: 50%;
        top: 0%;
        position: relative;
    }

    .mainBody .galleryPage .card:nth-child(4) .text {
        width: 100%;
        height: 60%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 40px;
        /* padding-top: 80px; */
        overflow: visible;
        /* top: -10%; */
        position: relative;
        /* background-color: red; */
    }

    .mainBody .galleryPage .card:nth-child(4) .text .blocks img {
        width: 50px;
    }

    /* .mainBody .aboutMeBody{
        padding: 50px 10px;
        min-height: 100vh;
        max-height: fit-content;
        padding-bottom: 100px;
        justify-content: center;
        gap:50px;
    }
    .mainBody .aboutMeBody .imgDiv{
        width: 25%;
    } */
    .mainBody .aboutMeBody {
        flex-direction: column;
        /* background-color: red; */
        position: relative;
        min-height: 100vh;
        max-height: fit-content;
        padding: 150px 10px 100px 100px;
        gap: 50px;
    }

    .mainBody .aboutMeBody .aboutBg {
        left: unset;
        right: 0px;
    }

    .mainBody .aboutMeBody .imgDiv {
        min-width: 300px;
        min-height: 300px;
        align-self: flex-start;
        /* margin-top: 100px; */
    }

    .mainBody .aboutMeBody .text {
        width: 100%;
        /* background-color: green; */
        margin-right: 200px;
        margin-left: 50px;
    }

    .mainBody .skillsBody {
        padding: 50px 100px 50px 50px;
        flex-direction: column-reverse;
        justify-content: flex-end;
    }

    .mainBody .skillsBody .skillText {
        width: 100%;
        height: 100%;
    }

    .mainBody .skillGlobe {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        justify-content: flex-start;
    }

    .mainBody .skillGlobe .content {
        width: 100%;
        height: 100%;
        color: #dbc500;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        display: none;
        cursor: context-menu;
    }

    .mainBody .skillGlobe .content {
        color: #00ACBD;
    }

    .mainBody .skillGlobe .content1 {
        display: flex;
    }

    .mainBody .skillsBody .someSkillTexts {
        /* background-color: red; */
        justify-content: flex-start;
        align-items: flex-start;
    }

    .mainBody .skillsBody .skillTitle {
        position: absolute;
        /* position: relative; */
        top: -50px;
        left: 0px;
        /* right:100px; */
    }

    .mainBody .skillsBody .skillText .someSkillTexts .infoText {
        margin-top: 0px;
        font-size: 1.5rem;
        text-align: center;
    }

    .mainBody .socialDivider {
        height: 200px;
    }

    .mainBody .projectBody {
        padding: 200px 100px 100px 50px;
    }

    .mainBody .projectBody .projectCard .projectImage {
        align-self: center;
        bottom: unset;
        width: 300px;
        height: 175px;
    }

    .mainBody .projectBody .projectCard .projectText {
        padding: 20px 20px 20px 180px;
    }

    .mainBody .projectBody .projectCard2 .projectText {
        padding: 20px 180px 20px 20px;
    }

    .mainBody .projectBody .projectCard .projectText .title a {
        font-size: 32px;
    }

    .mainBody .projectBody .projectCard .projectText .aboutProject {
        font-size: 20px;
    }

    .mainBody .myProduct {
        padding: 100px 100px 100px 50px;
    }

    .mainBody .myProduct .cards .productCards {
        width: 350px;
    }

    .mainBody .contactBody .floating {
        display: none;
    }

    .mainBody .footer .footerContent {
        padding: 50px 100px 0px 50px;
    }

    .mainBody .footer .footerContent .hiddenText {
        width: 100%;
    }

    .mainBody .footer .footerContent .hiddenText form {
        width: 50%;
    }

    .mainBody .footer .footerContent .hiddenText form textarea {
        min-width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width:900px) {
    .mainBody .nav {
        right: 50px;
    }

    .mainBody .nav p {
        font-size: 16px;
    }

    .mainBody .floatingDivs .workBg {
        top: 20%;
        right: -10%;
    }

    .mainBody .landingPage {
        padding: 0 0 0 10%;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 50px;
        min-height: 100vh;
        max-height: fit-content;
        padding-bottom: 100px;
    }

    .mainBody .floatingDivs .downArrow {
        top: 90vh;
    }

    .mainBody .landingPage .landingPageTitle {
        width: fit-content;
        padding-right: 70px;
    }

    .mainBody .landingPage .landingPageDig {
        width: fit-content;
    }

    .mainBody .landingPage .landingPageDig img {
        width: 500px;
        transform: rotateY(180deg);
    }

    .mainBody .galleryPage .card:nth-child(4) {
        flex-direction: column;
        padding: 0 10px;
        overflow: visible;
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart {
        width: 100%;
        height: 40%;
        overflow: visible;
        /* background-color: red; */
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart img {
        width: 50%;
        position: relative;
        top: -25%;
    }

    .mainBody .galleryPage .card:nth-child(4) .text {
        width: 100%;
        height: 60%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 40px;
        overflow: visible;
    }

    .mainBody .galleryPage .card:nth-child(4) .text .blocks img {
        width: 50px;
    }

    .mainBody .aboutMeBody {
        flex-direction: column;
        /* background-color: red; */
        position: relative;
        min-height: 100vh;
        max-height: fit-content;
        padding: 100px 50px 75px 100px;
        gap: 50px;
    }

    .mainBody .aboutMeBody .aboutBg {
        left: unset;
        right: 0px;
    }

    .mainBody .aboutMeBody .imgDiv {
        min-width: 300px;
        min-height: 300px;
        max-width: 300px;
        max-height: 300px;
        align-self: flex-start;
        margin-left: 10%;
    }

    .mainBody .aboutMeBody .text {
        width: 100%;
        /* background-color: green; */
        margin-right: 200px;
        margin-left: 100px;
    }

    .mainBody .projectBody {
        padding-top: 200px;
    }

    .mainBody .projectBody .portfolioTitle {
        left: 50%;
        transform: translate(-50%);
    }

    .mainBody .projectBody .projectCard .projectImage {
        height: 200px;
    }

    .mainBody .projectBody .projectCard .projectText {
        padding: 20px 20px 20px 200px;
    }

    .mainBody .projectBody .projectCard2 .projectText {
        padding: 20px 200px 20px 20px;
    }

    .mainBody .projectBody .projectCard .projectText .title a {
        font-size: 28px;
    }

    .mainBody .projectBody .projectCard .projectText .aboutProject {
        font-size: 16px;
    }

    .mainBody .spaceBody i:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width:800px) {
    .mainBody .nav {
        right: 55px;
        gap: 15px;
    }

    .mainBody .nav p {
        font-size: 18px;
    }

    .mainBody .floatingDivs .workBg {
        top: 20%;
        right: -10%;
    }

    .mainBody .landingPage {
        padding: 0 0 0 10%;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 50px;
        min-height: 100vh;
        max-height: fit-content;
        padding-bottom: 200px;
    }

    .mainBody .floatingDivs .downArrow {
        top: 90vh;
    }

    .mainBody .landingPage .landingPageTitle {
        width: fit-content;
    }

    .mainBody .landingPage .landingPageDig {
        width: 100%;
        width: fit-content;
        padding-top: 30px;
        /* display: none; */
        justify-content: center;
    }

    .mainBody .landingPage .landingPageDig img {
        width: 70%;
        transform: rotateY(180deg);
        /* width: 250px; */
        position: relative;
        top: 0%;
    }

    .mainBody .landingPage .landingPageTitle .buttons a {
        font-size: 18px;
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart img {
        width: 60%;
    }

    .mainBody .galleryPage .card:nth-child(4) .text .blocks img {
        width: 50px;
    }

    .mainBody .skillsBody .skillTitle {
        top: -30px;
        left: 0px;
    }

    .mainBody .skillsBody .skillText .someSkillTexts .infoText {
        margin-top: 0px;
        font-size: 1.25rem;
    }

    .mainBody .socialDivider {
        height: 150px;
    }

    .mainBody .projectBody {
        padding-top: 175px;
    }

    .mainBody .projectBody .projectCard {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: rgba(51, 51, 51, 0.438);
        padding: 20px 10px;
        overflow-x: hidden;
        box-shadow: 0 0 10px 2px #000000;
    }

    .mainBody .projectBody .projectCard .projectImage {
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        align-self: flex-start;
        width: 300px;
        height: 150px;
    }

    .mainBody .projectBody .projectCard .projectText {
        width: 100%;
        align-items: flex-start;
        padding: 20px 20px;
        border: none;
        background-color: transparent;
    }

    .mainBody .spaceBody i:nth-child(2),
    .mainBody .spaceBody i:nth-child(3) {
        display: none;
    }

    .mainBody .myProduct .cards .productCards {
        margin-right: 50px;
        width: 100%;
        height: fit-content;
        padding-bottom: 50px;
    }

    .mainBody .myProduct .title .majorTitle {
        font-size: 26px;
    }

    .mainBody .myProduct .title .subTitle {
        font-size: 18px;
    }

    .mainBody .projectBody .projectCard .projectText .aboutProject {
        text-align: center;
    }

    .mainBody .contactBody .contactInfo {
        padding-left: 10px;
    }

    .mainBody .contactBody .contactInfo #contact-form input,
    .mainBody .contactBody .contactInfo #contact-form textarea {
        width: 400px;
    }

    .mainBody .contactBody .contactInfo #contact-form textarea {
        max-width: 400px;
        min-width: 400px;
    }

    .mainBody .footer .footerContent .hiddenText form {
        width: 100%;
    }
}

@media screen and (max-width:600px) {
    /* .mainBody {
        padding-left: 10px;
    } */

    .mainBody .nav {
        right: 50px;
        gap: 20px;
    }

    .mainBody .nav p {
        font-size: 16px;
    }

    .mainBody .floatingDivs .workBg {
        top: 10%;
        right: -10%;
    }

    .mainBody .floatingDivs .downArrow {
        left: 70%;
    }

    .mainBody .landingPage {
        padding: 0 0 0 20px;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 50px;
        min-height: 100vh;
        max-height: fit-content;
        padding-bottom: 50px;
        /* padding-left: 10px; */
    }

    .mainBody .landingPage .landingPageDig {
        justify-content: center;
    }

    .mainBody .landingPage .landingPageDig img {
        width: 100%;
    }

    .mainBody .landingPage .landingPageTitle {
        font-size: 20px;
    }

    .mainBody .landingPage .landingPageTitle p:first-child {
        color: #dbc500;
        font-size: 36px;
        margin-bottom: 30px;
    }

    .mainBody .landingPage .landingPageTitle .buttons {
        gap: 15px;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .mainBody .landingPage .landingPageTitle .buttons a {
        font-size: 18px;
    }

    .mainBody .galleryPage .card {
        /* height: 60%; */
        overflow: visible;
    }

    .mainBody .galleryPage .card:nth-child(4) {
        flex-direction: column;
        padding: 0 10px;
        overflow: visible;
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart {
        width: 100%;
        height: 40%;
        overflow: visible;
        /* background-color: red; */
    }

    .mainBody .galleryPage .card:nth-child(4) .digPart img {
        width: 70%;
        position: relative;
        top: -30%;
    }

    .mainBody .galleryPage .card:nth-child(4) .text {
        width: 100%;
        height: 60%;
        flex-direction: row;
        flex-wrap: wrap;
        /* background-color: rgba(255, 0, 0, 0.267); */
        padding: 30px 0 0 0;
        /* background-color: red; */
        top: -10%;
        overflow: visible;
    }

    .mainBody .galleryPage .card:nth-child(4) .text .blocks img {
        width: 60px;
    }

    .mainBody .galleryPage .card:nth-child(4) .text .blocks p {
        font-size: 24px;
    }

    .mainBody .aboutMeBody {
        justify-content: flex-start;
        min-height: fit-content;
        max-height: fit-content;
        flex-direction: column;
        /* background-color: red; */
        position: relative;
        height: fit-content;
        padding: 100px 50px 100px 15px;
    }

    .mainBody .aboutMeBody .aboutBg {
        left: unset;
        right: 0px;
    }

    .mainBody .aboutMeBody .imgDiv {
        min-width: 200px;
        min-height: 200px;
        max-width: 200px;
        max-height: 200px;
        align-self: flex-start;
    }

    .mainBody .aboutMeBody .text {
        width: 100%;
        /* background-color: green; */
        margin-right: 0px;
        margin-left: 0px;
        border: none;
        border-bottom: 2px solid #909090;
        border-left: 2px solid #909090;
    }

    .mainBody .aboutMeBody .text p:nth-child(1) {
        font-size: 32px;
        font-weight: bolder;
        align-self: flex-start;
    }

    .mainBody .aboutMeBody .text p:nth-child(2) {
        font-size: 24px;
        font-weight: bolder;
        align-self: flex-start;
    }

    .mainBody .aboutMeBody .text p:nth-child(3) {
        width: 100%;
        display: inline-block;
        font-size: 16px;
        text-align: left;
        word-wrap: break-word;
        hyphens: auto;
    }

    .mainBody .aboutMeBody .text p:nth-child(4) {
        font-size: 24px;
        text-align: left;
    }

    .mainBody .aboutMeBody .text .hobbiesList p {
        font-size: 16px;
        text-align: left;
        width: fit-content;
    }

    .mainBody .skillsBody {
        padding-top: 150px;
    }

    .mainBody .skillGlobe .content1 {
        display: none;
    }

    .mainBody .skillGlobe .content2 {
        display: flex;
    }

    .mainBody .skillsBody .skillTitle {
        top: 50px;
        left: 0px;
    }

    .mainBody .skillsBody .skillText .someSkillTexts .infoText {
        margin-top: 0px;
        font-size: 16px;
        text-align: left;
    }

    .mainBody .socialDivider {
        height: fit-content;
        flex-wrap: wrap;
    }

    .mainBody .socialDivider .block {
        min-width: 50%;
        height: auto;
        padding: 20px;
    }

    .mainBody .projectBody {
        padding-top: 150px;
    }

    .mainBody .projectBody .projectCard .projectImage {
        width: 100%;
    }

    .mainBody .projectBody .projectCard .projectText .aboutProject {
        text-align: left;
    }

    .mainBody .spaceBody i:nth-child(2),
    .mainBody .spaceBody i:nth-child(3),
    .mainBody .spaceBody .shuttle1 {
        display: none;
    }

    .mainBody .myProduct {
        padding: 100px 70px 100px 20px;
    }

    .mainBody .myProduct .title .majorTitle {
        font-size: 20px;
    }

    .mainBody .myProduct .title .subTitle {
        font-size: 16px;
    }

    .mainBody .contactBody {
        padding-right: 70px;
    }

    .mainBody .contactBody .title {
        font-size: 30px;
    }

    .mainBody .contactBody .contactInfo {
        padding-left: 20px;
    }

    .mainBody .contactBody .contactInfo #contact-form {
        width: 90%;
    }

    .mainBody .contactBody .contactInfo #contact-form input,
    .mainBody .contactBody .contactInfo #contact-form textarea {
        width: 100%;
    }

    .mainBody .contactBody .contactInfo #contact-form textarea {
        max-width: 100%;
        min-width: 100%;
    }

    .mainBody .footer{
        padding-left: 10px;
    }
    .mainBody .footer .footerContent {
        padding: 50px 100px 0px 50px;
    }

    .mainBody .footer .footerContent .hiddenText {
        width: 100%;
    }

    .mainBody .footer .footerContent .hiddenText form {
        width: 100%;
    }

    .mainBody .footer .footerContent .hiddenText form textarea {
        min-width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width:450px) {
    .mainBody .landingPage {
        padding: 0 0 0 25px;
    }
    .mainBody .skillGlobe .content1,
    .mainBody .skillGlobe .content2 {
        display: none;
    }

    .mainBody .skillGlobe .content3 {
        display: flex;
    }

    .mainBody .skillsBody .skillTitle {
        top: 20px;
        left: 0px;
    }

    .mainBody .projectBody {
        padding: 100px 40px 100px 20px;
    }

    .mainBody .myProduct .cards .productCards {
        margin-right: 0px;
    }

    .mainBody .contactBody {
        padding: 50px 50px;
    }
}

@media screen and (max-width:350px) {
    .mainBody .landingPage {
        padding: 0 0 0 50px;
    }
    .mainBody .landingPage .landingPageTitle{
        font-size:20px;
    }
    .mainBody .skillGlobe .content1,
    .mainBody .skillGlobe .content2,
    .mainBody .skillGlobe .content3 {
        display: none;
    }

    .mainBody .skillGlobe .content4 {
        display: flex;
        margin-left: 30px;
    }

    .mainBody .skillsBody {
        padding-left: 10px;
    }

    .mainBody .skillsBody .skillTitle {
        top: 50px;
        left: 0px;
    }

    .mainBody .skillsBody .skillText .someSkillTexts .infoText {
        margin-top: 0px;
        font-size: 1.25rem;
        padding: 0px;
    }

    .mainBody .projectBody {
        padding: 100px 30px 100px 20px;
    }
}

@media screen and (max-height:530px) {
    .mainBody .nav {
        display: none;
    }
}







/* for you text */
.alertTitle {
    color: rgb(0, 0, 0);
}

#forYouText {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 20px 0;
    font-size: 16px;
    color: #303030;
}
#forYouText i{
    color:rgb(255, 255, 0);
    font-size: 30px;
}

#beginKnock {
    background-color: rgb(0, 174, 232);
    width: fit-content;
    padding: 10px 25px;
    color: white;
    cursor: pointer;
    position: relative;
    left:50%;
    transform: translate(-50%);
    border-radius: 10px;
}

#beginKnock:hover {
    background-color: rgb(0, 112, 149);
}

.songYt {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    min-width: auto;
    max-width: 90%;
    height: 200px;
}

.alertTitle {
    margin: 20px 0 10px 0;
    text-align: center;
}
.alertTitle span{
    white-space: nowrap;
    word-break: keep-all;
}
.alertTitle i{
    color: rgb(255, 201, 100);
}

.alertTitle .fa-hand-point-right{
    animation:animateHand1 1s linear infinite alternate;
}
.alertTitle .fa-hand-point-left {
    animation: animateHand2 1s linear infinite alternate;
}
#flip {
    background-color: #a8dcff;
    width: fit-content;
    position: relative;
    /* left: 50%;
    transform: translate(-50%); */
    height: 75px;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px 0;
    flex-direction: column;
    display: none;
    transition: all ease-in 0.5s;
    border-radius: 5px;
}

#flip div {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: appear 15s linear infinite;
    font-weight: bolder;
    color: black;
}




@keyframes appear {
    0% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(0%);
    }

    20% {
        transform: translateY(-100%);
    }

    30% {
        transform: translateY(-100%);
    }

    40% {
        transform: translateY(-200%);
    }

    50% {
        transform: translateY(-200%);
    }

    60% {
        transform: translateY(-300%);
    }

    70% {
        transform: translateY(-300%);
    }

    80% {
        transform: translateY(-400%);
    }

    100% {
        transform: translateY(-400%);
    }
}

@keyframes animateHand1{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-10px);
    }
}
@keyframes animateHand2 {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(10px);
    }
}