body
{
    margin:0px;
    background-color: rgb(255, 255, 255);
    padding:0px;
}

.headingsection
{
    background-color: rgba(255, 255, 255, 0.803);
}

.heading
{
    display:flex;
    justify-content: right;
}

.default 
{
    display: block;
}

.name
{
    display: fixed;
    text-wrap:nowrap;
    color:rgba(18, 24, 43, 0.81);
    font-style:italic;
    font-family:'Playwrite VN','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:4vmin;
    font-weight:600;
    margin: 40px 0px 0px 50px;

    animation-name : slidename;
    animation-duration: 3s;
}

@keyframes slidename 
{
    from
    {
        color :transparent;
        margin-left:100px;
    }
    to 
    {
        color:rgba(18, 24, 43, 0.81);
        margin-left:50px;
    }
}







.options
{
    display: flex;
    flex-flow:row nowrap;
    justify-content:right;
}

.home
{
    margin-left:2vmin;
}

.projects
{
    margin-right:50px;
}

div button
{   
    background-color: transparent;
    border:none;
    font-family: "Lexend Deca", serif;
    font-weight: 500;
    color:rgba(15, 39, 63, 0.919);
    font-size: clamp(18px,2vmin,36px);
    margin:0px 40px 0px 20px;
}


div button:hover
{
    color:rgba(15, 39, 63, 0.142);
}

.horizontalrule
{
    margin-top: 14px;
    margin-bottom:0px;
    border-color: rgb(0, 0, 0);
}

.abtmehead
{
    font-family: "Lexend Deca", serif;
    color:rgb(241, 242, 245);
    font-size: 6vmin; 
    margin:0px 0px 20px 100px;
    text-shadow: 7px 5px 5px rgb(2, 10, 35);
    
    margin:40px 40px 0px 50px;
}

.abtmehead:hover
{
    text-shadow: 5px 5px 5px rgb(187, 209, 234);
}

.abtpic1 
{
    width: 50vmin;
    height: 50vmin;
}



.img1 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 50px 10px 0px;
}


.aboutsegment
{
    background-image:url(background2.png);
    background-position: center;
    background-size:cover;
    display:none;
    min-height:200vh;
    margin-bottom:500px;
}


.abthead 
{
    padding:50px 0px 20px 30px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:6vmin;
    color:rgba(213, 212, 212, 0.993);
    font-weight:350;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.803);

    animation-name:slidein;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}   

@keyframes slidein 
{
    from
    {
        color :transparent;
        transform: translateX(50px);
    }
    to 
    {
    color:rgba(213, 212, 212, 0.993);
        transform:translateX(0px);
    }
}



.abtdesc
{
    display: flex;
    justify-content: space-between;



}




.abtpass
{
    font-size:2.5vmin;
    color:rgb(255, 255, 255);
    overflow:auto;
    font-family : "Space Grotesk", serif;
    word-wrap: break-word;
    margin-left :30px;
    border-radius: 20px;
    background-color: rgb(22, 20, 17);
    box-shadow: 2px 2px 10px rgb(0, 0, 0);
    backdrop-filter: blur(20px);
    padding: 20px;
    text-shadow:2px 2px 4px rgba(0, 0, 0, 0.686);

    animation-name : descslidein;
    animation-duration: 2s;
}

@keyframes descslidein 
{
    from
    {
        color :transparent;
        transform: translateY(50px);
    }
    to 
    {
    color:rgba(213, 212, 212, 0.993);
        transform:translateY(0px);
    }
}


.abtpic 
{
    height:40vmin;
    width:40vmin;
    margin-left:20px;
    margin-right:20px;
    border-radius: 25px;

    animation-name : picfun;
    animation-duration: 2s;
}

@keyframes picfun 
{
    from 
    {
        transform: rotate(360deg);
        height:0vmin;
        width:0vmin;
    }
    to 
    {
        height:40vmin;
        width:40vmin;
        transform : rotate(0deg);
    }
}










.defaultpage
{
   display: flex;
   justify-content:left;
}

