:root {
    --filled-color: #eee;
    --defont: 300 20px / 150% "Poppins", sans-serif;
    --b_color: #123;
    --max-w: 80rem;
	--bgdef: ghostwhite;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    scroll-behavior: smooth;
    font: var(--defont);
	-webkit-tap-highlight-color: transparent;
}

*{
	box-sizing: border-box;
	transform:none;
}

*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, darkgoldenrod,gold,darkgoldenrod);
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
}
*::-webkit-scrollbar-track {
    background: var(--b_color);
}





header{
	width: 100%;
    height: 4rem;
    top: 0;
    position: sticky;
    z-index: 2;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 1rem;
    max-width: var(--max-w);
    margin: 0 auto;
    gap: 2rem;
}
header>h1{
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-align: right;
    margin: 0;
}
a.sgn{
	text-decoration: none;
    color: gold;
    display: flex;
    align-items: center;
    gap: .2em;
}
a.sgn:hover{
	color:palegoldenrod;
}
a.sgn::before{
	content: "";
    background: radial-gradient(at right bottom, darkgoldenrod 55%, palegoldenrod,lightyellow);
    width: .5em;
    display: flex;
    aspect-ratio: 1;
    border-radius: 50%;
}
header p{
	margin: 0;
	font-size: .4em;
	color: var(--b_color);
	font-weight: 200;
	line-height:1;
}


/* === NAV ===*/

nav{
	display: flex;
    flex-flow: row wrap;
    flex: 0 1 40rem;
    border-radius: 2em;
    overflow: hidden;
    background: ghostwhite;
}
nav>a{
    display: flex;
    padding:0 .5em;
    line-height: 200%;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--b_color);
    line-height: 1.5em;
    margin: .2em;
    border-radius: 2em;
}

nav>a:hover{
   color:deepskyblue;
   background:white;
}
nav>a.git:hover,
.git{
	background: deepskyblue;
	font-weight:600;
    color: white !important;  
	transition:.5s background-color
}

/*
nav>a.git::after{
content:"*";
}
nav>a.git::before{
content:"-";
}
*/

/* ==== media Q ====*/

@media only screen and (max-width: 800px) {
	nav{
		position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 0;
        background: floralwhite;
        overflow: hidden;
        transition: .5s all ease-in-out;
        flex-flow: column;
        justify-content: center !important;
        align-items: stretch;
		border-radius:0;
		
	}	
	nav.open{
		width: 100% !important;
		padding:0 1rem;
	}	
	.hmb{display:block !important}
	
	.open .hmb .l1 {
		transform: rotate(-45deg) translate(0, 15%);
	}
	.open .hmb .l2 {
		transform: translate(100%, 0);
		stroke: orangered;
	}
	.open .hmb .l3 {
		transform: rotate(45deg) translate(0, -15%);
	}
	
	nav>a{flex:.075;}
}

/* ==== media Q ====*/

.hmb {
	position: fixed;
    right: 0;
    width: 4rem;
    height: 4rem;
    top: 0;
    z-index: 100;
    cursor: pointer;
    stroke: #123;
    transform: translate(0, 0);
    transition: .5s transform ease-in;
    overflow: hidden;
    display: none;
    border-radius: .5em;
    padding: 0 1em;
}
.hmb .line {
	transform: none;
	transform-origin: center;
	stroke-width: 5px;
	transition: .2s transform ease-in .1s;
}

/* === NAV ===*/





main {
  width: 100%;
  text-align: center;
  display:flex;
  flex-flow:column
}

section {
	width: 100%;
	display: flex;flex-flow:column;
	align-items: center;
	justify-content: center;
	gap:1rem;
	color: var(--b_color);
}

section:first-of-type::before{
	display:none;
}

section::before{
	content:"";
	width: 100%;
    --hh: 4rem;
    /*--bbg: white*/;
    height: var(--hh);
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, var(--bbg) var(--hh), transparent var(--hh)) top / 100% var(--hh) no-repeat fixed;
	z-index:1;
}

#domki::before{
	background:white !important;
}
section h1{
	font-size: 4em;
    color: #ccb;
    line-height: 1;
    margin: 0;
    text-align: left;
}

