html {
    container-type: scroll-state;
    container-name: my-page;
    scroll-behavior: smooth;
}
.wp-block-buttons>.wp-block-button {
    width:48% !important;
}

.wp-block-button {
    font-family: "botanica-sans", sans-serif;
}

/** SCROLL-STATE : Show button when page can be scrolled up **/
@container my-page scroll-state(scrollable: top) {
	.back-to-top {
		translate: 0 0 !important;
		}
}

.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 48px;
	height: 48px;
	background: #3b82f6;
	color: #fff;
	text-decoration : none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.24rem;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
	z-index:100;

	/* Hidden by default - slides in from the right */
	
	translate: 80px 0;
	transition: translate 0.3s ease, background 0.2s;

	}

back-to-top:hover {
	background: #2563eb	
	}

body {
                font-size: 1em;
                line-height: 1.4em;
                transition: translate 0.3s ease, background 0.2s;
            }

            top {

            }

            top img {
                width: 50%;
                height: auto;
                display: block;
                margin: 50px auto;
            }

            main, footer {
                display: block;
                width: 90%;
                margin: 0 auto
            }

            main h2 {
                font-family: "botanica-sans", sans-serif;
                font-weight: 400;
                font-style: normal;
                text-transform: uppercase;
                font-size: 2.4em;
                text-align: center;
                margin-bottom: 40px;
                position: relative;
                width: auto;
                display:block;
                line-height: 1em;
            }

            main h2:before {
                content: " ";
                background: url("../img/heading-left.png") top left no-repeat;
                height: 40px;
                width: 40px;
                display: block;
                position: absolute;
                left: 0;
                top:0
            }

            main h2:after {
                content: " ";
                background: url("../img/heading-right.png") top left no-repeat;
                height: 40px;
                width: 40px;
                display: block;
                position: absolute;
                right: 0;
                top:0
            }

            main h3 {
                display: block;
                text-align: left;
                font-family: "sketchnote-square", sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 1.6em;
                margin-bottom: 18px;
                line-height: 1.1em;
                color: #1d9fcd;
            }

            main h3 strong {
                text-align: right;
                display: block;
                margin-top: -23px;
            }

            main p:first-of-type {
                border-bottom: 0 !important
            }

            main p {
                font-size: 1.4em;
                font-family: "botanica-sans", sans-serif;
                font-weight: 400;
                font-style: normal;
                padding-bottom: 15px;
                border-bottom: 2px dotted #1d9fcd;
            }
            footer {
                margin: 150px auto;
                color: #f19dc3;
            }

            footer p {
                font-size: 1.6em;
                text-align: center;
                font-family: "botanica-sans", sans-serif;
                font-weight: 400;
                font-style: normal;
                margin-bottom: 20px;
                line-height: 1.1em;

            }

            footer p span {
                font-size: 1.6em;
                color: black;
            }

            footer h4 {
                transform: rotate(-10deg);
                display: block;
                height: 120px;
                font-family: "botanica-sans", sans-serif;
                font-size: 3.5em;
                text-transform: uppercase;
                text-align: center;
                line-height: 0.9em;
                margin-bottom: 30px;
                padding-top: 50px;
                background: url('../img/Heart.png') top center no-repeat
            }

.page-template-daytime {
    background: #333 !important;
}