.defaulttext
{
    position:absolute;
    z-index:10;
    font-family: "Lexend Deca", serif;
    color:seashell;
    font-size: 16vmin;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.952);

    animation-name : defaultfun;
    animation-duration:5s;

}

@keyframes defaultfun 
{
    0% 
    {
        font-family : "Space Grotesk", serif;
        font-size:16vmin;

    }
    20% 
    {
        font-family :'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:16vmin;
    }
    40% 
    {
        font-family:"ranchers";
        font-size:16vmin;
    }
    60%
    {
        font-family :Verdana, Geneva, Tahoma, sans-serif;
        font-size:16vmin;
    }
    80% 
    {   
        font-family : 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
        font-size:16vmin;
    }
    100%
    {
        font-family :"Lexend Deca", serif;
        color:seashell;
        font-size:16vmin;
    }
}




.c1
{
    height:90vh;
    width:25vw;
    background-color: rgb(0, 0, 0);
    animation-name: slidedownc1;
    animation-duration: 5s;
}

.c2
{

    height:90vh;
    width:25vw;
    background-color: rgb(25, 36, 46);
    animation-name: slidedownc2;
    animation-duration: 5s;
}

.c3
{
    height:90vh;
    width:25vw;
    background-color: rgb(45, 55, 67);
    animation-name: slidedownc3;
    animation-duration: 5s;
}

.c4
{
    height:90vh;
    width:25vw;
    background-color: rgb(49, 57, 59);
    animation-name: slidedownc4;
    animation-duration: 5s;
}

.c5
{
    height:90vh;
    width:25vw;
    background-color: rgb(151, 157, 158);
    animation-name: slidedownc5;
    animation-duration: 5s;
}

@keyframes slidedownc1 
{
    0% {
        background-color: rgb(84, 213, 64);
    }
    25% {
        background-color: rgb(245, 60, 9);
    }
    50% {
        background-color: rgb(190, 29, 244);
    }
    75% {
        background-color: rgba(235, 222, 40, 0.839);
    }
    100% {
         background-color: rgb(3, 64, 246);
    }
}

@keyframes slidedownc2
{
    0% {
        background-color: rgb(119, 248, 145);
    }
    25% {
        background-color: rgb(243, 98, 62);
    }
    50% {
        background-color: rgb(196, 70, 241);
    }
    75% {
        background-color: rgb(249, 240, 117);
    }
    100% {
        background-color: rgba(45, 80, 239, 0.835);
    }
}

@keyframes slidedownc3 
{
    0% {
        background-color: rgb(131, 245, 182);
    }
    25% {
        background-color: rgb(243, 124, 55);
    }
    50% {
        background-color: rgb(243, 113, 250);
    }
    75% {
        background-color: rgb(249, 227, 139);
    }
    100% {
        background-color: rgba(76, 109, 239, 0.406);
    }
}

@keyframes slidedownc4 
{
    0% {
        background-color: rgb(158, 236, 202);
    }
    25% {
        background-color: rgb(251, 188, 154);
    }
    50% {
        background-color: rgb(247, 165, 233);
    }
    75% {
        background-color: rgb(254, 246, 176);
    }
    100% {
        background-color: rgb(133, 179, 243);
    }
}


@keyframes slidedownc5
{
    0% {
        background-color: rgb(145, 230, 241);
    }
    25% {
        background-color: rgb(255, 212, 188);
    }
    50% {
        background-color: rgb(238, 208, 253);
    }
    75% {
        background-color: rgb(255, 254, 214);
    }
    100% {
        background-color: rgb(144, 173, 242);
    }
}



.contactsegment
{
    display: none;
    position:absolute;
    color:rgb(246, 248, 249);
    text-shadow: 4px 4px 10px rgb(8, 8, 8);

    height:100%;
    width:100%;
    margin:0%;

    background-image: url("contactbg3.png");
    background-size: cover;
    background-position: center;


}



.contactdet
{
    font-family:'Ranchers';
    color:aliceblue;
    font-size: 5vmin; 
    margin:110px 0px 50px 100px;
}



