html {
    height: auto;
}
body {
    margin: 0;
    background:linear-gradient(to bottom, rgba(254, 201, 205, 0.52), rgba(255, 237, 237, 0.73)),
    url('bg1_chekered.png');
    background-attachment: fixed;
    background-repeat: repeat;
    height: 100%;
}


@font-face {
  font-family: Milky; 
  src: url(Milky-Boba.ttf); 
}
@font-face {
  font-family: Yaelah; 
  src: url(Yaelah.ttf); 
}

h1 { 
  color: #753043;
  font-family: Milky;
  font-size: 2rem;
  margin-bottom: 10px;
  margin-left: 76px;
  
}
p {
  color:white;
  font-family:Yaelah;
  font-size:1.1rem;
}

#topbar {
  background: url('home_images/topbarLoop_4.png');
  background-repeat: repeat-x;
  width: 100%;
  height: 180px;
  animation: bgScrollLeft 120s linear infinite;
}
#bottombar {
  margin-left:auto;
  margin-right:auto;
	width: 100%; 
	max-width: 900px; 
  display:flex;
  justify-content: center;

}
.myButton {
 text-align: center;
 font-family: Milky;
 font-size: 1.5rem;
 color: #D27A81;
 background: url('home_images/aboutmBubble.png');
 background-repeat: no-repeat;
 background-size: cover;
 width:200px;
 height:119px;
}
.myButton > a {
  color: #AE464E;
  position:relative;
  top: 29px;
  user-select: none;
}
.myButton2 {
 text-align: center;
 font-family: Milky;
 font-size: 1.5rem;
 color: #AE464E;
 background: url('home_images/aboutmBubble2.png');
 background-repeat: no-repeat;
 background-size: cover;
 width:200px;
 height:119px;
}
.myButton2 > a {
  color: #AE464E;
  position:relative;
  top: 29px;
  user-select: none;

  
}

@keyframes bgScrollLeft {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -2462px 0;
  }
}

#centerpiece {
  text-align: center;
  font-family: Milky;
  font-size:2.8rem;
	color: black;
	margin-top: -120px;
  margin-left:auto;
  margin-right: auto;
	width: 100%; 
	max-width: 700px; 
	padding: 10px;
	background: -webkit-linear-gradient(#FF9BA4, #A32E39);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

a {
  color: black;
  text-decoration: none;
  user-select: none;
}

 a:hover {
  color: pink;
  visibility:visible;
}


ul {
 display: inline-block;
 text-align: left;
 margin-top: 10px;
	
}

li {
  margin-bottom: 20px;
  height: 60px;
}

h2 {
  color: #753043;
  font-family: Yaelah;
  font-size: 1rem;
  margin-bottom: 10px;
  margin-left: 76px;
}


ul.hover-list {
    list-style-type: none;
    padding: 10px;
    margin: 0;

	
}

ul.hover-list li:hover {
    background-image: url(home_images/website_fingerbob.gif);
    background-position: 0.8rem;
    background-size: 5rem;
    background-repeat: no-repeat;
    list-style-position: outside; 
    visibility: visible;
}

ul.hover-list li {
    padding-left: 6.5rem;
    transition: padding-left 0.3s;
}

.button {
	color: purple;
	background-color: pink;
}

.bottomBox {
   content:url(home_images/FooterBox1.gif);
   width: 100%;
   height: 100%
}

.AboutMe {
	box-shadow: 0px 3px 0px 0px #000000;
	background-color:transparent;
	border-radius:20px;
	border:3px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Milky;
	font-size:22px;
	font-weight:bold;
	padding:5px 33px;
	text-decoration:none;
}
.AboutMe:hover {
	background:linear-gradient(to bottom, #e87fb7 5%, #d669b0 100%);
	background-color:#e87fb7;
}
.AboutMe:active {
	position:relative;
	top:1px;
}
#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100px;
}
#topheader {
  position: sticky;
  top: 0;
  display:flex;
  text-align: left;
  color:#AF474F;
	font-family:Yaelah;
	font-size:25px;
  justify-content: space-between;
  z-index:2;
}
#topRightheader {
  position: sticky;
  top: 0;
  display:flex;
  justify-content: flex-end;

}
#pagedesc {
  text-align: left;
  color:#AF474F;
	font-family:Yaelah;
	font-size:20px;
	display:flex;
  margin: auto;
  overflow: auto;
  max-width:70%;
}
#picCaption {
  color: white;
  font-family:Yaelah;
  font-size:20px;
  display:flex;
  margin:auto;
  overflow:auto;
  float:left; 
}
a {
  position: unset;
}

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: black;
  
}

a[data]:hover:after {
  content: attr(data);
  padding: 4px 8px;
  color: #ffb8cb;
  font-family:Yaelah;
  position: absolute;
  left: 0;
  top: 0%;
  white-space: nowrap;
  z-index: 1;
  border-radius: 5px ;
  background: #753043;
}
a[data] {
  position: relative;
  display: inline-block;
}

.main {
  background:linear-gradient(to bottom, #D27A81 60%, #AE464E 100%); 
  border-radius:30px;
  padding:20px;
  width:50%;
  margin-top:auto;
  margin-bottom:auto;
  margin-left: auto;
  margin-right: auto;
  font-size:110%;
  vertical-align:top;
  color:rgb(23,50,102);
}

.image-alt {
  display: none; /* Hide alternative image on default */
}
.image-box input {
  display: none;
}
.image-box:has(input:checked) .image { /* Hide original image if '.image-box' contains a checked input */
  display: none;
}
.image-box:has(input:checked) .image-alt { /* Show alternative image if '.image-box' contains a checked input */
  display: block;
}