/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* styles.css */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Roboto+Slab&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Roboto+Slab&family=Ubuntu&display=swap');
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #ffffff;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}
body {
    font-family: 'Roboto Slab', serif;
}
/* Or */
p, span, li {
    font-family: 'Ubuntu', sans-serif;
}


body::-webkit-scrollbar {
    width: 0; /* Safari and Chrome */
}
.logo img{
   
    height: 4rem;
    border-radius: 40%;
    margin-left: 10%;
   
    width: 3.5rem;
}
.aboutme {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin: 0;
    gap: 30%;
    left: 5%;
}

.about-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-animation: fadeInUp 1s forwards;
            animation: fadeInUp 1s forwards;
}

#jjkj {
    display: inline-block;
    width: 100%;
    position: relative;
    top: 0;
    margin-bottom: 8vh;
    color: #030303;
    font-size: 2rem;
    
    font-family: 'Playfair Display', 'Roboto Slab', 'Ubuntu', serif;
}
#twot {
    width: 55vw;
    font-size: 1.3rem;
    font-family: 'Playfair Display', 'Ubuntu', sans-serif;
    color: #ffffff;
    /* Initially hide the elements */
    opacity: 1;
   
    animation: slideInj 1.5s ease-in forwards paused;
}
#onet{
    width: 55vw;
    font-size: 1.3rem;
    font-family: 'Playfair Display', 'Ubuntu', sans-serif;
    color: #ffffff;
    /* Initially hide the elements */
    opacity: 1;
   
    animation: slideInj 1.5s ease-in forwards paused;
}

/* Define keyframes animation for sliding in from the side */
@keyframes slideInj {
    0% {
        opacity: 0;
        transform: translateX(-1%);
        
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

nav {
    background-color: rgba(52, 152, 219, 0.9);
    padding: 15px 0;
    position: absolute;
    width: 100%;
    z-index: 1000;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    font-size: small;
}

nav li {
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

nav a:hover {
    color: #ffcc00;
}

.hero {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    opacity: 0;
    -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
            transform: translateY(-20px);
    -webkit-animation: fadeInUp 0.5s ease-out forwards;
            animation: fadeInUp 0.5s ease-out forwards;
    background-image: url('bg4.jpg');
    position: relative;
    background-size: cover;
    /* Center the background image */
    background-position: center;
    /* Ensure the background image covers the entire element */
    background-repeat: no-repeat;

   
}
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
        /* Adjust other styles as needed */
    }
}


.content {
    max-width: 800px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    -webkit-animation: fadeInUp2 0.6s ease-out forwards;
            animation: fadeInUp2 0.6s ease-out forwards;
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
    opacity: 0;
}

#smalltext {
    -webkit-animation: fadeInUp 0.6s ease-out forwards;
            animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
            color: #e8e8e9;
}

.content h1 {
    margin-left: 20px;
    position: absolute;
    top: 25vh;
    left: 0;
    font-size: 2.5em;
    color: #989898;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition: color 0.3s, -webkit-transform 0.3s;
    transition: color 0.3s, -webkit-transform 0.3s;
    -o-transition: color 0.3s, transform 0.3s;
    transition: color 0.3s, transform 0.3s;
    transition: color 0.3s, transform 0.3s, -webkit-transform 0.3s;
    font-family: 'Playfair Display', serif;
}

.content h1:hover {
   
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}

.content p {
    margin-right: 10px;
    position: absolute;
    font-size: 1.1em;
    font-family: 'Playfair Display', serif;
    color: #ffcc00;
    top: 70vh;
}

@-webkit-keyframes fadeInUp {
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
}

@-webkit-keyframes fadeInUp2 {
    to {
        opacity: 1;
    }
  
}

@keyframes fadeInUp2 {
    to {
        opacity: 1;
    }
  
}



/* About Me Section */
#about {
    background-color: #00295e;
    padding: 40px 0;
    height: 100dvh;
    position: relative;
}

.contain1 {
    margin: 30px auto;
    margin-bottom: 0;
    padding: 20px;
    border: 1px solid #ddd;
    position: relative;
  
    
    border-radius: 8px;
    background-color: #090014;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: -o-linear-gradient(31.8deg,090014);
    background-image: linear-gradient(58.2deg,090014);
}