section.observed {
  background: ghostwhite;
}

.observed h1{
	color:deepskyblue;
	transition:1s color 1s
}


/* === HERO === */

.heroTxt{
    display: flex;
    flex-flow: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: white;
    margin-bottom: 10vh;
    text-align: left;
}

.heroTxt h2{color:gold;}
.hero {
	background: url(../gfx/beach-1852945.jpg) no-repeat center 60% / cover fixed;
    flex-flow: column;
    align-items: center;
}


/*==== SUN ====*/

.sky{
	display: flex;
    width: 100%;
    max-width: 33em;
    justify-content: flex-end;
    align-items: center;
    height: 0;
    position: sticky !important;
    top: 10rem;
    z-index: 0;
    /* overflow: hidden; */
    padding: 0 5em;
}

.sun {
	--beam: gold;
    --face: lightgoldenrodyellow;
    font-size: 1.45rem;
    transform: rotate(-10deg);
}

.sun span:nth-of-type(4) {
    content: "";
    width: 3.8em;
    height: 3.8em;
    background: var(--face);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sun span:nth-of-type(4):before,
.sun span:nth-of-type(4):after {
  content: "";
  width: 0.5em;
  height: 1em;
  background-color: var(--beam);
  border-radius: 0.5em;
  position: absolute;
  mix-blend-mode: multiply;
  opacity: 0.9;
  left: 1.2em;
  bottom: 2.2em;
  z-index: 2;
  animation: sun-eye-anim 3s 0s infinite ease-in;
}

.sun span:nth-of-type(4):after {
  left: auto;
  right: 1.2em;
}

.sun span:nth-of-type(4) i {
  width: 3em;
  height: 3em;
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -48%);
}

.sun span:nth-of-type(4) i:after {
    content: "";
    width: 3em;
    height: 2em;
    background: var(--beam);
    position: absolute;
    left: 50%;
    top: .5em;
    transform: translate(-50%, 50%);
    opacity: 0.9;
}

.sun span:nth-of-type(4) i:before {
    content: "";
    width: 2em;
    height: 0.6em;
    background: var(--face);
    position: absolute;
    left: 50%;
    top: calc(50% - 0.2em);
    transform: translate(-50%, 0);
    border-radius: 0 0 50% 50%;
    z-index: 1;
    box-shadow: 0 30px 30px red;
	display:flex;
	justify-content:center
}

.sun span:nth-of-type(1), 
.sun span:nth-of-type(2), 
.sun span:nth-of-type(3) {
    content: "";
    width: 4em;
    height: 4em;
    position: absolute;
    left: 50%;
    top: 50%;
    mix-blend-mode: overlay;
    opacity: 0.6;
    background: var(--beam);
	box-shadow: 0 0 50px white;
}

.sun span:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation: sun-anim 3s 0s infinite linear;
}

.sun span:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation: sun-anim 3s 0.3s infinite linear;
}

.sun span:nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation: sun-anim 3s 0.5s infinite linear;
}




.ble:hover span:nth-of-type(4) i:after {
	background: linear-gradient(0deg, pink, tomato) !important;
    width: 2em !important;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    height: 2.5em;
    top: .25em;
    transition: .2s top, .2s height;
}
.ble:hover span:nth-of-type(4) i {
    overflow: visible;
}
.ble:hover span:nth-of-type(4):before, .ble:hover span:nth-of-type(4):after {
	background:tomato;
    animation: none;
}


