/* made by /powfu! see /resource 4 more templates and awesome code snippets! ✧ദ്ദി( ˶^ᗜ^˶ ) */

:root[data-theme="light"] {
    --color: #222026;
    --background: #bbbabf;
}

:root[data-theme="dark"] {
    --color: #bbbabf;
    --background: #222026;
}

body {
 background: var(--background); 
}

*, a {
 color: var(--color); 
}

.alt-page:target {
        display: block;
}

.alt-page:not(:target) {
        display: none;
}  

main {
 margin: auto;
 width: 890px;
}

.text-container {
 background: none;
  position: relative;
  overflow: hidden;
  height: 600px;
}

.text {
  width: 579px;
  height: 579px;
  background-image: url(https://i.postimg.cc/9Q2Q0RYz/bg.png);
  background-repeat: no-repeat;
  background-size: 90%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
}

.flip {
 width: 127px;
 height: 495px;
 margin-top: 40px;
 margin-left: 390px;
 transform: rotate(13deg);
 transition: transform 0.4s ease;
}


.flip:hover {
-webkit-transform: rotate(7deg);
	transform: rotate(7deg);
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.back {
  background-image: url(https://i.postimg.cc/VsS6VcNs/bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 875px;
  height: 679px;
  margin-left: 0px;
  margin-top: -20px;
  padding: 1px;
}

.backtext1 {
  width: 370px;
  height: 505px;
  overflow: auto;
  margin-top: 40px;
  margin-left: 40px;
  p {
    color: black;
  }
}

.backtext2 {
  width: 370px;
  height: 505px;
  overflow: auto;
  margin-top: -505px;
  margin-left: 465px;
  p {
    color: black;
  }
}

.button, .button:hover {
 background: var(--color);
 color: var(--background);
}