.contain1 img {
    height: 45vh;
    width: 45vw;
    border-radius: 6px;
    -webkit-transition: -webkit-transform 0.5s ease-in-out, -webkit-box-shadow 0.5s ease-in-out;
    transition: -webkit-transform 0.5s ease-in-out, -webkit-box-shadow 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -webkit-box-shadow 0.5s ease-in-out;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: no-preference) {
    .phot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        opacity: 0;
        -webkit-animation: photfade linear forwards;
                animation: photfade linear forwards;
    }

    @-webkit-keyframes photfade {
        from {
            scale: .8;
            opacity: 0;
        }
        to {
            scale: 1;
            opacity: 1;
        }
    }

    @keyframes photfade {
        from {
            scale: .8;
            opacity: 0;
        }
        to {
            scale: 1;
            opacity: 1;
        }
    }
}

.spaceofphot {
    margin: 10vh;
    font-weight: 600;
    font-size: 2rem;
    -webkit-transition: color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
    transition: color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
    color: #333;
   
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
  
}
.phot{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    color: #fff;
}
.phot img{
    scale: .8;
    opacity: 0;
   -webkit-animation: fadeIn50 linear forwards;
           animation: fadeIn50 linear forwards;
   animation-timeline: view();
  animation-range: entry 200px;
  aspect-ratio: 3/2;
  transition: all 2s;



}
.phot p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    text-align: center;
    -webkit-animation: fadeInUp2 linear forwards;
            animation: fadeInUp2 linear forwards;
    animation-timeline: view();
    animation-range: entry 300px;
    transition: all 2s;
    font-size: 1.4rem;
    padding: 40px;
    
}

.spaceofphot:hover {
    color: #ffcc00;
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Footer Styles */
footer {
    background-color: #90E0EF;        
    color: #fff;
    position: relative;
}

.container {
    margin: 0 auto;
}

.footer-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}



.footer-bottom {
    margin-top: 20px;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .footer-about,
    .footer-links,
    .footer-contact {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 100%;
                flex: 1 1 100%;
        margin-bottom: 20px;
        text-align: center;
    }
}
.thew{
    height: 30dvh;
    width: 20dvw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    padding: 10px;
    text-align: center;


}
.phot1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px;
    font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-left: 10%;
    padding-right: 10%;
   
}
.phot p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

}
@-webkit-keyframes fadeIn50 {
   
   
    to {
        opacity: 1;
        scale: 1;
       
    }
}
@keyframes fadeIn50 {
   
   
    to {
        opacity: 1;
        scale: 1;
       
    }
}
.box {
    background-image: url(spacebg.jpg);
    height: 200vh;

     background-repeat: no-repeat;
     background-size: ('100% 100%');
    
    position: relative;
   
    overflow: hidden;
}
.planet{
    
    height: 40em;
    width: 40em;
  


    
}
.box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    height: 200dvh;
  
    
}
.box1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
}

.plant img {
    -webkit-animation: rotatePlanet 100s linear infinite;
            animation: rotatePlanet 100s linear infinite;
    

}
.plant{
    position: absolute;
    top: 10dvh;
    font-family: "Kaushan Script", cursive;
    font-weight: 400;
    font-style: normal;

    padding: 30px 50px;
    
    -ms-flex-pack: distribute;
    
        justify-content: space-around;
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    
}
.plant p{
    font-family: "Kaushan Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    width: 20%;
    color: #27f8ff;
    margin-top: 80px;
    margin: 100px;
}
@-webkit-keyframes rotatePlanet {
    from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg); /* Start rotation from 0 degrees */
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg); /* End rotation at 360 degrees */
    }
}
@keyframes rotatePlanet {
    from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg); /* Start rotation from 0 degrees */
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg); /* End rotation at 360 degrees */
    }
}


#box11{
    color: #f8aaf4;
    font-family: "Kaushan Script", cursive;
    font-weight: 200;
    font-style: normal;
    font-size: 3rem;
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
          margin-bottom: 10%;
}
.textt{
    margin-top: 400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#spaceship {
    position: absolute;
   bottom: 0;/* Set the initial position off-screen */
    /* Adjust the width as needed */
   left: 50%;
    z-index: 3;
    height: 50px; /* Adjust the height as needed */
   /* Adjust the color as needed */
    -webkit-animation: moveShip 4s linear forwards paused;
            animation: moveShip 4s linear forwards paused; /* Adjust animation duration as needed */
   
    
}

