body, html {
  height: 100%;
  margin: 0;
  background: url('https://i.postimg.cc/Jz8CrW0J/rose-bg-2.png');
  background-repeat: repeat;
  overflow: auto;
  color: #B07FAB;
  font-family: "Faustina", serif;
  font-size: 20px;
}

.left {
  position: absolute;
  top: 0;
  left: 16px;
  text-align: left;
}

.right {
  position: absolute;
  bottom: 0;
  right: 16px;
  text-align: right;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
	position: relative;
    border: 0px;
    height: 30px;
    width:43%;
    margin: auto;
    background-image:url('https://i.postimg.cc/vHnTP3sP/pa04-rose-line-1.gif');
    background-repeat:no-repeat;
    
}

h1 {
	font-family: "Lavishly Yours", cursive;
    font-size: 70px;
    margin: 0;
    color: #fdcf42;
}

h2 {
	font-family: "Lavishly Yours", cursive;
    font-size: 45px;
    margin: 0;
    color: #fdcf42;
}

h3 {
	font-family: "Lavishly Yours", cursive;
    font-size: 30px;
    margin: 0;
    color: #fdcf42;
}


.img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.glow {
	text-shadow: rgba(242,191,255,0.9) 0px 0px 10px; 
}

.image-left {
    float: left;
    margin-right: 15px;
}

#example-five {
  position: relative;
}
#example-five-checkbox {
  display: none;
}
#example-five-checkbox:checked + #example-five:after {
  content: "Being honest may not get you many friends, but it’ll always get you the right ones.";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

/*box*/

.box {
  margin:1em 0; 
  width:800px;
  padding:20px;
  overflow: scroll;
}
.u01 {
  background:url(https://i.postimg.cc/Hnw2twkj/f-ue.gif) repeat-x;
  height:32px;
  margin:0 32px
}
.s01 {
  background:url(https://i.postimg.cc/kG3s819k/f-sita.gif) repeat-x;
  height:32px;
  margin:0 32px;
}
.box-top {
  background-image:url(https://i.postimg.cc/y8Vfvb9K/f-kado1.gif), url(https://i.postimg.cc/y8vL5yXZ/f-kado2.gif);
  background-position:top left, top right;
  background-repeat:no-repeat, no-repeat;
  height:32px;
}
.box-center {
  background-image:url(https://i.postimg.cc/4dhwYkC6/f-migi.gif), url(https://i.postimg.cc/Kv7q721Q/f-hidari.gif);
  background-position:top right, top left;
  background-repeat:repeat-y, repeat-y
}
.box-inner {
  background:#fff;
  margin:0 32px;
  padding:30px;
}
.box-bottom {
  background-image:url(https://i.postimg.cc/gjCCxqBJ/f-kado3.gif), url(https://i.postimg.cc/XNrXyjzS/f-kado4.gif);
  background-position:top left, top right;
  background-repeat:no-repeat, no-repeat;
  height:32px
}

.boxcontent  {
  margin:1em 0; 
  width:650px; 
  height:400px;
  padding:20px;
  overflow: scroll;
}

::-webkit-scrollbar {
width: 12px;
height: 12px;
color: #fdcf42;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

/*buttons*/
a.button {
  background-color: #fdcf42;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  transition: 0.3s;
  font-family: "Lavishly Yours", cursive;
  font-size: 30px;
  color: #B07FAB;
}

a.button:hover {
  background-color: #B07FAB;
  color: #fdcf42;
}
/*tabs*/

/*tab style*/
.tab {
  overflow: hidden;
  border: 1px dotted purple;
  background-color: #F4CA02;
  border-radius:6px;
}

/*tab button style*/
.tab button {
  background-color: #F4CA02;
  float: center;
  border: none;
  outline: none;
  border-radius:6px;
  cursor: pointer;
  padding: 15px;
  transition: 0.3s;
  font-family: "Lavishly Yours", cursive;
  font-size: 20px;
  color: #B07FAB;
}

/*tab button hover*/
.tab button:hover {
  background-color: #B07FAB;
  color: #F4CA02;
}

/*tab content style*/
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  border-radius:6px;
  font-family: "Scheherazade New", serif;
}

/*gallery*/

.gallery {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}


div.gallery {
    width: 100%;
    height: auto;
    transition:0.3s;
}

div.gallery img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  opacity: 0.8;
  transition:0.3s;
}

div.gallery img:hover {
  opacity:1;
}

/*fonts*/

.lavishly-yours-regular {
  font-family: "Lavishly Yours", cursive;
  font-weight: 400;
  font-style: normal;
}

.faustina-<uniquifier> {
  font-family: "Faustina", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

@media screen and (max-width: 800px) {
    .wrapper {
        flex-direction: column;
    }
}


/* mouse over link */
a:hover {
  color: #f4ca02;
  transition: 0.3s;
}