@media (min-width: 320px){
    @font-face {
        font-family: "Geist";
        src: url("Geist-VariableFont_wght.ttf");
    }
    *{
        margin: 0;
        padding: 0;
        
    }
    :root{
        --titlewhite: #dbd7d7
    }
    html{
        height: auto;
        background-size:cover;
        
        
        
        
    }
    body{
        background-image: url("background.jpg");
        min-height: 100%;
        background-size: 400%;
        background-color: rgb(7, 5, 47);  
    }
    /*--------------------HTML, BODY, ROOT STUFF: END--------------------*/
    
    /*--------------------NAV BAR: BEGIN--------------------*/
    h1{
        font-family: "Geist";
        font-weight: 700;
        font-size: 30px;
        color: var(--titlewhite);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        animation-duration: .4s;
        animation-name: headerdrop;
        /*background: red;*/
        margin-top: 0%;
    }
    header{
        position: sticky;
        background-color: rgba(100, 100, 100, 0.150);
        width: 100vw;
        height: 7%;
        top: 0;
        margin-left: none;
        display: flex;
        justify-content: space-between;
        z-index: 1000;
        text-decoration: none;
        color:rgba(207, 207, 207, 0.9);
        backdrop-filter: blur(5px);
        border-bottom: 1px solid rgb(255, 255, 255, 0.15);
        animation-duration: .4s;
        animation-name: headerdrop;
    }
    .lefthandnav{
       /*background-color: blue;*/
        width: 45%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .logothing{
        display: flex;
        transition: all .15s;
        margin-left: 1%;
        margin-top: -.3%;
        /*background-color: blue;*/
        width: auto;
    }
    .logothing:hover{
        transform: scale(1.03);
    }
    .logo{  
        margin-left: 2%;
    }
    .logodesc{
        font-size: 12px;
        margin-top: 12%;
    }
    .options{
        text-decoration: none;
        font-size: 10px;
        /*background:rgb(185, 13, 191);
        border: 3px solid black;*/
        width: 100%;
        gap: 4px;
        margin-left: 2%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: "Geist";  
    }
    a {
        color: inherit;
    }
    .options * {
        /*background: green;
        border: 3px solid black;*/
        height: 30%;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
        transition: all .15s;
        color:rgba(207, 207, 207, 0.9);
    }
    .options *:hover{
        color:rgba(244, 255, 254, 0.9);
        cursor: pointer;
        transform: scale(1.03);
    }
    .righthandnav{
        width: 40%;
        /*background-color: red;*/
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .righthandoptions{
        /*background-color: rgb(171, 99, 4);*/
        width: 100%;
        margin-right: 5%;
        font-size: 10px;
        font-family: "Geist";
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .righthandoptions *{
        height: 30%;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
        transition: all .15s;
        color:rgba(207, 207, 207, 0.9);
    }
    .righthandoptions *:hover {
        color:rgba(244, 255, 254, 0.9);
        cursor: pointer;
        transform: scale(1.03);
    }
    .GetStarted {
        font-size: 10px;
        font-family: "Geist";
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
        width: auto;
        transition: all .15s;
        text-decoration: none;
        border-radius: 5px;
        font-weight: 500;
        color:rgba(207, 207, 207, 0.9);
        background: linear-gradient(70deg, rgba(85,21,128,1) 0%, rgba(22,44,186,1) 99%);
        text-align: center;
        transition: all .2s ease;
    }
    .GetStarted:hover {
        background: linear-gradient(70deg, rgb(107, 24, 162) 0%, rgb(33, 57, 213) 99%);
        transform: scale(1.02);
        color: rgba(244, 255, 254, 0.9);
        cursor:pointer;
    }
    .Login{
        margin-left: 40%;
        margin-right: 10%;
    }
    
    /*--------------------NAV BAR: END--------------------*/
    
    /*--------------------ABOUT PAGE: BEGIN--------------------*/
    
    .aboutcontainer{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        display: flex;
        font-family: "Geist";
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        width: 90%;
        align-items: center;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .15s;
        animation-name: boxdrop;
    }
    .aboutbox1{
        display:flex;
        width: 90%;
        /*background-color: brown;*/
        justify-content: center;
        align-items: center;
        gap: 2%;
        font-size: 10px;
        font-weight: 400; 
    }
    .aboutbox2{
        text-align: center;
        width: 90%;
        /*background-color: blue;*/
        justify-content: flex-start; 
        gap: 2%;
        font-size: 10px;
        font-weight: 400;
        flex-direction: row;
        display: flex;
    }
    .aboutbox2desc{
        /*background-color: blue;*/
        text-align: left;
        align-items: center;
        display: flex;
        margin-left: -1rem;
        font-size: 10px;
        width: auto;
        font-weight: 400;
    }
    .aboutbottom{
        margin-bottom: 8%;
        margin-top: auto;
        margin-bottom:auto;
    }
    .profpic {
        border-radius: 500px; 
        transition: all .2s ease;
        filter: brightness(60%);
    }
    .profpic:hover {
        transform: scale(1.05);
        cursor: pointer;
        filter: brightness(80%);
    }
    .gallerysection{
        transition: all .3s ease;
        display: flex;
        /*background-color: red;*/
        justify-content: flex-start;
        min-width:  130px;
        max-width: 130px;
        flex-grow: 0;
        margin-right: auto;
    }
    .gallerysection *{
        
        margin-right: auto;
        height: 60px;
        width: 60px;
        transition: all .3s ease;
    }
    .gallerysection img:hover{
        z-index: 20;
        transform: scale(1.2);
        transform: translateY(-10%);
        filter:brightness(85%);
    
    }
    .gallerysection:hover img:not(:hover){
        transform: scale(.95);
        transform: translateY(7%);
        filter:brightness(40%);
        
    }
    .img3{  
        margin-left: -60px;
        filter:brightness(60%);
    }
    .img2{
        margin-left: -60px;
        filter: brightness(60%);
    }
    .img1{ 
        filter:brightness(60%);
    }
    .img6{
        
        margin-left: -35px;
        filter:brightness(60%);
        height: 50px;
        width: 40px;
    }
    .img5{
        margin-left: -35px;
        filter: brightness(60%);
        height: 50px;
        width: 40px;
    }
    .img4{
        margin-left: 10px;
        filter:brightness(60%);
        height: 50px;
        width: 40px;
    }
    .aboutbox3{
        text-align: center;
        width: 90%;
        /*background-color: brown;*/
        justify-content: flex-start;
        left: 3%;
        right: 3%;
        margin-top: 40%;
        position: absolute;
        gap: 2%;
        font-size: 19px;
        font-weight: 400;
        height: 5%;
    }
    .aboutme{ 
        font-size:22px;
        margin-top:.5%;
        /*background-color: blueviolet;*/
        justify-content: center;
        text-align: center;
    }
    .aboutbox2 h3{
        margin-top: -1.5%;
    }
    .aboutbox3 h3{
        margin-top: -1.5%;
    }
    .aboutbox3desc{
        /*background-color: blue;*/
        text-align: left;
        position: absolute;
        left: 25%;
        margin-top: -2.5%;
        font-size: 19px;
        font-weight: 400;
    }
    
    /*--------------------ABOUT PAGE: BEGIN--------------------*/
    /*--------------------FEATURE PAGE: BEGIN--------------------*/
    
    .featurecontainer{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        display: flex;
        font-family: "Geist";
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 90%;
        height: 85vh;
        align-items: center;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .15s;
        animation-name: boxdrop;
    }
    .featurebox1 {
        display: flex;
        align-items: center; 
        width: 90%;
        height: 90%;
        /*background-color: brown;*/
        justify-content: start; 
        margin-top: -10%; 
        position: relative;
        gap: 10px;
        font-size: 19px;
        font-weight: 400;
        color: rgba(183, 183, 183, 0.9);
        transition: all 0.2s ease;
    }
    .featurebox1:hover {
        transform: scale(1.01);
        color: rgba(237, 236, 236, 0.9);
    }
    .numbercircle {
        background-color: rgb(46, 46, 46);
        box-shadow: 0 0 10px 2px rgba(98, 229, 238, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        border-radius: 50%;
        align-items: center;
        display: flex;
        justify-content: center;
        height: 20px;
        width: 20px;
        font-size: 12px;
        z-index: 100;
    }
    .featureboxdesc {
        position: relative;
        font-size: 10px;
        text-align: left;
        width: 95%; 
        color:rgba(207, 207, 207, 0.9);
    }
    .featureboxdesc h4 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .featureboxdesc p {
        font-size: 12px;
        margin-top: 5px;
    }
    
    /*--------------------FEATURE PAGE: END--------------------*/
    /*--------------------HOME PAGE: BEGIN--------------------*/
    
    .HOMEBOX{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height: 100%;
        width: 90vw;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        margin-bottom: 2%;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color: rgba(183, 183, 183, 0.9);
        animation-duration: .3s;
        animation-name: boxdrop;
    }
    .HOMEBOX h3{
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
    }
    .HOMEBOX h4{
        font-size: 16px;
        font-weight: 700;
        line-height: 160%;
        color:rgba(207, 207, 207, 0.9);
    }
    .HOMEBOX * {
        font-family: "Geist";
        margin-left: auto;
        margin-right: auto;
    }
    .homepagebox{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 90%;
        align-items: flex-start;
        /*background-color: blue;*/
        font-family: "Geist";
        margin-top: 2%;
        margin-bottom:2%;
    }
    .homepagebox img{
        width: 70px;
        height: 70px;
    }
    .homepagebox *{
        margin-left: 0%;
    }
    .cardshot{
        filter: brightness(60%);
        height: 70px;
        width: 80px;
        margin-left: 15px;
        
    }
    .homepagebox1{  
        display:flex;
        justify-content: flex-start;
        width:100%;
        transition: all 0.2s ease;
        font-size: 12px;
        font-weight: 400;
        line-height: 160%;
    }
    .homepagebox1:hover{
        transform: scale(1.01);
        color:rgba(207, 207, 207, 0.9);
    }
    .homepagebox1 *{
        margin-right: 3%;
        margin-top:auto;
        margin-bottom:auto;
    }
    
    /*--------------------HOME PAGE: END--------------------*/
    /*--------------------PROJECT PAGE: BEGIN--------------------*/
    

    .PROJBOX{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height:80vh;
        width: 90vw;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15%;
        margin-bottom: auto;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .3s;
        animation-name: boxdrop;
    }
    .PROJBOX *{
        margin-left:auto;
        margin-right:auto;
        font-family: "Geist";
    }
    .PROJBOX h1{
        font-size: 20px;
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .PROJBOX h2{
        min-height: 10%;
        overflow-y:auto;
        font-size: 16px;
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .PROJBOX h3{
        font-size: 14px;
        margin-top: -25px;
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .taskarea{
        height: 100%;
    }
    h2{
        /*background: red*/
        height: 5%;
        font-size: 30px;
        text-align: center;
        margin-top: 0%;
    }
    .taskcard{
        margin-top: auto;
        margin-left: 2%;
        margin-bottom: auto;
        margin-right: 2%;
        height: 65%;
        flex-shrink: 0;
        display:flex;
        flex-direction:column;
        background-color:rgb(46, 46, 46);
        padding: 5px;
        box-shadow: 0 0 15px 4px rgb(220, 234, 235, 0.05);
        border: 1px solid rgb(244, 247, 247, 0.05);
        border-radius: 20px;
        min-width: 180px;
        max-width: 180px;
        text-align: center;
        animation-duration: .3s;
        animation-name: carddrop;
        transition:all .15s ease;
    }
    .taskcard:hover{
        display:flex;
        flex-direction: column;
        background-color:rgb(52, 52, 52);
        box-shadow: 0 0 10px 5px rgb(220, 234, 235, 0.1);
        padding: 5px;
        /*border: solid 1px black;*/
        border-radius: 20px;
        min-width: 185px;
        word-wrap: break-word;
        text-align: center;
        transform: scale(1.05);
        font-size: 1.05rem;
    }
    .taskcard h4 { 
        width: 85%; 
        font-size: 14px;
    }
    .taskcard form{
        flex-grow:1;
        width: 90%;
    }
    .taskinputdesc{
        box-shadow: 0 0 15px 4px rgb(220, 234, 235, 0.02);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height:70%;
        width: 100%;
        background-color: rgba(34, 34, 34, 0.05);
        text-align: left;
        border:none;
        resize:none;
        overflow-y:auto;
        color:rgba(207, 207, 207, 0.9);
        font-family: "Geist";
        font-size: 12px;
        border-radius: 15px;
        padding-left:4%;
        padding-right: 4%;
        padding-top: 2%;
        box-sizing: border-box;
    }
    .taskinputtitle{
        box-shadow: 0 0 5px 4px rgb(220, 234, 235, 0.02);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height: 3vh;
        width: 100%;
        background-color: rgba(34, 34, 34, 0.05);
        border:none;
        border-radius:15px;
        text-indent: 2%;
        color:rgba(207, 207, 207, 0.9);
        font-family: "Geist";
        font-size: 14px;
    }
    .projectlink{
        text-decoration: none;
        display: block;
        color:inherit;
        height:100%;
        width: 100%;
    }
    .taskdescription{
        overflow-y: auto;
        padding-bottom:2%;
        max-height: 50%; 
        font-size: 12px;
    }
    .taskcardtitle{
        overflow-y: auto;
        padding-bottom:2%;
        margin-bottom: -2%;
    }
    .taskoptions{
        text-decoration: none;
        display:flex;
        flex-direction: column;
        width: 90%;
        margin-top:auto;
        font-size: 10px;
    }
    .taskoptions *{
        text-decoration: none;
        margin-top:auto;
        margin-bottom: 2%;
        height: 50%;
        padding-top: 1%;
        padding-bottom: 1%;
        font-family: "Geist";
        font-size: 12px;
        width: 90%;
        border-radius: 20px;
        font-weight: 500;
        border:none;
        background-color:rgb(86, 86, 86);
        color:rgba(207, 207, 207, 0.9);
        transition:all .1s ease;
        border: solid 1px rgb(40, 40, 40); 
    }
    .taskoptions *:hover {
        background-color:rgb(104, 103, 103);
        cursor: pointer;
        transform: scale(1.03);
        color:rgba(244, 255, 254, 0.9);
        box-shadow: 0 0 10px 2px rgb(220, 234, 235, 0.1);
    }
    .completed{
        background-color: rgb(16, 78, 2);
    }
    .completed:hover{
        background-color: rgb(7, 120, 7);
    }
    
    /*--------------------PROJECT PAGE: END--------------------*/
    /*--------------------LOGIN/SIGNUP PAGES: BEGIN--------------------*/
    
    .BOX{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height: 90vh;
        width: 85vw;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .15s;
        animation-name: boxdrop;
    }
    .formlabel{
        text-align: center;
        margin-top: 7%;
        margin-left: auto;
        margin-right: auto;
        height: 30%;
        font-size: 18px;  
    }
    .BOX h1 {
        font-size: 24px;
    }
    .BOX h2{
        font-size: 20px;
    }
    .forminput{
        padding-left: 2%;
        height: 40px;
        backdrop-filter: blur(15px);
        background-color:rgba(65, 65, 65, 0.078);
        color:rgba(207, 207, 207, 0.9);
        width: 100%;
        border:none;
        border-radius: 15px;
        font-size: 20px;
        box-sizing: border-box;
    }
    .createbutton{
        display:flex;
        margin-left:auto;
        margin-right:auto;
        margin-top: 40px;
        background: linear-gradient(70deg, rgba(85,21,128,1) 0%, rgba(22,44,186,1) 99%);
        border-radius: 15px;
        font-weight: 500;
        color:rgba(207, 207, 207, 0.9);
        border:none;
        font-size: 18px;
        padding-left: 20%;
        padding-right: 20%;
        padding-top: 5px;
        padding-bottom: 5px;
        font-family: "Geist";
        transition: all .2s ease;
    }
    .createbutton:hover {
        background: linear-gradient(70deg, rgb(95, 21, 140) 0%, rgb(33, 57, 200) 99%);
        transform: scale(1.02);
        color: rgba(244, 255, 254, 0.9);
        cursor:pointer;
    }
    .BOX *{
        margin-left:auto;
        margin-right:auto;
        font-family: "Geist";
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .taskarea {
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 50px;
        width: 90%;
        min-height: 70%;
        margin-top: 2%;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 1%;
    }
    
}
@media (min-width: 1024px){
    /*----------HTML, BODY, ROOT STUFF: BEGIN--------------------*/
    @font-face {
        font-family: "Geist";
        src: url("Geist-VariableFont_wght.ttf");
    }
    *{
        margin: 0;
        padding: 0;
        
    }
    :root{
        --titlewhite: #dbd7d7
    }
    html{
        height: 100%;
        background-size:cover;
        
        
        
        
    }
    body{
        background-image: url("background.jpg");
        min-height: 100%;
        background-size: 160%;
        background-color: rgb(7, 5, 47);  
    }
    /*--------------------HTML, BODY, ROOT STUFF: END--------------------*/

    /*--------------------NAV BAR: BEGIN--------------------*/
    h1{
        font-family: "Geist";
        font-weight: 700;
        font-size: 50px;
        color: var(--titlewhite);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        animation-duration: .4s;
        animation-name: headerdrop;
        /*background: red;*/
        margin-top: 0%;
    }
    header{
        position: sticky;
        background-color: rgba(100, 100, 100, 0.150);
        width: 100vw;
        height: 7%;
        top: 0;
        margin-left: none;
        display: flex;
        justify-content: space-between;
        z-index: 1000;
        text-decoration: none;
        color:rgba(207, 207, 207, 0.9);
        backdrop-filter: blur(5px);
        border-bottom: 1px solid rgb(255, 255, 255, 0.15);
        animation-duration: .4s;
        animation-name: headerdrop;
    }
    .lefthandnav{
    /*background-color: blue;*/
        width: 45%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .logothing{
        display: flex;
        transition: all .15s;
        margin-left: 1%;
        margin-top: -.3%;
        /*background-color: blue;*/
        width: auto;
    }
    .logothing:hover{
        transform: scale(1.03);
    }
    .logo{  
        margin-left: 2%;
    }
    .logodesc{
        font-size: 18px;
        margin-top: 14%;
    }
    .options{
        text-decoration: none;
        font-size: 16px;
        /*background:rgb(185, 13, 191);
        border: 3px solid black;*/
        width: 100%;
        font-size: 16px;
        margin-left: 7%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: "Geist";  
    }
    a {
        color: inherit;
    }
    .options * {
        /*background: green;
        border: 3px solid black;*/
        height: 30%;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
        transition: all .15s;
        color:rgba(207, 207, 207, 0.9);
    }
    .options *:hover{
        color:rgba(244, 255, 254, 0.9);
        cursor: pointer;
        transform: scale(1.03);
    }
    .righthandnav{
        width: 40%;
        /*background-color: red;*/
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .righthandoptions{
        /*background-color: rgb(171, 99, 4);*/
        width: 100%;
        margin-right: 5%;
        font-family: "Geist";
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .righthandoptions *{
        height: 30%;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
        transition: all .15s;
        color:rgba(207, 207, 207, 0.9);
    }
    .righthandoptions *:hover {
        color:rgba(244, 255, 254, 0.9);
        cursor: pointer;
        transform: scale(1.03);
    }
    .GetStarted {
        font-size: 16px;
        font-family: "Geist";
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 5%;
        padding-right: 5%;
        width: auto;
        transition: all .15s;
        text-decoration: none;
        border-radius: 5px;
        font-weight: 500;
        color:rgba(207, 207, 207, 0.9);
        background: linear-gradient(70deg, rgba(85,21,128,1) 0%, rgba(22,44,186,1) 99%);
        text-align: center;
        transition: all .2s ease;
    }
    .GetStarted:hover {
        background: linear-gradient(70deg, rgb(107, 24, 162) 0%, rgb(33, 57, 213) 99%);
        transform: scale(1.02);
        color: rgba(244, 255, 254, 0.9);
        cursor:pointer;
    }
    .Login{
        margin-left: 40%;
    }

    /*--------------------NAV BAR: END--------------------*/

    /*--------------------ABOUT PAGE: BEGIN--------------------*/

    .aboutcontainer{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        
        display: flex;
        font-family: "Geist";
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        width: 90%;
        align-items: center;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .15s;
        animation-name: boxdrop;
    }
    .aboutbox1{
        display:flex;
        width: 90%;
        /*background-color: brown;*/
        justify-content: center;
        align-items: center;
        gap: 2%;
        font-size: 19px;
        font-weight: 400; 
    }
    .aboutbox2{
        text-align: center;
        width: 90%;
        /*background-color: blue;*/
        justify-content: flex-start; 
        gap: 2%;
        font-size: 19px;
        font-weight: 400;
        flex-direction: row;
        display: flex;
    }
    .aboutbox2desc{
        /*background-color: blue;*/
        text-align: left;
        align-items: center;
        display: flex;
        margin-left: -1rem;
        font-size: 19px;
        width: auto;
        font-weight: 400;
    }
    .aboutbottom{
        margin-bottom: 8%;
        margin-top: auto;
        margin-bottom:auto;
    }
    .profpic {
        border-radius: 500px; 
        transition: all .2s ease;
        filter: brightness(60%);
    }
    .profpic:hover {
        transform: scale(1.05);
        cursor: pointer;
        filter: brightness(80%);
    }
    .gallerysection{
        transition: all .3s ease;
        display: flex;
        justify-content: flex-start;
        /*background-color: blueviolet;*/
        min-width: 275px;
        max-width: 275px;
        flex-grow: 0;
        margin-right: auto;
    }
    .gallerysection *{
        border-radius: 20px;
        margin-right: auto;
        transition: all .3s ease;
        height: 130px;
        width: 130px;
    }
    .gallerysection img:hover{
        z-index: 20;
        transform: scale(1.2);
        transform: translateY(-10%);
        filter:brightness(85%);

    }
    .gallerysection:hover img:not(:hover){
        transform: scale(.95);
        transform: translateY(7%);
        filter:brightness(40%);
        
    }
    .img3{  
        margin-left: -60px;
        filter:brightness(60%);
    }
    .img2{
        margin-left: -60px;
        filter: brightness(60%);
    }
    .img1{ 
        filter:brightness(60%);
    }
    .img6{
        margin-right: 10px;
        margin-left: -30px;
        filter:brightness(60%);
    }
    .img5{
        margin-left: -30px;
        filter: brightness(60%);
    }
    .img4{
        margin-left: 10px;
        filter:brightness(60%);
    }
    .aboutbox3{
        text-align: center;
        width: 90%;
        /*background-color: brown;*/
        justify-content: flex-start;
        left: 3%;
        right: 3%;
        margin-top: 40%;
        position: absolute;
        gap: 2%;
        font-size: 19px;
        font-weight: 400;
        height: 5%;
    }
    .aboutme{ 
        font-size:22px;
        margin-top:.5%;
        /*background-color: blueviolet;*/
        justify-content: center;
        text-align: center;
    }
    .aboutbox2 h3{
        margin-top: -1.5%;
    }
    .aboutbox3 h3{
        margin-top: -1.5%;
    }
    .aboutbox3desc{
        /*background-color: blue;*/
        text-align: left;
        position: absolute;
        left: 25%;
        margin-top: -2.5%;
        font-size: 19px;
        font-weight: 400;
    }

    /*--------------------ABOUT PAGE: BEGIN--------------------*/
    /*--------------------FEATURE PAGE: BEGIN--------------------*/

    .featurecontainer{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        display: flex;
        font-family: "Geist";
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 90%;
        height: 75vh;
        align-items: center;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .15s;
        animation-name: boxdrop;
    }
    .featurebox1 {
        display: flex;
        align-items: center; 
        width: 90%;
        height: 90%;
        /*background-color: brown;*/
        justify-content: start; 
        margin-top: -2%; 
        position: relative;
        gap: 10px;
        font-size: 19px;
        font-weight: 400;
        color: rgba(183, 183, 183, 0.9);
        transition: all 0.2s ease;
    }
    .featurebox1:hover {
        transform: scale(1.01);
        color: rgba(237, 236, 236, 0.9);
    }
    .numbercircle {
        background-color: rgb(46, 46, 46);
        box-shadow: 0 0 10px 2px rgba(98, 229, 238, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        border-radius: 50%;
        align-items: center;
        display: flex;
        justify-content: center;
        height: 45px;
        width: 45px;
        font-size: 30px;
        z-index: 100;
    }
    .featureboxdesc {
        position: relative;
        font-size: 16px;
        text-align: left;
        width: 95%; 
        color:rgba(207, 207, 207, 0.9);
    }
    .featureboxdesc h4 {
        font-size: 24px;
        margin-bottom: 5px;
    }
    .featureboxdesc p {
        font-size: 16px;
        margin-top: 5px;
    }

    /*--------------------FEATURE PAGE: END--------------------*/
    /*--------------------HOME PAGE: BEGIN--------------------*/

    .HOMEBOX{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height:auto;
        width: 70vw;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        margin-bottom: 2%;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color: rgba(183, 183, 183, 0.9);
        animation-duration: .3s;
        animation-name: boxdrop;
    }
    .HOMEBOX h3{
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
    }
    .HOMEBOX h4{
        font-size: 24px;
        font-weight: 700;
        line-height: 160%;
        color:rgba(207, 207, 207, 0.9);
    }
    .HOMEBOX * {
        font-family: "Geist";
        margin-left: auto;
        margin-right: auto;
    }
    .homepagebox{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 90%;
        align-items: flex-start;
        /*background-color: blue;*/
        font-family: "Geist";
        margin-top: 2%;
        margin-bottom:2%;
    }
    .homepagebox *{
        margin-left: 0%;
    }
    .homepagebox1{  
        display:flex;
        justify-content: flex-start;
        width:100%;
        transition: all 0.2s ease;
        font-size: 19px;
        font-weight: 400;
        line-height: 160%;
    }
    .homepagebox1:hover{
        transform: scale(1.01);
        color:rgba(207, 207, 207, 0.9);
    }
    .homepagebox1 *{
        margin-right: 3%;
        margin-top:auto;
        margin-bottom:auto;
    }
    .homepagebox img{
        width: 170px;
        height: 170px;
    }

    .cardshot{
        margin-left: 23px;
    }

    /*--------------------HOME PAGE: END--------------------*/
    /*--------------------PROJECT PAGE: BEGIN--------------------*/

    .BOX{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height:68vh;
        width: 70vw;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .15s;
        animation-name: boxdrop;
    }
    .PROJBOX{
        background-color: rgba(100, 100, 100, 0.150);
        box-shadow: 0 0 35px 4px rgb(220, 234, 235, 0.15);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height:85vh;
        width: 90vw;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5%;
        backdrop-filter: blur(15px);
        overflow-wrap:break-word;
        color:rgba(207, 207, 207, 0.9);
        animation-duration: .3s;
        animation-name: boxdrop;
    }
    .PROJBOX *{
        margin-left:auto;
        margin-right:auto;
        font-family: "Geist";
    }
    .PROJBOX h1{
        font-size: 45px;
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .PROJBOX h2{
        font-size: 28px;
        min-height: 10%;
        overflow-y:auto;
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .PROJBOX h3{
        font-size: 20px;
        animation-duration: .3s;
        animation-name: textdrop;
    }
    h2{
        /*background: red*/
        height: 5%;
        font-size: 30px;
        text-align: center;
        margin-top: 0%;
    }
    .taskcard{
        margin-top: 2%;
        margin-left: 2%;
        margin-bottom: 2%;
        margin-right: 2%;
        height: 47vh;
        flex-shrink: 0;
        display:flex;
        flex-direction:column;
        background-color:rgb(46, 46, 46);
        padding: 5px;
        box-shadow: 0 0 15px 4px rgb(220, 234, 235, 0.05);
        border: 1px solid rgb(244, 247, 247, 0.05);
        border-radius: 20px;
        width: 17vw;
        min-width: 250px;
        text-align: center;
        animation-duration: .3s;
        animation-name: carddrop;
        transition:all .15s ease;
    }
    .taskcard:hover{
        display:flex;
        flex-direction: column;
        background-color:rgb(52, 52, 52);
        box-shadow: 0 0 10px 5px rgb(220, 234, 235, 0.1);
        
        /*border: solid 1px black;*/
        
        min-width: 255px;
        word-wrap: break-word;
        text-align: center;
        transform: scale(1.05);
        font-size: 1.05rem;
    }
    .taskcard h4 { 
        font-size: 18px;
        width: 85%; 
    }
    .taskcard form{
        flex-grow:1;
        width: 90%;
    }
    .taskinputdesc{
        box-shadow: 0 0 15px 4px rgb(220, 234, 235, 0.02);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height:70%;
        width: 100%;
        background-color: rgba(34, 34, 34, 0.05);
        text-align: left;
        border:none;
        resize:none;
        overflow-y:auto;
        color:rgba(207, 207, 207, 0.9);
        font-family: "Geist";
        font-size: 14px;
        border-radius: 15px;
        padding-left:4%;
        padding-right: 4%;
        padding-top: 2%;
        box-sizing: border-box;
    }
    .taskinputtitle{
        box-shadow: 0 0 5px 4px rgb(220, 234, 235, 0.02);
        border: 1px solid rgb(244, 247, 247, 0.05);
        height: 3vh;
        width: 15vw;
        background-color: rgba(34, 34, 34, 0.05);
        border:none;
        border-radius:15px;
        text-indent: 2%;
        color:rgba(207, 207, 207, 0.9);
        font-family: "Geist";
        font-size: 16px;
    }
    .projectlink{
        text-decoration: none;
        display: block;
        color:inherit;
        height:100%;
        width: 100%;
    }
    .taskdescription{
        font-size: 16px;
        overflow-y: auto;
        padding-bottom:2%;
        max-height: 50%; 
    }
    .taskcardtitle{
        overflow-y: auto;
        
        padding-bottom:2%;
        
    }
    .taskoptions{
        text-decoration: none;
        display:flex;
        flex-direction: column;
        width: 90%;
        margin-top:auto;
        
    }
    .taskoptions *{
        text-decoration: none;
        margin-top:5%;
        margin-bottom: 2%;
        height: 50%;
        padding-top: 1%;
        padding-bottom: 1%;
        font-family: "Geist";
        font-size: 15px;
        width: 90%;
        border-radius: 20px;
        font-weight: 500;
        border:none;
        background-color:rgb(86, 86, 86);
        color:rgba(207, 207, 207, 0.9);
        transition:all .1s ease;
        border: solid 1px rgb(40, 40, 40); 
    }
    .taskoptions *:hover {
        background-color:rgb(104, 103, 103);
        cursor: pointer;
        transform: scale(1.03);
        color:rgba(244, 255, 254, 0.9);
        box-shadow: 0 0 10px 2px rgb(220, 234, 235, 0.1);
    }
    .completed{
        background-color: rgb(16, 78, 2);
    }
    .completed:hover{
        background-color: rgb(7, 120, 7);
    }

    /*--------------------PROJECT PAGE: END--------------------*/
    /*--------------------LOGIN/SIGNUP PAGES: BEGIN--------------------*/

    .formlabel{
        text-align: center;
        margin-bottom: -18%;
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        font-size: 30px;  
    }
    .forminput{
        padding-left:10px;
        
        height: 40%;
        backdrop-filter: blur(15px);
        background-color:rgba(65, 65, 65, 0.078);
        color:rgba(207, 207, 207, 0.9);
        width: 400px;
        border:none;
        border-radius: 15px;
        font-size: 27px;
        box-sizing: border-box;
    }
    .createbutton{
        display:flex;
        margin-left:auto;
        margin-right:auto;
        background: linear-gradient(70deg, rgba(85,21,128,1) 0%, rgba(22,44,186,1) 99%);
        border-radius: 15px;
        font-weight: 500;
        color:rgba(207, 207, 207, 0.9);
        border:none;
        font-size: 30px;
        padding-left: 20%;
        padding-right: 20%;
        padding-top: 5px;
        padding-bottom: 5px;
        font-family: "Geist";
        transition: all .2s ease;
    }
    .createbutton:hover {
        background: linear-gradient(70deg, rgb(95, 21, 140) 0%, rgb(33, 57, 200) 99%);
        transform: scale(1.02);
        color: rgba(244, 255, 254, 0.9);
        cursor:pointer;
    }
    .BOX *{
        margin-left:auto;
        margin-right:auto;
        font-family: "Geist";
        animation-duration: .3s;
        animation-name: textdrop;
    }
    .BOX h1{
        font-size: 40px;
    }
    .BOX h2{
        font-size: 30px;
    }
    .taskarea {
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 50px;
        width: 90%;
        min-height: 70%;
        margin-top: 2%;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 1%;
    }
}
/*--------------------LOGIN/SIGNUP PAGES: END--------------------*/
/*--------------------ANIMATIONS: BEGIN--------------------*/

@keyframes carddrop{
    0%{
        filter: blur(.05px);
        opacity: 70%;
        position: sticky;
        transform: translateY(5%);
    }
    100%{
        filter: none;
        transform: translateY(0);
        position: sticky;
        opacity: 90%;
    }
}
@keyframes headerdrop {
    0%{
        filter: blur(.05px);
        position: sticky;
        transform: translateY(2%);
    }
    100%{
        filter: none;
        transform: translateY(0);
        position: sticky;
    }
}
@keyframes boxdrop{
    0%{
        transform: translateY(2%);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes textdrop{
    0%{
        filter:blur(.25px);
        opacity:30%;
        transform: translateY(30%);
    }
    100%{
        filter:none;
        transform: translateY(0);
        opacity:90%;
    }
}
/*--------------------ANIMATIONS: END--------------------*/
/*LOTS OF CSS*/