@-webkit-keyframes moveShip {
    from {
        bottom: 0; /* Starting position off-screen */
    }
    to {
        bottom: calc(180vh); /* Ending position off-screen */
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        left: 60%;
    }
}

@keyframes moveShip {
    from {
        bottom: 0; /* Starting position off-screen */
    }
    to {
        bottom: calc(180vh); /* Ending position off-screen */
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        left: 60%;
    }
}

#spaceship:hover{

    scale: 1.2;
    -webkit-box-shadow: #129abd;
            box-shadow: #129abd;

}
#butt{
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: -70dvh;
   
    width: 80dvw;
}

.last {
    height: 100vh;
    background-color: #001824;                   
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ddd;
}


.top-row,
.bottom-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7vw;
}
.bottom-row {
    gap: 20dvh;
}
.top-row .circle {
    margin-right: 3vw; /* Gap between circles */
}

.bottom-row .circle {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 15vh; /* Gap between rows */
}
.circle {
    height: 7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
     /* Center the image vertically */
    width: 7rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 100%;
   
   
   
    position: relative;
    overflow: hidden;
    -webkit-transition: -webkit-transform 1.5s ease;
    transition: -webkit-transform 1.5s ease;
    -o-transition: transform 1.5s ease;
    transition: transform 1.5s ease;
    transition: transform 1.5s ease, -webkit-transform 1.5s ease;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}

.circle:hover {

    scale: 1.2;
}
.circle:active{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
.circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   
    -webkit-transform: rotateX(45deg) rotateY(45deg) scale(1);
   
            transform: rotateX(45deg) rotateY(45deg) scale(1);
    opacity: 0.5;
    border-radius: 100%;
}


.lastetxt{
    position: absolute;
    bottom: 0;
}
.containerfoot{
    height: 70dvh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
}
.lasttxt{
    position: absolute;
    top: 5dvh;
    left: 5dvw;
}
/* footer*/
.contact-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* Adjust gap as needed */
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-box {
    -ms-flex-preferred-size: calc(50% - 20px);
        flex-basis: calc(50% - 20px); /* Adjust width for responsiveness */
    padding: 20px;
    border-radius: 5px;
  /* Set background color */
}

