html, body {
    height:100%;
    margin: 0;
    padding: 0;
    
}
html {
    scroll-behavior: smooth;
}

body {
   
    position: absolute;
    background-attachment: fixed;
    display: flex;
    align-content: center;
    /* justify-content: center; */
    text-align: center;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    padding: 1rem;
    overflow-x: hidden;
   
}

i {
    border-style: solid;
    border-color: #ffffff;
}

#top-nav {
    position: relative;
    text-align: left;
    width: 100%;
    top:0;
    border-radius: 10px;

}


#nav-toggle {
    display: none;
}

a {
    color:coral;
    font-weight: bold;
    text-decoration: none;
}

/*Gradient background animation*/

body {
    background: linear-gradient(-45deg, #013301, #191f19, #031b00, #345f2a);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

 
/*Job Positions animation*/
.positions {
    flex-direction: column;
    font-size: 1.3rem;
    font-weight: bold;
    overflow:hidden;
    width: 20ch;
    white-space: nowrap;
    animation:blink-caret 0.75s step-end infinite, typing 6s steps(20) 1s 1 normal both;
}
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: rgb(0, 92, 15);
  }
}

#myDetails, #tech-skills, #soft-skills, #projects, #insights {
    position: relative;
    background-color: #000000bd;
    color: rgb(255, 255, 255);
    border-radius: 29%;
    padding: 1rem;
    margin-top: 2rem;
    text-align: center;
    align-items: center;
    border-color: #ffffff;
    border-style: solid;
    }

    #myDetails:hover, #tech-skills:hover, #soft-skills:hover, #projects:hover, #insights:hover {
        background-color: #1f9c006b;
        color: rgb(255, 255, 255);
        border-radius: 21%;
        /* padding: 1rem; */
        text-align: center;
        align-items: center;
        transform: transformY(-5px);
        transform: translateX(-20px);
        transition: transform 0.9s ease;
        box-shadow: 4px 4px 4px black;

    }




#headers {
    margin-top: 10rem;
    padding-top: 1rem;
    color:rgb(255, 255, 255);
    background-color: #000000bd;
    border-radius: 10%;
    margin-bottom: 10rem;
}

/* Neon glow animation for headers */
#header {
    animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
  from {
    text-shadow:
   
      0 0 25px #008688b9,
      0 0 30px #0c0074,
      0 0 35px #004750;
  }
  to {
    text-shadow:
      0 0 50px #858585,
      0 0 60px #13e700,
      0 0 70px #ffffff;
  }
}

#subheader {
    font-family: 'Courier New', 'Courier New', Courier, monospace;
}

#nav-menu {
    display: none;
    flex-direction: column;

}

/* #navigationPane:hover #nav-menu a {
    display:block;
    text-align: left;


} */

#nav-toggle {
    background-color: rgb(21, 253, 0);
    cursor: pointer;
    width: 50px;
    height:auto;
    border-style: solid;
    border-radius: 15%;
    margin-left: 10%;
}



#connect {
    background-color: #004750;
    width: 100%;
    height:auto;
    border-radius: 10%;
}

@media(max-width: 600px) {

    #top-nav {
        font-size: 1.28rem;
        color: white;
        background-color: #000000f6;
        text-align: center;
    }

    /*Commited Changes to fix unwanted movements*/
    #myDetails {
        position: relative;
        }
        #positions {
            position: absolute;
        }
        #myDetails p {
            margin-top: 4rem;
        }

        #connect {
            margin-bottom: 2px;
            background-color: whitesmoke;
        }


    body{
    background-image: url('Background.jpg');
    background-size: 99% 100%;
    background-attachment: fixed;
    }

    


    #navigationPane {
        display: flex;
        justify-content: start;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent;
        color: rgb(228, 228, 228);
    }

    #headers {

        width: 100%;
        color: rgb(255, 255, 255);
    }
}
@media (min-width: 601px) {
    #positions {
        margin-left: 39%;
    }
    #nav-toggle {
        display: none;
    }

    /*Commited Changes to fix unwanted movements*/
        #positions {
            position: absolute;
            margin-left: 40%;
        }
        #myDetails p {
            margin-top: 4rem;
        }

    body {
        max-width: 100%;
        margin: 0;
        height: 100vh; /* Full viewport height */
        display: flex;
        flex-direction: column;
        align-items: center;     /* Vertical center */
    }
    #headers {
        background: none;
        margin-bottom: 17rem;
    }

    #top-nav {
        background: none;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 2rem;
    }



    #myDetails, #tech-skills, #soft-skills, #projects, #insights {
    padding-left: 10rem;
    padding-right: 10rem;
    position: relative;
    background-color: transparent;
    color: rgb(255, 255, 255);
    border-radius:100px;
    margin-top: 4rem;
    text-align: center;
    align-items: center;
    border: none;
    font-size: 1.2rem;
    }

    #connect {
        margin-bottom: 1rem;
        border-radius: 1px;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-top: 3rem;
    }

    a {
        color: #00e1ffd0;
    }
}