@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');

html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    overflow-x: hidden;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.container{
    width: 700px;
    max-width: 80%;
}

.container h1{
    font-family: "Homemade Apple", cursive;
    color: #2d4b72;
    text-align:center;
    margin-bottom:15px;
    margin-top: 15px;
}

.container p{
    font-family: "Montserrat", sans-serif;
    color: #2d4b72;
    text-align:center;
    margin-bottom:35px;
}

#order-form{
    width:100%;
    max-width:600px;
    border-radius: 30px;
    background-color: #2d4b72;
    margin: 20px;
    padding: 20px 35px 0px 35px;
}

.fill-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom: 70px;
}

.identity,
.other{
    display:flex;
    flex-direction:column;
}

.send-message{
    grid-column:1 / 3;
}

.fill-form button{
    grid-column:1 / 3;
    justify-self:center;
    margin-top:15px;
    background:#fefdfd;
    color:#2d4b72;
    border:none;
    border-radius:30px;
    padding:12px 30px;
    cursor:pointer;
}

#order-form label{
    color: #fefdfd;
    display:block;
    margin:8px 0 3px;
    color:#fefdfd;
}

#order-form input{
    width:100%;
    border:none;
    border-radius:8px;
    padding: 5px;
    font-size:16px;
    box-sizing:border-box;
    padding: 10px;
}
#order-form textarea{
    width:100%;
    min-height: 140px;
    border:none;
    border-radius:8px;
    padding: 10px;
    font-size:16px;
    box-sizing:border-box;
    resize: vertical;
}

@media (max-width:768px){

body{
    display: flex;
    justify-content: center;
    padding:25px 0;
    align-items:flex-start;
}

.container{
    width:100%;
    max-width:420px;
    margin: 0auto;
}

.container h1{
    font-size:2rem;
    line-height:1.3;
}

.container p{
    margin-bottom:25px;
}

#order-form{
    max-width:100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding:25px 20px;
}

.fill-form{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:25px;
}

.identity,
.other{
    width:100%;
}

.send-message{
    grid-column:auto;
}

#order-form button{
    grid-column:auto;
    width:100%;
    padding:14px;
    font-size:1rem;
    border-radius:12px;
}

#order-form input,
#order-form textarea{
    font-size:16px;
    padding:12px;
}

}