:root {
    --vampire-black: rgb(8, 8, 8);
    --cyan: rgb(139, 233, 253);
    --green: rgb(80, 250, 123);
    --orange: rgb(255, 184, 108);
    --pink: rgb(255, 121, 198); 
    --my-brow: rgb(32, 30, 30);
    --my-brow-2: rgb(44, 42, 42);

    --background: rgb(40, 42, 54);
    --current-line: rgb(68, 71, 90);
    --selection: rgb(68, 71, 90);
    --foreground: rgb(248, 248, 242);
    --comment: rgb(98, 114, 164);
    --cyan: rgb(139, 233, 253);
    --green: rgb(80, 250, 123);
    --orange: rgb(255, 184, 108);
    --pink: rgb(255, 121, 198);
    --purple: rgb(189, 147, 249);
    --red: rgb(255, 85, 85);
    --yellow: rgb(241, 250, 140);
}


.contact-me-button{
    background-color:var(--foreground);
    font-weight: 900;
    border: 3px solid var(--vampire-black);
    color:var(--my-brow);
    border-radius: 10px;
    font-size: 1.5rem;
    transition: all .5s;
    padding-top: 0;
    padding-bottom: 0;
}

.contact-me-button:hover{
    font-size: 1.7rem;   
    border: 1px solid var(--red);
}


.name{
    color: var(--orange);
    font-size: 4vh;/* added 24/Feb/2024 */
    margin: 0;/* added 24/Feb/2024 */
}
.sub-header-text{  /* added 24/Feb/2024 */
    font-size: 3vh;
}
@media only screen and (max-width: 700px) {/* added 24/Feb/2024 */
    .name,.sub-header-text {
      font-size: 1.5rem;
    }
    .sub-header-text {
      font-size: 1.2rem;
    }
}
  

.for-header-height{
    margin-top: 10vh;
}


/* *********************CONTACT ME FORM ******************************** */
.contact-me-form{
    position: absolute;
    z-index: 99999999;
    left: 0;
    /* width:98vw;     */
    /* background-color: rgba(0, 255, 255, 0.247);  */
}


.form-page{
    background-color: var(--selection); 
    /* transition: all 1s; */
}

.height100{
    height: 100vh;
}



.transition-1s{
    transition: all 1s;   
}
.drawer{
    /* background-color: rgba(185, 26, 26, 0.637); */
    height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100vw;
    /* transition: all 1s; */
    overflow: hidden;   
}



.height{
    /* height: 700px;  */
    height: 91vh; 
}

@media only screen and (max-height: 550px) {
    .contact-me-form{
        top: 0vh;
    }
}
@media only screen and (min-height: 550px) {
    .contact-me-form{
        bottom: 9vh;
    }
}

@media only screen and (max-width: 550px) {
    .contact-me-form{
        bottom:0    
    } 
}

.flex-dive-form{
    display: flex;
    justify-content: center; 
}

.my-form{
    background-color: rgba(255, 255, 255, 0.568);
}

.my-form-label{
    font-size: 1.5rem;
    color: var(--purple);
}
.form-label{
    margin-bottom: 0;
    margin-top: 2px;
}
@media only screen and (max-width: 576px) {
  
    .my-form-label{
        font-size: 1rem;  
    }
}

.explain-text{
    color: var(--orange);    
    font-weight: bold;
}

.contact-info{
    color: var(--purple);
    font-weight: 900;
    font-size: 1.2rem;
}

.my-form-submit{
    /* color: var(--pink); */
    font-size: 1.3rem;
    font-weight: 900;
    background-color: var(--purple);
    margin-top: 1rem ;
}
.my-form-submit:hover{
    /* color: var(--pink); */
    background-color: var(--green); 
}

.rtl{
    direction: rtl;   
}

.close-canvas-button{
    color: var(--pink);
    font-size: 1.5rem;
}


/* @media only screen and (max-height: 660px) {
    .flex-dive-form{
        margin-top: 150px;        
    }
} */


.mmr-2{
    margin-right: 1.3rem;
}
    
/* *********************CONTACT ME FORM ******************************** */
.div-error
{
    background-color: black;
    border-radius: 10px
}
.p-error
{
    color: red;
    padding-left: 1rem;           
    padding-right: 1rem;            
}

/* **************** ME PART */
.me-header{
    color:blue;
}

.me-text{    
    color: white;
    background-color: rgba(40, 42, 54, 0.52);
    /* background-color: var(--background);     */
    padding: 10px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 1.2rem;
    font-family: sans-serif;
    border: 2px solid white;
    box-shadow: 2px 1px blue;
}


.mmb-big{
    margin-bottom: 20rem;
}
.mmt-s{
    margin: 500px;
}

/*   ******************END ME PART *************  */



.my-container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    position: relative;
    /* align-items: center; */
}

.header{   
    background-color: var(--background);
    padding: 8px; 
    height: 10vh;
    padding-top: 0; /* added 24/Feb/2024 */
}
.main-content{
    display: flex;
    flex-direction: column;
    height: 80vh;
    overflow: auto;  
}
.footer{
    background-color: var(--background);        
    height: 10vh;
}
@media only screen and (max-width:768px){
    .header{
        height: 8vh;
    }
    .main-content{
        height: 84vh;
    }
    .footer{
        height:8vh
    }
}
.casual-font{
    font-family: 'HistoricalToyRegular', sans-serif;
}

.top-row{
    /* flex-grow: 1; */
    /* background-color: rgba(14, 247, 247, 0.363); */
    height: 10vh;
    display: flex;
    justify-content: space-around;
    /* align-items: center; */
}

.bottom-row{
    /* flex-grow: 1; */
    /* background-color: rgba(14, 247, 247, 0.363); */
    height: 10vh;
    display: flex;
}

.image-row{
    height: 60vh;    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    position: relative;
    
}




.bg{
    background-color: chocolate;
}

.my-img{
    height: 59vh;
    width:  59vh;
    border-radius: 50%;
}

/* @media only screen and (max-width:500px) {
    .main-content img{
        height: 100vw;
        width:  100vw;        
    }   
} */
/* /////////////////// */

.rotating-circle {   
    animation: rotateY 4s linear infinite; 
    transform-origin: center center;
  }
  
@keyframes rotateY {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg); /* Rotates a full circle (360 degrees) */
    }
}