@keyframes sun-anim {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes sun-eye-anim {
  0% {
    height: 1em;
  }
  3% {
    height: 0;
  }
  6% {
    height: 1em;
  }
}
/*==== SUN ====*/

.fview {
    display: flex;
    min-height: 18em;
    justify-content: space-around;
    overflow: hidden;
    perspective-origin: center bottom;
    perspective: 300px;
    font-size: 1rem;
    transform: rotate(0deg) translateY(0px);
    width: 100%;
    transform-origin: center bottom;
	margin: 6rem 1rem 0;
}
.fview::before, .fview::after {

    line-height: 1;
    background: #fff5;
    padding: .2em 1em;
    border: .05em solid white;
    border-radius: 1em;
    display: flex;
    /* opacity: calc((300 - var(--scrolltop)) / 100); */
    position: absolute;
    right: 0;
    justify-content: center;
    width: 7em;
    bottom: 10%;
    content: "Rewal " "\2192";
    margin: .5em;
	font-size:.7em
}

.fview::before {
    content: "\2190" " Pobierowo";
    left: 0;   
}

/*
.moveY {
    transform: rotate3d(1, 1, 1, 15deg) translateY(calc(var(--scrolltop)* 1px));
}
*/

.pustk {
    font-size: 2.5rem;
    color: white;
    letter-spacing: .1em;
    font-weight: 600;
    display: flex;
    align-self: center;
    padding: .6em .6em;
    background: linear-gradient(-45deg, darkgreen, lightgreen);
    border-radius: .1em;
    border: .15em solid white;
    transform-origin: 50% 100%;
    position: absolute;
    inset: auto;
    top: 10%;
    text-align: center;
    z-index: 1;
    transform: rotate3d(1, 1, 1, 15deg) translateY(10em);
    transition: .5s transform ease-in-out;
}
.observed .pustk{
	transform: rotate3d(1, 1, 1, 15deg) translateY(0);
	transition: .5s transform ease-in-out .5s;
}

.pustk::before {
    content: " ";
    width: .2em;
    height: 10em;
    background: linear-gradient(90deg, #cde, black);
    position: absolute;
    inset: 108% 50%;
}
.pustk::after {
    content: "Pustkowo";
}




/*=== LAYOUT ====*/
.mgwrp{
	margin:1rem;
	gap:2rem;
}
.vspace {
    padding: 4rem 1rem;
}
.vsp{
	min-height:90vh;
	align-items:center;
}
.rwr {
    flex-flow: row wrap;
}
.max {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    width: 100%;
}
.max-w {
    max-width: var(--max-w);
	display:flex;
	width: 100%;
}
.c{flex-flow:column}
.cl{
	display: flex;
    flex-flow: column;
    flex: 0 1 max(32rem, 45%);
    gap: 2rem;
    text-align: left;
}
.dist{
	font-size: .5em;
    font-weight: 600;
    line-height: 0;
    position: absolute;
    right: 1em;
    top: 2.5em;
}
.cnt{font-weight:600;color:#ccb;}


/*=== KONTAKT ====*/

#formwraper {
    display: flex;
}
form {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    padding: 1rem 0;
    flex: 0 1 40rem;
}
form *{
    font: var(--defont);
}
.udata {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}


input, textarea {
    flex: 1;
    padding: .5em;
    border: none;
    border-radius: 5px;
    outline: .2em auto #eef;
}
label {
    text-align: right;
    color: steelblue;
}
input[type="tel"] {
    width: 12ch;
    align-self: flex-end;
}

.text {
    display: flex;
    flex-flow: row wrap;
}
textarea {
    resize: vertical;
    min-height: 200px;
}
.polit {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    gap: .5em;
}
input[type="checkbox"] {
	aspect-ratio: 1;
    margin: 0;
    flex: 0 0 2.5em;
    appearance: none;
    border-radius: 50%;
    background: white;
}
input:checked {
  background:greenyellow content-box;
}

label[for="ok"] {
    font-size: inherit;
}

input[id="send"] {
    width: 30%;
    background: #cfa;
    font-weight: 600;
    text-transform: uppercase;
}





input[disabled] {
    background: #eee !important;
    color: white;
}


#respdata {
    color: green;
	display:flex;
}

input:-webkit-autofill{
	-webkit-box-shadow: 0 0 0px 1000px yellow inset;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-box-shadow: inset 0 0 0 100px var(--filled-color);
}
/*
#respdata::before{
	content:"wysyłam";
	margin:0 .5em;
}
*/


.span-i>span{
	display:inline-block;
	animation: 1s infinite alternate sanim;}
@keyframes sanim {
  0% {
    margin:0
  }
  100% {
    margin:0 1ch
  }
}
/*=== ICONS ===*/
.emil{
	display: flex;
    flex-flow: row;
    width: 2em;
    height: 1.5em;
    background: #eee;
    overflow: hidden;
    position: relative;
    border: .15em solid #333;
    justify-content: center;
    align-items: stretch;
    border-radius: .2em;
}
.emil::after{
    content: "";
    width: 1.2em;
    height: 1.2em;
    background: #eee;
    transform: rotate(45deg);
    border: .15em solid #333;
    margin-top: -.75em;
}
.phone{
	display: flex;
    flex-flow: row;
    width: 1.5em;
    height: 2em;
    background: #eee;
    overflow: hidden;
    position: relative;
    border: .15em solid #333;
    justify-content: center;
    align-items: center;
    border-radius: .2em;
}
.phone::after{
	content: "";
    width: .15em;
    height: .15em;
    background: red;
    box-shadow: 0 .25em, .25em .25em, .25em 0, -.25em 0, -.25em .25em, 0 .5em, .25em -.25em, 0 -.25em, .25em -.25em;
}
.pin{
    width: 2em;
    height: 2em;
    display: flex;
    border-radius: 50% 50% 0 50%;
    transform: rotate(45deg);
    border: .2em solid #333;
    align-items: center;
    justify-content: center;
    background: #eee;
    /*align-self: flex-start;*/
    font-size: 80%;
}
.pin::after{
	content: "";
    width: .75em;
    height: .75em;
    background: tomato;
    border-radius: 50%;
    border: .2em solid #333;
}
.ibx {
    background: #eee;
    display: flex;
    height: 3em;
    width: 3em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5em;
}



.contact-links>ul{
	display: flex;
    list-style: none inside;
    margin: 0;
    padding: 0;
    gap: 2rem 2ch;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    font-size: 1rem;
}
.contact-links li{
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 15rem;
}

/*=== CENNIK ====*/

#cennik .contact-links li{	
	display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1 1 15rem;
    flex-flow: column;
}
.contact-links a {
    font-weight: 600;
    color: var(--b_color);
    font-size: .7em;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#cennik .hse{
	margin: -.1em 0;
	font-size:1em;
}
#cennik .hse:first-of-type{
	font-size:1.25em;
}