.card {
    height: auto; /* Adjust height to auto for responsiveness */
    background: lightgrey;
    background-color: #4158D0;
    background-image: -o-linear-gradient(47deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    border-top-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    padding: 1rem;
    height: 50dvh;
    width: 30dvw;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
            box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.heading {
    text-align: center;
    font-weight: 600;
    padding-top: 0.5rem; /* Adjust padding syntax */
    font-size: 2.1rem;
}

.input-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; /* Adjust for responsiveness */
    margin-top: 5dvh;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.card input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; /* Adjust input width */
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    padding: 8px;
    outline: none;
}

.button-div {
    text-align: center;
}

.submit {
    margin-top: 5rem;
    text-align: center;
    padding: 8px 3rem;
    border: none;
    border-top-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: black;
    color: white;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.submit:hover {
    -webkit-box-shadow: rgba(44, 43, 43, 0.664) 5px 5px, rgba(45, 45, 45, 0.3) 10px 10px, rgba(60, 59, 59, 0.2) 15px 15px, rgba(54, 53, 53, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
            box-shadow: rgba(44, 43, 43, 0.664) 5px 5px, rgba(45, 45, 45, 0.3) 10px 10px, rgba(60, 59, 59, 0.2) 15px 15px, rgba(54, 53, 53, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}

.card input::-webkit-input-placeholder {
    color: rgb(255, 252, 252);
}

.card input::-moz-placeholder {
    color: rgb(255, 252, 252);
}

.card input:-ms-input-placeholder {
    color: rgb(255, 252, 252);
}

.card input::-ms-input-placeholder {
    color: rgb(255, 252, 252);
}

.card input::placeholder {
    color: rgb(255, 252, 252);
}

.input:focus {
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -webkit-box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
            box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.input:hover {
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -webkit-box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
            box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.object-container {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 0px;
    height: 50dvh;
    padding: 20px;
    background-color: #080808;
    border: 1px solid #ccc;
    border-radius: 5px;
}


.object-container:hover {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */


/* Small screens (max-width: 400px) */

.webani{
   position: absolute;
   top: 25dvh;
   right: 10dvw;
   width: 30dvw;
}
.box{
    overflow: hidden;
}

  #typing-text {
    font-family: 'Courier New', Courier, monospace;
    position: absolute;
    opacity: 1;
   
    font-size: 12px;
    line-height: 1.3;
    overflow-y: scroll;
    white-space: pre-wrap;
    max-height: 300px; /* Adjust as needed */
    background-color: #272822; /* Dark background color */
    color: #048dcc; /* Light text color */
    border: 10px solid #11ebce; /* Dark border color */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px; /* Rounded corners for the container */
  }
  
  #typing-text code {
    color: #f8f8f2; /* Light text color */
  }
  
  #typing-text pre {
    margin: 0; /* Remove default margin */
  }
  
  #typing-text::-webkit-scrollbar {
    width: 8px;
  }
  
  #typing-text::-webkit-scrollbar-thumb {
    background-color: #666; /* Scrollbar thumb color */
    border-radius: 4px;
  }
  
  #typing-text::-webkit-scrollbar-track {
    background-color: #333; /* Scrollbar track color */
  }
  
  #website-content {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    border-radius: 10px;
    background-color: #f0f3f3;
    border: 10px solid #11ebce;
    color: #f1eded;
    width: 25dvw;
    height: 30dvh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    background-image: url('bgmusic1.jpg');
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack:right;
        -ms-flex-pack:right;
            justify-content:right;
    color: #080808;
    gap: 24px;

    
    
  }
  .logo1{
    position: absolute;
    left: .2rem;
  }
  #website-content nav{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     position: absolute;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     top: 0;
     
     overflow: hidden;
     color: #11ebce;
     font-size: small;
     width: 100%;
   
  }
  #website-content nav ul li a{
    font-size: smaller;
   color: #11ebce;
 
   
  }
  #website-content  nav ul {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: end;
position: absolute;
width: 10dvw;
right: 0;

  }
  #website-content  nav ul li{
    width: 50%;

  }

  #website-content h1{
    margin-top: 70px;
    color: #ccc;

  }
  #website-content p{
    color: #ccc;
  }
  .realme{
    background-color: #ffffff;
    max-height: 55dvh;
    width: 40dvw;
   position: absolute;
   bottom: 10dvh;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   color: #05232b;
   
 right: 5dvw;
   margin-bottom: 20px;
   border: 3px solid #ff2727;
   border-radius: 10px;
    padding: 20px;
   
  }

  #lets{
    color: rgb(0, 132, 247);;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
 


  }
  .aaaaa:hover {
    color:#00ffff; /* Change the color of h4 tag when hovering */
  }

  /* Change the color of the tick mark span when hovering */
  .tick:hover {
    color: red;
    
  }

  /* Change the color of the inner text span when hovering */
  .inneraaa:hover {
    color: rgb(0, 255, 0);
    
    
  }
  .astro{
    max-height: 60dvh;
    max-width: 60dvw;
    position: absolute;
    bottom: 10dvh;
    opacity: 0;
    
    -webkit-animation: tttt ease-in forwards;
    
            animation: tttt ease-in forwards;
    animation-timeline: view();
    animation-range: entry 100px;
    left: 0;
  }
  @-webkit-keyframes tttt{
    from{
        -webkit-transform: translateY(-60px);
                transform: translateY(-60px);
        -webkit-transform: translateX(-40px);
                transform: translateX(-40px);
        scale: 0.7;
        opacity: 0;
    }
    to{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
        scale: 1;
        opacity: 1;

    }
  }
  @keyframes tttt{
    from{
        -webkit-transform: translateY(-60px);
                transform: translateY(-60px);
        -webkit-transform: translateX(-40px);
                transform: translateX(-40px);
        scale: 0.7;
        opacity: 0;
    }
    to{
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
        scale: 1;
        opacity: 1;

    }
  }
  .skillss{
    position: absolute;
    
    bottom: 10px;
   
    width: 60dvw;
    left: 10px;

  } 
  .skillcont {
    max-width: 60dvw;
   
    margin: 50px auto;
    background-color: linear-gradient(135deg, rgba(255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    height: 30dvh;
    padding: 25px;
    
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
    -webkit-animation: slideIn 1s ease;
            animation: slideIn 1s ease;
}
@-webkit-keyframes slideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes slideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
.skill {
    margin-bottom: 20px;
}
.skill-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: #080808;
}
.progress-bar {
    width: 100%;
    background-color: #000000;
    height: 12px;
    border-radius: 10px;
    overflow: hidden;
}
.progress {
    height: 100%;
    background-color: azure;
    border-radius: 10px;
    -webkit-animation: progressBarAnimation  3s ease forwards;
            animation: progressBarAnimation  3s ease forwards;

    
}

/* Adjust the widths of individual progress bars */
.progress-html {
    width: 90%;
}
.progress-css {
    width: 85%;
}
.progress-js {
    width: 75%;
}
.progress-java{
    width: 80%;
}
.progress-Python{
    width: 60%;
}

@-webkit-keyframes progressBarAnimation {
    from {
        width: 0;
    }
    to {
        width: var(--skill-level);
    }
}

@keyframes progressBarAnimation {
    from {
        width: 0;
    }
    to {
        width: var(--skill-level);
    }
}
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}


