body {
  background-image: url("https://bradbury.com/wp-content/uploads/6G-GRET-4_main.jpg");
  background-size: cover; /* Stretches image to fill screen */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents tiling */
  background-attachment: fixed; /* Keeps image still while scrolling */
  
   
wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: clamp(45vw, 40em, 80vw);
	height: 95vh;
	margin: auto;
}

.main {
	height: 100%;
	flex: 3;
}


.main {
	border: 5px solid #9D8189;
	border-radius: 10px;
	border-bottom: 2px solid #2E2326;
	margin: 1%;
	background: #FFFFFF00;
	overflow: auto;
}

.main img {
	max-width: 100%;
}


.inner {
	padding: 2%;
	height: 90%;
	overflow: auto;
}

h1, h2, h3, h4 {
	font-family: monospace;
	font-size: 1.2em;
	background: #9D8189;
	color: #fff;
	border-bottom: 2px solid #2E2326;
	padding: 1%;
	margin:  0;
}
 

header {
	font-size: 2em;
	font-family: monospace;
	border-bottom: 2px dotted #F4ACB7;
}

header img {
	float: right;
	width: 50%;
}

.footer {
	font-family: monospace;
	border-top: 2px dashed #F4ACB7;
}

a {
	font-family: monospace;
}

a:link, a:visited {
	color: #CD5E72;
	text-decoration: none;
	}			

a:hover, a:active {
	color: #F4ACB7;
	text-decoration: none;
	}
	
ul {
	list-style-image: 
	line-height: 200%;
}

hr {
  width: 100%;
  border-bottom: 10px dotted #F4ACB7;
  border-top: none;
  }
  
/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #2E2326;
  border: 1px solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #F4ACB7;
  border: 1px solid;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFCAD4;
}

::-webkit-scrollbar-button {
  background: #9D8189;
}

::-webkit-scrollbar-button:hover {
  background: #F4ACB7;
}

::-webkit-scrollbar-button:single-button {
  border: 1px solid;
  height: 12px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

#ypsipop {
    background-color: #E8A9CB;
    font-family: monospace;
    border: 6px dotted;
    border-radius: 5px;
    border-color: #49331D;
    width: 420px;
    margin: 0 auto;
    padding: 15px;
}
    

/*mobile view*/

@media only screen and (max-width: 767px) {

<meta name="viewport" content="width=device-width/>
(max-width: 767px) {
  body {
    background-size: contain 100%
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll; 
  }
}
.wrapper {
	width: clamp(45vw, 40em, 80vw);
	padding: 10px;
}

.inner {
	overflow: visible;
}

#ypsipop {
    background-color: #E8A9CB;
    font-family: monospace;
    border: 6px dotted;
    border-radius: 5px;
    border-color: #49331D;
    width: 420px;
    margin: 0 auto;
    padding: 15px;
}