.hse-bg{
	display: flex;
    flex-flow: column;
    flex: 0 1 max(32rem, 45%);
}

.hse-wrp {
    display: flex;
    font-size: 1em;
    padding: 0;
    height: 2em;
    border-radius: 2em;
    border-block-end: .2em solid #ccb;
    background: linear-gradient(180deg, transparent 23%, lightyellow 0, #ccb 30%, #cfa 108%) bottom / 100% no-repeat, radial-gradient(circle at 50% -35%, transparent 35%, skyblue 36%) center top / 4% repeat-x;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    max-width: 24rem;
	align-items: baseline;
}
.hse-wrp.l{
	justify-content: flex-start;
    max-width: 32rem;
    width: 100%;
    font-size: 1.25rem;
	position: relative;
}

/*=== HOUSE ====*/

.hse {
    --fills: ghostwhite;
    --roof: tomato;
    --cube: var(--b_color);
    display: flex;
    flex-flow: column;
    background: var(--fills);
    width: auto;
    height: 1.2em;
    border-radius: .2em;
    justify-content: center;
    align-items: center;
    color: var(--b_color);
    font-size: .75em;
    border: .2em solid var(--cube);
    border-top: none;
    margin: -.55em .15em;
}


.hse::after{
	content: "";
    transform: scale(1, .75) rotate(45deg);
    margin-top: -1.85em;
    border-radius: .15em;
    width: 1.5em;
    height: 1.5em;
    border-left: .3em solid var(--roof);
    border-top: .3em solid var(--roof);
}
.hse::before{
	content: attr(data-inf);
    line-height: .8em;
    font-weight: 600;
    color: var(--b_color);
    margin-top: 0;
}
.hse-txt{
	text-align:left;
	margin:4em 0;
}
.hse-txt>h2{
	margin:2em;
}

.hse-txt>ul{
	list-style: disc inside;
	padding:0
}


.date{
    display: flex;
    padding: .5rem 0;
    font-weight: 600;
    flex: 1 0 2em;
    align-self: flex-start;
    width: 100%;
    border-block-start: 1px dashed #ccc;
}
.fee{
	display: flex;
    margin: .5em .75em 0;
    padding: .2em;
    align-self: center;
    font-size: .75em;
    font-weight: 600;
    line-height: .9;
    background: ghostwhite;
    border-radius: .5em;
}


/*=================== GALERIA ========================*/


.gal{
	display: flex;
    background: var(--b_color);
    flex-flow: column;
}

.gwraper{
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 1rem;
    align-items: flex-start;
    flex-flow: row wrap;
    position: relative;
	z-index:0;
    background: var(--b_color);
    padding: .5em 0;
}

.onoff{
	--bordc:#123;
	cursor: pointer;
    width: 1rem;
    aspect-ratio: 1;
    border-image: linear-gradient(to top right, var(--bordc) 30%, transparent 31%, transparent 69%, var(--bordc) 70%) 2 / 2px;
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 2;
}

.gwraper.on .onoff{
	--bordc:white;
	position: absolute;
    z-index: 4;
}
.gwraper.on{
	position:fixed;
	inset:0;
	z-index:3
}
.gwraper.on .my-image{
	object-fit: scale-down;
    object-fit: contain;
    max-width: 800px;
}
.gwraper.on>.imgbox{background:var(--b_color);height: 100%;}

.imgbox{
	display: flex;
    position: relative;
    justify-content: center;
    aspect-ratio: 1.5;
    border: none;
    background: transparent;
    width: 100%;
    max-width: 800px;
    margin: 1px;
}
.btns {
    display: flex;
    position: absolute;
    z-index: 1;
    inset: .5em;
}
#next-button, #prev-button {
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: flex-end;
    border: none;
    background: none;
	font-size:2em;
}
#prev-button {
    transform: scale(-1,1);
}
button::after{
	content: "";
	--edg:#ccc;
    width: 1em;
    height: 1em;
    display: flex;
    transform: rotate(45deg);
    border-image: linear-gradient(to bottom left, var(--edg) 50%, transparent 50%, transparent) 3 / 3px;
    margin: .5em;
}
button:hover::after{
    --edg:deepskyblue;
}
.imgbox>img {
    display: flex;
    object-fit: scale-down;
    object-fit: cover;
    width: 100%;
    border: none;
}

