.contactme{
    width: 100%;
    min-height: 100vmin;
    height: fit-content;
    display: flex;
    align-items:  center;
    flex-direction: column;
    gap: 3vmin;
    .heading{
        display: flex;
        flex-direction: column;
        font-size: 5vmin;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        gap: 2vmin;
        h3{
            margin: 0px;
        }
        h1{
        text-shadow: 1.3vmin 1.3vmin 0vmin black;

            margin: 0px;
            span{
                color: var(--accent);
            }
        }

    }
    .formp{
        display: flex;
        flex-direction: column;
        width: 90%;
        align-items: center;
        form{
            display: flex;
            background: url("https://images.pexels.com/photos/1547813/pexels-photo-1547813.jpeg?auto=compress&cs=tinysrgb&w=600");
            background-position: center;
            background-size: contain;
            width: 80%;
            height: fit-content ;
            flex-direction: column;
            align-items:  center;
            padding: 5vmin;
            border-radius: 1.618vmin;
            gap: 5vh;
            box-shadow: 2vmin 2vmin .5vmin black,inset 2vmin 2vmin 5vmin black;
    
            
    
            .InFo{
                display: flex;
                flex-direction: column;
                align-items: center;
    
                gap: 3vmin;
                width: 100%;
                div{
                    
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                label{
                    color: white;
                    width: 40%;
                    text-shadow:

        -2px -2px 0 black,
         2px -2px 0 black,
        -2px  2px 0 black,
         2px  2px 0 black;
                    font-weight: 4vmin;
                    font-size: 5vmin;
                    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                }
                input{
                    width: 60%;
                    height: 3vmin;
                    background-color: var(--accent);
                    box-shadow: .3vmin .3vmin .6vmin black,inset .3vmin .3vmin 1vmin black;
                    font-size: 4vmin;
                    border-radius: 1vmin;
                    padding: 2vmin;
                }
            }
    
            .messagebox{
                display: flex;
                height: 20%;
                width: 100%;
                textarea{
                    width: 100%;
                    height: 100%;
                    resize: vertical;
                    font-size: 5vmin;
                    padding: 2vmin;
                    backdrop-filter: blur(.5vmin);
                    color: white;
                    box-shadow: 1vmin 1vmin 4vmin black;
                    background-color: #fcfcfc1e;
                    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                    
                    
    
                };
            }
    
            button {
                border-radius: 1vmin;
                    width: fit-content;
                    height: 7vmin;
                    padding: 2vmin;
                    border-image: linear-gradient(to right,var(--accent), rgb(6, 6, 6)) 1;
                    background-color: rgb(0, 0, 0);
                    color: white;
                    text-align: center;
                    font-size: 3vmin;
                    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                   transition: all .3s ease;
                   
                    color: white;
                   
              }
              button:hover{
                border-image: linear-gradient(to right, rgb(6, 6, 6),var(--accent)) 1;
                    color: black;
                    background-color: var(--accent);
                    font-size: 2.5vmin;
                
              }
        }
    
    }
    
    .contactmeSideP{
        width: 90% ;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2vmin;
        h1{
            font-size: 6vmin;
            width: 80%;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            span{
                color: var(--accent);
            }
        }
        h2{
            font-size: 4vmin;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            
        }
        h3{
            font-size: 3vmin;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            a{
                color: var(--accent);
            }
            a:hover{
                text-shadow: 0 0 1vmin var(--accent);
            }
        }
    }

  
}