:root{
--text: rgba(255, 255, 255, 0.92);
--text2:rgba(0, 101, 168, 0.92);
--radius: 15px;
--border2: rgba(72, 0, 172, 0.22);
--design1: rgba(173, 188, 255, 0.71);
--tshadow: -1px -1px 0 rgb(57, 104, 233),
    1px -1px 0 rgb(57, 104, 233),
    -1px 1px 0 rgb(57, 104, 233),
    1px 1px 0 rgb(57, 104, 233);

--design2:rgba(60, 62, 69, 0.71);
--design3:rgba(83, 129, 255, 0.71);

--bg-color1: rgb(2, 0, 72);
--bg-color2: rgb(104, 121, 188);
--color1: 25,90,220;
--interactive-color: 190,110,255;
--circle-size: 65vmin;
--blending: hard-light;
--interactive-size: 240px;

  --bshadow: 0 0 0 4px rgba(0, 0, 0, 0.10);

}


@keyframes ultMotion{
    0%{
        transform: translate(-30%,-10%) rotate(0deg);
    }

     25%{
        transform: translate(10%,-30%) rotate(90deg);
    }

     50%{
        transform: translate(30%,10%) rotate(180deg);
    }

     75%{
        transform: translate(-10%,30%) rotate(270deg);
    }

     100%{
        transform: translate(-30%,-10%) rotate(360deg);
    }

}

.sidebar-btn{
    background: transparent;
    border:0;
    padding: 5px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: var(--bshadow);
transition: all 1250ms cubic-bezier(0.19,1,0.22,1);
opacity: 0.8;
}



.sidebar-btn img{
    width: 30px;
    height: 30px;
    display: block;
}

.sidebar-btn:hover{
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 
    inset 0 0 22px
     rgba(255, 255, 255, .7),
     0 0 25px rgba(255, 255, 255, .4);

}


.sidebar{
    position: fixed;
    top:14px;
    left:14px;
    z-index:1000;
    width: fit-content;
}