/* Adjustments for Medium Screens (max-width: 768px) */
@media only screen and (max-width: 768px) {
    body {
        /* Adjust body background color for medium screens */
        background-color: #ffffff;
    }
    /* Add your CSS properties here */
}

/* Adjustments for Extra Small Screens (max-width: 400px) */

/* Responsive adjustments for specific elements */
@media only screen and (max-width: 768px) {
    /* Adjust styles for specific elements for medium screens */
 

    .aboutme{
        height: 30dvh;
        
      
        padding: 0px;
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
       
        top: 8dvh;
        left: 10%;
        
        
        

    }
.about-content{
    left: 20%;
    top: 0;
    
  

}

.thew{
    width: 30dvw;
    margin-top: 20px;
    
    height: 30dvh;

}
.webani{
    top: 18dvh;
    width: auto;

  
}
.phot img{
  
    height: 45dvh;
    aspect-ratio: 3/2;
}
.box{
    height: 150dvh;

}
#onet, #twot {
width: 45dvw;

}
.plant{
    padding-top: 0;
    top: 0;
    padding: 0;

}
.last{
    height: 110dvh;

}

.realme{
  
left: 52dvw;
 line-height: 10px;
}
.realme h1{
    line-height: 25px;
    margin-top: 2px;
}
.realme h3{
    line-height: 20px;
    margin-top: 0;
}

.aaaaa{
    font-size: .8rem;

}

.inneraaa{
    line-height: 15px;
    margin: 0;

}
h3{
    font-size: .9rem;
}
.astro{
    height: auto;
    width: auto;

}
.skillss{
    max-width: 90dvw;

}
.card input{
    padding: 4px;
}
.skillcont{
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-height: 50dvh;
    
    

}
.skill{
margin-bottom: 10px;
padding: 2px;

}
.skill-name{
    font-size: 0.6rem;
    margin-top: 5px;

}
.progress-bar{
    height: .5rem;


}

.planet{
    height: 29rem;
    margin-left: 15px;
    width: 29rem;
}

.card{
    height: 50dvh;
    width: 100%;
}

.containerfoot{
    height: 150dvh;
}

.object-container{
    height: 60dvh;
    margin-top: 10dvh;
}
.contact-box{
    height: 40dvh;
}
.heading{
    font-size: 1.5rem;
}
.lasttxt{
  top: 0;
}
.textt{
 margin-top: 370px;
}
.logo1{
    
    width: 40px;
   
}
.logo img{
   
    height: 4rem;
    border-radius: 40%;
    margin-left: 10%;
   
    width: 3.5rem;
}

#jjkj{
    position: absolute;
    top: 0px;
   width: 20dvw;
   left: 30%;
   color: #aae9f8;
   font-size: 1.7rem;


}
#onet{
    font-size: 0.9rem;

}
@-webkit-keyframes moveShip {
    from {
        bottom: 0; /* Starting position off-screen */
    }
    to {
        bottom: calc(140vh ); /* Ending position off-screen */
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        left: 50%;
    }
}
@keyframes moveShip {
    from {
        bottom: 0; /* Starting position off-screen */
    }
    to {
        bottom: calc(140vh ); /* Ending position off-screen */
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        left: 50%;
    }
}
.top-row,
.bottom-row {
    gap: 4dvw;



}
.circle{
    max-height: 16dvh;
    max-width: 16dvh;
}
.bottom-row{
    gap: 10dvw;
}
#one{
    height: 45dvh;
  
}
#twot{
    font-size: .9rem;
  

}
#onet{
    font-size: .9rem;
}