.desc {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    background: #0005;
    margin: 0;
    color: white;
    padding: 0;
    font-size: .7rem;
    line-height: 1.75;
}


#gnav{
	justify-content: center;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: .5em;
    padding: 1em;
    background: ghostwhite;
}
#gnav>span {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    font-size: .8em;
    width: 2em;
    aspect-ratio: 1;
    line-height: 2;
}


/* ==== FOOTER ====*/

footer{
	background: url(../gfx/bustiki.jpg) no-repeat center / cover fixed;
    color: white;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 0;
    gap: 2rem;
}
footer>h3{
	display: flex;
    gap: .5em;
    margin: 0;
}

.hm{
	display: flex;
    flex-flow: column;
    width: 2em;
    height: 1em;
    background: white;
    justify-content: center;
    font-size: .25em;
    align-items: center;
    cursor: pointer;
}

.hm::before {
    content: "";
    position: absolute;
    /* background: red; */
    padding: 3em;
    border-radius: 50%;
    border: .4em solid white;
    margin-top: -1em;
}
.hm::after{
    content: "";
    width: 1em;
    height: 1em;
    margin-top: -.75em;
    transform: rotate(45deg) scale(1.5);
    border-left: .5em solid white;
    border-top: .5em solid white;
}
.hm:hover::before{background:goldenrod;}

/* ==== FOOTER ====*/

/*Spinner

@keyframes move {
  0% {left: 10%;}
  75% {left:90%;}
  100% {left:10%;}
}

.spinner div {
  width: 10px;
  height: 10px;
  position: absolute;
  left: -10px;
  bottom:2em; 
  border-radius: 50%;
  animation: move 3s infinite cubic-bezier(.2,.64,.81,.23);
}
.spinner div:nth-child(2) {
  animation-delay: 150ms;
  background-color: #e19;
}
.spinner div:nth-child(3) {
  animation-delay: 300ms;
  background-color: #19e;
}
.spinner div:nth-child(4) {
  animation-delay: 450ms;
  background-color: #1e9;
}
*/