/* :root{
    --bg :#222831;
    --sbg:#393E46;
    --txt:#EEEEEE;
    --brand: #FFD369;
    --shadow: rgb(70, 70, 70);
  } */
 
  :root{
    --bg: #fafdf6;
    --sbg: #f8f6b4;
    --txt: #222831;
    --brand: #ffc300;
    
  }
  
  
.historyAndForm{
    padding: 0;
}

.journyForm{
width: 100vw;
z-index: 1;
/* height: 80vh; */
/* background: linear-gradient(to right ,rgb(13, 19, 189),rgb(0, 0, 0)); */
background-color: var(--bg);
/* border-radius: 0; */
margin: 0;
display: flex;
align-items: center;
color: var(--txt);
margin-bottom: 1rem;
/* z-index: -2; */

}
.container{

width: 70vw;
/* position: relative;
left: 64px; */
margin-left: 40px;
}
.formHeading h4{
font-family: 'Pacifico', cursive;
letter-spacing: 2px;
height: 5.5rem;
z-index: 9;
}
.formHeading{
position: relative;
/* margin: .6rem; */
top: 1.2rem;
/* font-family: 'Courier New', Courier, monospace; */
font-family: 'Pacifico', cursive;
font-size: 52px;
font-style: italic;
}
.formContent label{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 6px;
    margin-top: 0;
    letter-spacing: 2px;
    font-weight: bolder;
}
.formContent{
    /* background: rgba(255, 255, 255, 0.6); */
    background:var(--sbg);

    /* border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5); */
    backdrop-filter: blur(5px);
    padding-bottom: 1rem;
    /* border-radius: 1rem; */
}
.formContent input{
    padding: 0 6px;
    background: var(--bg);
    border: 1px solid #DDD;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5); */
    letter-spacing: 1px;
    /* backdrop-filter: blur(5px); */
    color: var(--txt);
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
height: 1.7rem;
}
.formContent textarea{
    padding: 8px;
    border: 1px solid #DDD;
    background: var(--bg);
    /* border-radius: 4px; */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5); */
    /* backdrop-filter: blur(5px); */
    color: var(--txt);
    font-size: 16px;
    /* font-weight: bold; */
    letter-spacing: 1px;
    /* border-radius: 0; */
}
.png img{
    height: 480px;
    scale: 1.3;
    position: relative;
    right: 22px;
    bottom: -10px;
    z-index: -1;
}

.mcenter{
    padding: 2rem 0;
    /* background-color: blue; */
    background: linear-gradient(to right , red,yellow);

}
.flex{
    display: flex;
}
#sDT{
    margin: 0 .6rem;
    /* margin-top: 8px; */
    /* margin-top: 4px; */
    /* height: 32px; */
font-size: 15px;
height: 1.7rem;
    /* width: 400px; */
    background: var(--bg);
    border: 1px solid #DDD;
    /* font-size: 18px; */
    padding: 0 8px;
    color: var(--txt);
    padding: 0 6px;
    letter-spacing: 1px;
    font-weight: bold;

    /* padding: 0 6px;
background: var(--bg);
border: 1px solid #DDD;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
letter-spacing: 1px;
color: var(--txt);
font-weight: bold;
border-radius: 4px; */
}

/* .color{
    background: linear-gradient(to right , red,yellow);
} */















@media screen and (max-width : 500px){
  

    .container{
        margin-left: 0px;
        }


    .historyAndForm{
        padding: 0;
    }
    
    .journyForm{
    width: 100vw;
    
    height: auto;
    /* background: linear-gradient(to right ,rgb(13, 19, 189),rgb(0, 0, 0)); */
    
    padding: 12px;
    }
    .container{


    width: calc(100vw - 24px);


    position:static;
    /* left: 64px; */
    }
    .formHeading{
    margin: 12px;
    margin-top: 0;
    font-size: 32px;
    top: .5rem;
    }
    .formHeading h4{
        height: 4rem;
    }
    .formContent label{
        display: inline-block;
        width: 80px;
        margin: 0;
        padding: 0;
        letter-spacing: 0;
        font-weight: normal;
        font-size: 18px;
    }
    .formContent{
        
        padding-bottom: 12px;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.1);
        /* opacity: 0.1; */
        /* border-radius: 1rem; */
    }
    /* .formContent::before{
        content: 'travling is full of fun';
        position: absolute;
        opacity: 0.02;
        font-weight: bold;
        font-size: 100px;
        width: calc(100% - 24px);
        height: 100%;
        word-spacing: 32px;
        /* line-height: 140px; */
        /* word-wrap: break-word; */
        /* z-index: -1; 
    } */
    
.formContent input{
    padding:  6px;
    height: 32px;
    font-size: 16px;
    font-weight: normal;
    border-radius: 0;
    width: 100%;
/* width: 148px; */


}
    .formContent textarea{
        padding: 6px;
        border: 0;

        
        font-size: 16px;
        /* font-weight: bold; */
        letter-spacing: 0;
        border-radius: 0;
        border: 1px solid #ddd;


width: 100%;

    }
    .png img{
        display: none;
    }
    
    .mcenter{
    display: none;
    }
    
    .fromTo{
        display: flex;
        flex-direction: column;
        gap: 16px;
margin: 0;
padding: 12px;
    }
    .fromTo div{
        width: 100%;
    }
    .dateTime div{
        width: 100%;
    }
    .dateTime{
        display: flex;
        flex-direction: column;
        /* gap: 16px; */
        margin: 0;
        padding: 12px;
        padding-top: 0;
        padding-bottom: 1.5rem;
    }

    .commentContainer{
        margin: 0;
        padding: 0;
    }
    .commentonly{
        padding: 12px;
        padding-top: 0;

    }

.buttonContainer{
    padding-right: 12px;
}





}