#box10{
    font-size: 2.2rem;

}
#box11{
    font-size: 1.8rem;
    width: 80%;
}

#spaceship{
-webkit-animation-duration: 3s;
        animation-duration: 3s;
}
#butt{
    top: 110dvh;
    

}
#lets{
    font-size: 1.3rem;

}
#typing-container{
    border: 1px solid #11ebce;

}

#website-content nav ul{
 width: 15dvw;
 



}
#website-content {
    overflow: hidden;
   

}
#website-content p{
    margin: 0;
    font-size: .7rem;
    
    
    

     
}
#website-content h1{
    font-size: 1.1rem;

}

.contact-box {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%; /* Adjust width for smaller screens */
}

.card input {
    width: 100%; /* Adjust input width for smaller screens */
}

.submit {
    margin-top: 3dvh; /* Adjust margin for smaller screens */
}
#website-content nav ul li{
    font-size:9px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 2px;
    gap: 1px;
   
}

}


/* Responsive adjustments for specific elements */
@media only screen and (max-width: 600px) {
    /* Adjust styles for specific elements for small screens */
 
        .aboutme{
            height: 30dvh;
            
          
            padding: 0px;
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
           
            top: dvh;
            left: 10%;
           
            
            
            
    
        }
    .about-content{
        left: 20%;
        top: 0;margin-bottom: 20px;
        
      
    
    }
    .logo img{
   
        height: 4rem;
        border-radius: 40%;
        margin-left: 10%;
       
        width: 3.5rem;
    }

    .thew{
        max-width: 30dvw;
        margin-top: 20px;
        
        
        
        max-height: 30dvh;
    
    }
    .webani{
        top: 18dvh;
        width: auto;
        right: 55px;
      
    }
    .phot img{
      
        max-height: 35dvh;
        aspect-ratio: 3/2;
    }
    .phot p{
        font-size: 1.1rem;
    }
    .box{
        height: 150dvh;
    
    }
    #onet, #twot {
    width: 40dvw;
    
    }
    .plant{
        padding-top: 0;
        top: 0;
        padding: 0;
    
    }

    #about{
       height: 85dvh;
    }
 
    .realme{
      
 
     left: 47dvw;
     line-height: 10px;
     max-height: 40dvh;
    }
    .realme h1{
        line-height: 17px;
        margin-top: 2px;

    }
    .realme h3{
        line-height: 12px;
        margin-top: 0;
        font-size: .6rem;
    }                                                
    
    .aaaaa{
        font-size: .6rem;
        -webkit-margin-before: .5em;
                margin-block-start: .5em;
        -webkit-margin-after: 1em;
                margin-block-end: 1em;
        -webkit-margin-start: 0px;
                margin-inline-start: 0px;
        -webkit-margin-end: 0px;
                margin-inline-end: 0px;
        font-weight: bold;
    
    }
 
    .inneraaa{
        line-height: 15px;
        margin: 0;
    
    }
    h3{
        font-size: .9rem;
    }
    .astro{
        height: auto;
        width: auto;
    
    }
    .skillss{
        max-width: 120dvw;
        

    
    }
    .skillcont{
        padding: 10px;
        max-height: 70dvh;
        
        max-width: 100dvw;
    
    }
    .skill{
    margin-bottom: 5px;
    padding: 2px;
   
    
    }
    .skill-name{
        font-size: 0.7rem;
        color: #05fddc;
                                                  
    }
    .progress-bar{
        height: .4rem;
    
    }

    .planet{
        height: 20rem;
        margin-left: 1px;
        width: 20rem;
    }
    
    .contact-container{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        height: 80dvh;
       
    }
    .contact-box{
        height: 30dvh;
    }
    .object-container{
        max-height: 50dvh;
        margin-bottom: 0;
    }
    .lasttxt{
      top: 0;
    }
    .textt{
     margin-top: 370px;
    }
    .logo1{
        
        width: 40px;

       
    }


  