.sidebar-panel{
    display: flex;
    position: absolute;
    top:0;
    gap:20px;
    align-items: center;
    left: calc(100% + 20px);
    padding:5px;
    border: 1px solid var(--border2);
    background:rgba(0, 19, 71, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    box-shadow: var(--bshadow);
    opacity: 0;

    transform: translateX(-15px);

    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.sidebar.open .sidebar-panel{
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}

.sidebar-link{
    text-decoration: none;
    color: var(--text);
    border-radius: 15px;
}

.sidebar-link:hover{
    background: rgba(0, 0, 0, 0.441);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;

}





.gradient-bg{
    position: fixed;
    z-index: 0;
    inset:0;
    pointer-events: none;
    background: linear-gradient(40deg,var(--bg-color1),var(--bg-color2));
}


svg{
position: absolute;
width: 0;
height: 0;
}

.gradient-container{
    filter: url(#goo);
    width: 100%;
    height: 100%;

}

.g1{
    position: absolute;
background: radial-gradient(circle at center,rgba(var(--color1),0.8)0%,
rgba(var(--color1),0)50%)
no-repeat;
opacity: 1;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc((50% - var(--circle-size)) /2);
    left: calc((50% - var(--circle-size)) /2);
    animation: 
    ultMotion 25s ease-in-out infinite;
}

.interactive{
    position: absolute;
    background: radial-gradient(circle at center, rgba(
        var(--interactive-color),0.8)0,
        rgba(var(--interactive-color),0)50%)
        no-repeat;
        opacity: 0.7;
        top:0;
        left:0;
        border-radius: 50%;
        height: var(--interactive-size);
        width: var(--interactive-size);
        mix-blend-mode: var(--blending);
        will-change: transform;
}

.navbar{
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(0, 0, 0, 0.25);
    justify-content:flex-end;
}

.navbar ul{
  display: flex;
  flex-wrap: wrap;    
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
}



.navbar a{
        text-decoration: none;
    color:aliceblue;
    text-shadow: var(--tshadow);
        text-align: center;
        display: block;
        transition: opacity .5s ease, background .5s ease, transform .5s ease;
        padding: 5px;
        font-size: medium;
        position: relative;
          white-space: nowrap;  

}
/* Global mobile sanity */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden; 
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.navbar a:hover{
    opacity: 0.6;
    transform: translateY(-1px);
    background: rgba(0, 19, 71, 0.6);
}

.navbar a::after{
    content:"";
    position: absolute;
    left:10px;
     right: 10px;
     bottom:5px;
     height: 5px;
         background: rgba(49, 90, 201, 0.1);
         transform-origin: center;
         transition: transform .10s ease;
         transform: scaleX(0);

}

.navbar a:hover::after{
    transform: scaleX(1);
}

.start-header h1{
    color:aliceblue;
    text-shadow: var(--tshadow);

font-family: "Buda", serif;
font-weight: 300;
  font-style: normal;
  font-size:xx-large;
}

.main-subtext{
    color:aliceblue;
    text-shadow: -1px -1px 0 rgb(36, 84, 216),
    1px -1px 0 rgb(36, 84, 216),
    -1px 1px 0 rgb(36, 84, 216),
    1px 1px 0 rgb(36, 84, 216);

    font-family: "Buda", serif;
font-weight: 300;
  font-style: normal;
  font-size: 15px;
  margin-left: 10px;
}

.skills{
    display: flex;
    justify-content: center;
    padding: 10px 15px 0;
    padding-bottom: 25px;

}
.skills ul{
    flex-wrap: wrap;
    justify-content: center;
align-items: center;
display: flex;
    list-style: none;
    margin: 0;
        gap: 70px;
        padding: 15px 15px;
        border-radius: var(--radius);
        border:1px solid var(--border2);
        box-shadow: 0 10px 25px rgba(66, 0, 159, 0.1);

}

.skills li{
    text-decoration: none;
    color:aliceblue;
    text-shadow: -1px -1px 0 rgb(95, 0, 227),
    1px -1px 0 rgb(95, 0, 227),
    -1px 1px 0 rgb(95, 0, 227),
    1px 1px 0 rgb(95, 0, 227);
        font-size: medium;
        padding: 10px 15px;
        border: 1px solid rgb(0, 0, 0);
    color: var(--text);
    transition: transform .5s ease, background .5s ease, border-color .5s ease;
    border-radius: 1000px;

}

.skills li:hover{
    transform: translateY(-1px);
    background: rgba(1, 32, 120, 0.596);
    border-color: rgb(0, 0, 0);
}

.start-para p{
    text-align: center;
    color: aliceblue;
    text-shadow: -1px -1px 0 rgb(3, 11, 31),
    1px -1px 0 rgb(3, 11, 31),
    -1px 1px 0 rgb(3, 11, 31),
    1px 1px 0 rgb(3, 11, 31);
          font-family: "Buda", serif;
font-weight: 300;
  font-style: italic;
  margin-right: 5px;
  padding-top: 35px;
}

header.start-header{
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 20px 120px;
    gap:20px;

}

body > :not(.gradient-bg){
      font-family: "Buda", serif;
      font-size: 1rem;
      line-height: 2;
      position: relative;
      z-index: 1;
}

.my-photo-container img, .my-resume-container img{
    border: 1px solid rgb(57, 104, 233);
    border-radius: 0.7px;
    padding: 10px;
    transition: .5s ease;

}
.my-photo-container img:hover, .my-resume-container img:hover{
    border: 1px solid rgb(26, 70, 190);
    border-radius: 2px;
    padding: 10px;
    opacity: 0.6;

}
.my-photo-container, .my-resume-container{
    
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 10px;
    gap: 10px;
}


.photo1,.photo2,.photo3, .resume1{
    position: relative;
}

.photo1:hover, .photo2:hover, .photo3:hover, .resume1:hover{
    opacity: 1;
}

.main-title{
    text-align: left;
    margin-right:auto;
}

.main-para{
 text-align: left;
    color: aliceblue;
    text-shadow: -1px -1px 0 rgb(3, 11, 31),
    1px -1px 0 rgb(3, 11, 31),
    -1px 1px 0 rgb(3, 11, 31),
    1px 1px 0 rgb(3, 11, 31);
          font-family: "Buda", serif;
font-weight: 300;
  font-style:normal;
    margin-left: 10px;

}

.main-image-content1{

    padding: 10px;
}


footer {
    text-align: left;
    color: aliceblue;
    text-shadow: -1px -1px 0 rgb(47, 33, 128),
    1px -1px 0 rgb(47, 33, 128),
    -1px 1px 0 rgb(47, 33, 128),
    1px 1px 0 rgb(47, 33, 128);
          font-family: "Buda", serif;
font-weight: 300;
  font-style: italic;
 text-align: center;
}
.courses h2{
        color:aliceblue;
        flex: 0 0 100%;
        margin: 0 0 15px;
        text-shadow:var(--tshadow);
        font-family: "Buda",serif;
        font-weight: 300;
}

.project-section,.certif-section, .other-certif-section,.contact-section1 h1{
 color:aliceblue;
    font-family: "Buda",serif;   
}


.project-section h2, .certif-section h2, .other-certif-section h2{

    font-size: xx-large;
      margin-left: 10px;

}
.project-ol, .certif-list{
    list-style: none;
}


.project-link{
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid whitesmoke;
 border-radius: 1000px;

        text-shadow: var(--design2);
        color: var(--text);
        text-decoration: none;
            transition: opacity .5s ease, background .5s ease, transform .5s ease;


}
.project-title{
    font-size:x-large;
    
}
.project-part, .certif-span, .contact-form{
    color: var(--design1);
}

.project-link:hover{
    transform: translateY(-2px);
    opacity: 0.7;
    background: rgba(57, 104, 233,0.25);
}

.submitbtn{
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid rgb(100, 0, 0);
 border-radius: 1000px;

        text-shadow: var(--design3);
        color: var(--text2);
        text-decoration: none;
            transition: opacity .5s ease, background .5s ease, transform .5s ease;

}
.submitbtn:hover{
    transform: translateY(-1px);
    opacity: 0.9;
    background: rgb(252, 0, 218);
}

.courses{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 20px;
    align-items: flex-start;
    justify-content: flex-start;
}
.course-item{
    color:aliceblue;
    font-family: "Buda",serif;
        font-weight: 300;
        border-radius: 1000px;
        border: 2px solid rgb(3, 11, 31);
        background: rgba(69, 64, 64, 0.71);
        width: fit-content;
        white-space: nowrap;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
        
}

.course-design{
    color: var(--design1);
}

.course-section{
        color: var(--design1);
          margin-left: 10px;

        

}

.contact-section1{
    align-items: center;
    justify-content: center;
    display: flex;
        flex-direction: column;

}

.contact-section2{
    align-items: center;
    justify-content: center;
    display: flex;
}

.contactmsg{
        font-family: "Buda",serif;
        font-weight: 1000;
        color: var(--design1);
        text-align: center;
        margin-bottom: 12px;

}

.contact-form input,
.contact-form textarea{
  width: 100%;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce){
  .gradient-bg *{
    animation: none !important;
    transition: none !important;
  }
}

.navbar, .sidebar { position: relative; z-index: 50; }
.navbar ul{
  display: flex;
  flex-wrap: wrap;      
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
}

.navbar a{
  white-space: nowrap;  
}

@supports (-webkit-touch-callout: none){
  .gradient-container { filter: none !important; }
}

@media (max-width: 768px){
  .navbar { justify-content: center; }
  .navbar ul{
    padding: 0.5rem 0.75rem;
    gap: 0.35rem 0.6rem;
  }
  .navbar a{
    font-size: 14px;
    padding: 4px 8px;
  }
}