@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat.ttf');
}

h1 {
    font-size: 3.7rem; margin: 0 0 5% 0;
}

#contactFormDiv {
    width: 100%; height: 100dvh;

    display: flex; justify-content: center; align-items: center; 
    color: #FBFBF2;
}

#contactFormDiv > form {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    width: 50%; 
    padding: 3.5%; margin: 5%;

    font-size: 1.2rem; font-weight: bold; color: inherit;

    background: linear-gradient(360deg,rgba(20, 19, 19, 1) 0%, rgba(33, 30, 33, 1) 100%); outline: #d3d2d2 2px solid;
    box-shadow: 0 2dvh 5dvh #18171870;
    border-radius: 5dvh;
}

#contactFormDiv > form > textarea{
    width: 100%; height: 50%;

    margin: 2% 0 5% 0; padding: 3%;
    resize: none; border: none;

    font-size: 1.2rem; color: inherit;
    background: linear-gradient(360deg,rgba(33, 30, 30, 1) 0%, rgba(51, 47, 51, 1) 100%);
    outline: 1px solid #8f8f8f;
    border-radius: 2dvh;
}

#contactFormDiv > form > div {
    width: 100%;
    margin-bottom: 5%;

    display: flex; justify-content: space-between;
}

#contactFormDiv > form > div > div {
    width: 100%;
    display: flex; flex-direction: column;
}

#contactFormDiv > form > div > div > input {
    width: 95%;
    padding: 5%; margin-top: 2%;

    border: none; outline: 1px solid #8f8f8f;
    
    font-size: 1.2rem; color: inherit;
    background: linear-gradient(360deg,rgba(33, 30, 30, 1) 0%, rgba(51, 47, 51, 1) 100%);
    border-radius: 2dvh;
    transition: 1s;
}

#contactFormDiv > form > div > div > input:focus, textarea:focus{
    outline: 1px solid #FBFBF2;
}

input[type="submit"] {
    width: 100%;
    padding: 2%;

    border: none; outline: 1px solid #8f8f8f;
    
    font-size: 1.2rem; color: inherit; font-weight: 700;
    background: #222122;
    border-radius: 2dvh;

    transition: 1s;
}

input[type="submit"]:hover {
    outline: 1px solid #FBFBF2;
    transform: translateY(-5%) scaleX(1.05);
    cursor: pointer;
}