@import url('https://fonts.googleapis.com/css2?family=Ruda&family=Waiting+for+the+Sunrise&display=swap');


* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  color: #333;
}

body {
	font-family: 'Ruda', sans-serif;
  background: seashell;
  font-size: 0.85rem;
}


h1 {
  font-size: 1rem;;
}

.space {
  height: 200px;
}

.main-header {
  /* background:  #aeb6bf; */
  padding: 20px 40px;
}

.info {
  /* background: red; */
  /* text-align: center; */
  margin-top: 5px;
  font-size: 0.9rem;
}
a {
  color: OrangeRed;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: black;
}
ul{
  /* font-weight: bold; */
  /* margin-right: 300px; */
}

ul li{
  list-style: none;
  color: OrangeRed;
  display: inline-block;
  cursor: pointer;
  margin: 0 0 5px 10px;
}
ul li:hover {
  color: black;
}


.big-box {
  /* background: salmon; */
  width: 1200px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.top-text {
  text-align: right;
  /* background: salmon; */
}
.poem {
  font-family: 'Waiting for the Sunrise', cursive;
  font-size: 3rem;
  line-height: .9;
}

	#before-after{
		position: relative;
		width: 800px;
		height: 579px;
		border: 2px solid grey;
		/* margin: 30px auto 0px;; */
	}

		.view{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		  .view-before{
			  z-index: 100;
		  }

      .view-after{
				z-index: 200;
			}

			#dragme{
				position: absolute;
				width: 5px;
				height: 100%;
				top: 0px;
				left: 0px;
				background-color: black;
				cursor: pointer;
				z-index: 300;
			}

			/*
				Controls
			*/



::selection {
  background: gold;
}