.card{
    height: 40dvh;
   
}

.containerfoot{
    height: 120dvh;
    position: relative;
    width: 100%;
  
    
}
.contact-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
   
}
.object-container{
    height: 45dvh;
    width: 60dvw;
    left: 15dvw;
   
    position: absolute;
    bottom: 0;
}
.contact-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-height: 50dvh;
    background-color: #080808;
}
.heading{
    font-size: 1.2rem;
}
.input-div{
    margin-top: 17px;
}

.button-div{
    margin-top: 15px;
}
    .top-row,
.bottom-row {
gap: 1dvw;

}
 .bottom-row{
    gap: 5dvw;
 }
    
    
    #jjkj{
        position: absolute;
        top: 0px;
       width: 20dvw;
       left: 30%;
       color: #aae9f8;
       
       font-size: 1.7rem;
    
    
    }
   
   
    @-webkit-keyframes moveShip {
        from {
            bottom: 0; /* Starting position off-screen */
        }
        to {
            bottom: calc(130vh ); /* Ending position off-screen */
            -webkit-transform: rotate(40deg);
                    transform: rotate(40deg);
            left: 55%;
        }
    }
   
   
    @keyframes moveShip {
        from {
            bottom: 0; /* Starting position off-screen */
        }
        to {
            bottom: calc(130vh ); /* Ending position off-screen */
            -webkit-transform: rotate(40deg);
                    transform: rotate(40deg);
            left: 55%;
        }
    }
  
    #one{
        height: 35dvh;
      
    }
    #twot{
        font-size: .7rem;
      
    
    }
    #onet{
        font-size: 0.7rem;
    }
    
  
    
    #bigtext{
        font-size: 1.3rem;
        width: 40dvw;

}
#four{
    max-height: 35dvh;
}

  
    #box10{
        font-size: 1.8rem;
   margin-top: 20px;    
    }
    #box11{
        font-size: 1.6rem;
        width: 80%;
    }
    
    #spaceship{
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    }
    #butt{
        top: 125dvh;
        
    
    }
    #lets{
        font-size: .9rem;
        
    
    }
    #typing-container{
        border: 1px solid #11ebce;
    
    }
    #typing-text{
    max-height: 30dvh;
    max-width: 40dvw;
    }
    #website-content nav ul{
     width: 15dvw;
     
    
    
    
    }
    .webani{
        width: 50dvw;
        right: 0;
    }

    .logo1{
       
        height: auto;
        width: 8dvw;
       
    }
    #website-content {
        overflow: hidden;
        width: 40dvw;
        border: 4px solid #11ebce;
       
    
    }
    #website-content p{
        margin: 0;
        font-size: .6rem;
        
        
        
    
         
    }
    #website-content h1{
        font-size: .9rem;
    
    }
   
    #website-content nav ul li{
        font-size:8px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: 2px;
        gap: 1px;
       
    }
    

    }
    
/* Responsive adjustments for specific elements */
@media only screen and (max-width: 400px) {
    /* Adjust styles for specific elements for extra small screens */
  
.about-content{
    background-color: #090014;

}
nav ul li{
    gap: 1px;
}
nav ul li a{
    font-size: .5rem;
    gap: 1px;
   


}
#about{
 height: 90dvh;
}

.thew{
    font-size: .5rem;

}
.phot1{

display: -webkit-box;

display: -ms-flexbox;

display: flex;
gap: 15px;

}

#bigtext{
    font-size: 1.3rem;
    position: absolute;
    top: 10%;
    left: 25%;
}

.webani{
    position: absolute;
    top: 39%;
    left: 25dvw;
    width: 50dvw;
    height: 45dvh;
}

.realme{
    bottom: 0;
 width: 30dvw;
 max-height: 37dvh;
}
#lets{
    font-size: .5rem;
    line-height: 9px;
  
}
.logo img{
   
    height: 3rem;
    border-radius: 40%;
    margin-left: 10%;
   
    width: 2.5rem;
}
.aaaaa{
font-size: .4rem;
margin-top: 2px;
line-height: 3px;
}
.realme h3{
    font-size: .4rem;
    line-height: 7px;
}