.contactborder
{
    display:flex;
    align-items: center;
    margin:10% 25% 20% 25%;
    flex-direction: column;
    width:45%;
    height:45%;
    padding:20px;

    background-color: rgba(0, 0, 0, 0.388);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    border-style: solid;
    border-color:transparent;
    border-width: .1px;
    box-shadow: 3px 3px 15px rgb(255, 255, 255);    
    font-family: "Lexend Deca", serif;
    font-size:2.5vmin;

    
    animation-name : contactfun;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}


@keyframes contactfun 
{
    25%
    {
        transform : rotatez(5deg);
        scale:1.025;
        box-shadow: 2px 2px 50px rgba(235, 222, 40, 0.839);

    }
    50%
    {
        transform : rotateZ(0deg);
        scale:1;
        box-shadow :transparent;
    }
    75%
    {
        transform : rotateZ(-5deg);
        scale:1.025;
        box-shadow: 2px 2px 50px rgba(235, 222, 40, 0.839);
    }   
    100%
    {
        transform : rotateZ(0deg);
        scale:1;
        box-shadow :transparent;
    }
}


.material-symbols-outlined 
{
  
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 25
}


.contacthead
{
    font-family:"Roboto Condensed", serif;
    font-style: italic;
    color:rgba(254, 253, 250, 0.926);
    margin-bottom: 10%;
    text-shadow: 4px 4px 5px rgb(0, 0, 0);
    font-size: 4vmin;
    font-weight: 500;
}

.instagram
{
    margin:0px 10px 20px 10px;
}


.instagram-icon
{
    color:rgb(250, 251, 252);
    font-size:3.5vmin;
}

.linkedin
{
    margin:0px 10px 20px 10px;
}

.linkedin-icon
{
    color:rgb(250, 251, 252);
    font-size:3.5vmin;
}


.email 
{
    margin:0px 10px 20px 10px;
}


.email-icon
{
    color:rgb(250, 251, 252);
    font-size:3.4vmin;
}



.projectsegment 
{
    display:none;
    position:absolute;
    background-image: url("p10.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top:0px;
}



.pro_heading
{
    font-family: "Rowdies", serif;
    font-weight:800; 
    color:rgba(255, 255, 255, 0.993);
    font-size:4vmin;
    margin:40px 0px 40px 0px;
    text-align:center;
    text-shadow:5px 4px 10px rgba(24, 21, 0, 0.803);
}


.projectlist
{
    display: flex;
    flex-direction: column;
    flex-wrap:nowrap;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.952);
}

.project 
{
   margin:10px 40px 20px 40px;
   background-color: rgba(7, 6, 6, 0.597);
   border-radius: 50px;
   border-color:transparent;
   border-style: solid;
   border-width:0.2px;
   box-shadow:2px 2px 10px rgba(0, 0, 0, 0.816);
   padding:20px;
   backdrop-filter: blur(15px);

   animation-name : projectfun;
    animation-duration: 2s;
}

@keyframes projectfun 
{
    from 
    {
        margin:0px 40px 20px 0px;
    }
    to 
    {
        margin:10px 40px 20px 40px;
    }
}

ph 
{
    color:aliceblue;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:3vmin;
    font-weight:600;
    margin-left :20px;

    text-decoration: underline;
    text-shadow:2px 2px 10px rgba(96, 131, 228, 0.839);
}

desc 
{   
    color:rgb(255, 255, 255);
    margin:10px 10px 10px 20px;
    font-family: "Space Grotesk", serif;
    font-size:2.3vmin;
    font-weight:600;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.686);

}


ts 
{
    font-family: "Rowdies", serif;
    font-weight: 100;
}

.description
{
    display: flex;
}

.image 
{
    border-radius: 20px;
}


.logo 
{
    height:8vmin;
    width:8vmin;
}

.codechef 
{
    height:8vmin;
    width:10vmin;
}


.logoset 
{
    display: flex;
    justify-content: space-around;
    animation-name : logofun;
    animation-duration: 5s;
}

@keyframes logofun 
{
    from
    {
        justify-content : center;
        opacity:0;
    }
    to 
    {  
        opacity :1;
        justify-content : space-around;
    }
}