:root {
    --light: white;
    --medium: #D3D3D3;
    --darker: #a5a5a5;
    --border: #c9c9c9;
    --bgcol:  #e5c8cd;
}

/* leaflet mapka */
.leaflet-control-attribution > a, span, svg{
    font-size: 0.7rem;
}
.leaflet-control-attribution {
    font-size: 0.7rem;
}
.leaflet-popup-content-wrapper{
    scale: 0.8;
}

.container__contact{
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 3rem auto;
    max-width: 1100px;
    justify-self: center;
    align-self: center;
    
}
form{
    width: 90%;
    margin: auto;
}
label{
    display: flex;
    width: 90%;
    margin: 0.75rem auto 0.25rem;
    font-size: 21px;
}
input{
    display: flex;
    margin:auto;
    width: 90%;
    padding: 0.25rem;
    border: solid 1px var(--medium);
    font-size: 21px;
    background-color: var(--bgcol);
}
input[type=submit]{
    width:90%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
    font-size: 21px;
}
input[type=submit]:hover{
    background-color: var(--medium);
}
input:focus, .message:focus{
    border: solid 1px var(--darker);
    outline: none;
}
.message{
    display: grid;
    margin: auto;
    width: 90%;
    overflow-y:scroll;
    resize: none;
    padding: 0.25rem;
    font-size: 21px;
    border: solid 1px var(--medium);
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: var(--bgcol);
}
.message::-webkit-scrollbar {
    display: none;
}
.message:focus{
    outline: none;
}
.formImg{
    object-fit: cover;
    display: grid;
    margin: auto;
    height: 360px;
    border:solid 10px var(--bgcol)
}
.box{
    width: 90%;
    background-color: var(--bgcol);
    margin: 1rem auto;
    text-align: center;
    padding: 0.25rem;
    border: solid 1px var(--medium);
    font-size: 21px;
}
.box1{
    width: 90%;
    background-color: var(--bgcol);
    margin: 0.6rem auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 0.25rem;
    font-size: 21px;
}

.box2{
    text-align: center;
    font-size: 21px;
}

.box2:nth-child(2):hover, .box2:nth-child(3):hover {
    background-color: #fda9b7;
    border-radius: 15px;
}
.gone{
    display: none;
}
.rightSide{
    width: 90%;
    margin: auto;
}
@media screen and (min-width: 768px){
    .container__contact {
            flex-direction: row;
        }
}