#one{
    height: 6rem;
    width: 5rem;
}

.phot p{
font-size: .6rem;
}
.phot img{
   height: 6rem;
   width: 5rem;
}
#four{
    height: 6rem;
    width: 5rem;
}
.spaceofphot{
    font-size: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#jjkj{
    top: 0;
    position: absolute;
    font-size: 1.4rem;

}
#onet{
font-size: .62rem;
}
#twot{
    font-size: .64rem;

}

#smalltext{
    margin-top: 20px;
    left: 10%;
    font-size: .8rem;
    top: 70dvh;
}

  
@-webkit-keyframes moveShip {
    from {
        bottom: 0; /* Starting position off-screen */
    }
    to {
        bottom: calc(135vh ); /* Ending position off-screen */
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        left: 42%;
    }
}
  
@keyframes moveShip {
    from {
        bottom: 0; /* Starting position off-screen */
    }
    to {
        bottom: calc(135vh ); /* Ending position off-screen */
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        left: 42%;
    }
}

#typing-text{
   max-height: 20dvh;
   opacity: 1;
   max-width: 40dvw;
    

}
.box{
    overflow: hidden;
   
}
.plant{
   padding-right: 50px;
   padding-left: 100px;
   top: 50px;

    
}
#box10{
    position: absolute;
    left: 0;

    font-size:1.3rem;
    

}
.plant p{

    margin-left: 50px;
}
.planet{
    height: 11rem;
    position: absolute;
    left: 45dvw;
    z-index: 4;
    width: 11rem;
}
#website-content{
max-height: 28dvh;
width: 100%;
position: absolute;

padding-right: 5px;
padding-bottom: 10px;
margin: 0;

opacity: 0;


}
#box11{
    font-size: 1.1rem;
}
#spaceship{
    max-height: 35px;
    z-index: 6;
    width: 25px;
}

#website-content nav ul li{

 font-size: 0.42rem;
}
#website-content h1{
    font-size: 0.9rem;
}
#website-content p{
   

    font-size: 0.53rem;
    margin-bottom: 200px;
}

.object-container{
    left: 15%;
}
.lastetxt{
    font-size: .9rem;
}
}
.sphere-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 13dvh;
    position: absolute;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .top-row,
  .bottom-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 20px;
  }

  .circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /* Default background color */
    margin: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .circle img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 100%;
  }

  @media (max-width: 768px) {
    .circle {
      width: 110px;
      height: 110px;
    }
 
  }
  @media (max-width: 400px) {
    .circle {
        width: 90px;
        height: 90px;
      }
   

  }
  /* done here finnaly */
  #bigtext{
    text-transform: uppercase;
    background-image: -o-linear-gradient(
      315deg,
      #3c0cec 0%,
      #a250fa 29%,
      #c40444 67%,
      #09edfd 100%
    );
    background-image: linear-gradient(
      -225deg,
      #3c0cec 0%,
      #a250fa 29%,
      #ff1361 67%,
      #05fddc 100%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: textclip 3s linear infinite;
            animation: textclip 2s linear infinite;
    display: inline-block;
        
    
  }
  @keyframes textclip {
    to {
      background-position: 200% center;
    }
  }
  .error {
    color: red;
    font-size: 0.8em;
    font-style: italic;
    margin-top: 5px;
    display: block;
}
.object-container{
    background-color: #007bff;
    background: none;
}
model-viewer{
    width: 100%;
    height: 100%;
    background-color: #080808;
}
.skill-name{
    color: #05fddc;
}
#jjkj {
    color: #f53d05;
    width: 40%;
    border-bottom: #05fddc solid 2px;
  
    transition: all 0.5s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add box shadow *//* Add relative positioning for absolute border */
}

#jjkj::before,
#jjkj::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    transition: all 0.5s ease-in-out;
}

#jjkj:hover::before,
#jjkj:hover::after {
    width: calc(100% + 6px); /* Adjust for border width */
    height: calc(100% + 6px); /* Adjust for border width */
}

#jjkj::before {
    top: -3px;
    left: -3px;
    border-top-color: #05fddc;
    border-left-color: #05fddc;
}

#jjkj::after {
    bottom: -3px;
    right: -3px;
    border-bottom-color: #05fddc;
    border-right-color: #05fddc;
}