@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* { box-sizing:border-box; }

html, body { width:100%; min-height:100vh;}

body {
    margin:0; padding:0; 
    _background-color:#434e6477;
    _background-image:radial-gradient(circle, #daa520ab 0%, white 51%);
    background-size:10px 10px;
    font-family:Inter;
    tab-size:14;
     }

header { 
    display:flex; flex-flow:row; justify-content:space-between; border-bottom:1px solid goldenrod; margin-bottom:2rem;
    position:fixed; width:100%; background:white;
}
h1, h2, h3 { font-family:Roboto Slab; color:goldenrod; }
h3 {margin:0.5rem 0}

a {text-decoration:none;}

.container { width:100%; max-width:1200px; margin:auto;
    min-height:20px;padding:0 1rem; 
    display:flex; justify-content:space-between; 
}

header .container { align-items:center}
header .container > div { flex:1;}
#title { flex:2; _background:goldenrod; color:white;}

.text img { display:inline-block; height:34px;}

.column { flex-direction:column;}

.cols3 > div { _flex:1; width:calc( 100% / 3 ); _background:grey; min-height:20px;}

.left { justify-content:start; }

.box { background:white; border:1px solid goldenrod;
     border-radius:16px; 
     line-height:1.5;
     background:url('flat1.jpg') no-repeat;
     background-size:100%;
     padding-top:250px;
     margin-bottom:1rem;}
.box .text
{ background-color:white; padding:24px; padding-top:0px; border-radius:0 0 16px 16px;}

form { display:flex; justify-content:space-between; }
label { min-height:20px; flex:1 0 min-content; }
input:not([type=radio]), select { 
    width:100%; 
    padding:0.8rem;
    border-radius:3px;
    border:1px solid #ccc; outline:none;
}
form a { width:100%;}

a.small { font-size:70%; font-weight:660; letter-spacing:1px; text-transform:uppercase; color:#7c2020}

button, .button, [type=submit]
{
    background-color:goldenrod;
    border:none;
    outline:none;
    padding:0.5rem 1rem;
    line-height:1;
    border-radius:3px;
    font-size:1rem;
    cursor:pointer;
    max-height:43px;
}
:is(button, .button, [type=submit]):hover 
{_background:transparent;
 background:#db1c1f; color:white; cursor:pointer;
box-shadow:0 0 0 5px #ddd; }

#searchbar { 
    margin-top:100px;
    margin-bottom:2rem;
    flex-direction:column
}

#ujingatlan { flex-flow:column; max-width:400px; margin:auto; }

#searchform {
    column-gap:1rem;
    _flex-wrap:wrap;
    border-radius:10px;
    border:1px solid #ccc;
    padding:1rem 1rem;
    margin:0;
    _box-shadow:0px 0px 5px 0px #ccc;
    _min-height:60px; 
    _background-color:#9E9E9E;
}
#searchform > * {flex:1;}
#locationlabel { flex:1; min-width:300px;}
#plus { 
    width:50px; height:50px; 
    display:flex; justify-content:center; align-items:center; 
    padding-bottom:5px; 
    background:#db1c1f;
    background:darkgoldenrod;
    border-radius:50px; color:white; 
    font-weight:200; font-size:48px; 
    line-height:50px; margin:auto;
}
#plus:hover 
{background:#db1c1f; cursor:pointer; box-shadow:0 0 0 5px #ddd;}

.gap { column-gap:1rem; }
.f2 {flex:2 !important}
.center {text-align:center;}


@media screen and (max-width:768px)
{
    #locationlabel { 
        order:-1;
        flex:4;
        min-width:100%;
        margin-bottom:1rem;
    }
    #searchform { flex-wrap:wrap;}
    .cols3 > div { _flex:1; width:calc( 100% / 2 ); }
}

@media screen and (max-width:576px)
{
    #searchform { flex-direction:column; }
    #locationlabel {margin-bottom:0;}
    [type=submit] { min-height:42px;}
    .cols3 { flex-direction:column;}
    .gap { row-gap:1rem; }
    .cols3 > div { width: 100%; }
}

@media screen and (min-width: 380px) and (max-width:575px)
{
    [type=submit] { align-self:start; _flex:0; width:auto}
}