@font-face {
    font-family: 'Basiic pixel';
    src: url('/contact-form/css/fonts/basiic-font.ttf') format('truetype');
}
@font-face {
  font-family: 'Darumadrop One';
  font-style: NORMAL;
  src: url('/contact-form/css/fonts/Darumadrop_One/DarumadropOne-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: REGULAR;
  src: url('/contact-form/css/fonts/Gaegu/Gaegu-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Hachi Maru Pop';
    font-style: normal;
    font-weight: regular;
    src: url('/contact-form/css/fonts/HachiMaruPop/HachiMaruPop-Regular.ttf') format('truetype');
}
/*---------- coding the actual form format ----------*/
input {
    display: inline-block;
}
input, textarea {
    width:100%;
    resize: vertical;

    background-image: radial-gradient(circle, #eaf3df 0%, #fcfcfc 100%);
    border: 1px solid #ac446d;

    border-radius: 3px;
    padding: 5px 2px;
    color: #ac446d;
    border-radius: 5px;

    font-family: Basiic;
    font-size: 1.25rem;
}
input::placeholder {
    color: #e0a694;
}
input:focus {
    outline: 2px solid #c7f68d;
}
textarea:focus {
    outline: 2px solid #c7f68d;
}
textarea::placeholder{
    color: #e0a694;
}
textarea {
    margin-top: 6px;
}
body {
    color:#ffd0cc;
    font-family: Darumadrop One;
    font-size: 1.5rem;
}
button {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 8px;
    background-color:#eaf3df;
    color: #e9724c;
    font-family: Basiic;
    font-size: 1.25rem;
    font-family: Darumadrop One;
    text-align: center;
    border: 1px solid #ac446d;
    border-radius: 5px;

    transition: transform 0.3s ease;
    
}
button:hover {
    transform: scale(1.05);
    background-color:#f5fdeb;
    color: #ff7b4f;
    border: 1px solid #ac446d;
}
fieldset {
    background-color: #e77567;
    border: 3px solid #ac446d;
    border-radius: 5px;
}