/* main color palette !!! backgrounds: #FFF6EB    accents: 8D9443   text: #362b1a */




/* pop up funny */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #FFF6EB;
  color: #8D9443;
  text-align: center;
  width: 100px;
  padding: 6px;
  border: 1px dashed brown;
  position: absolute;
  z-index: 4;
  top: 100px;
  left: 400px;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.5));
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
  
#fill {
  background-image: url(almostmebear.png);
  background-size: 498px, 501px;
  width: 498px;
  height: 501px;
  left: 100px;
  top: 2px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  image-rendering: initial;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.5));
  animation: fill 1s infinite;
  animation-timing-function: ease-in-out;
}
@keyframes fill {
  0% { transform: translate(0,0px); }
  50% { transform: translate(0,15px); }
  100% { transform: translate(0,-0px); }
}


#loungebear {
  background-image: url(loungebear.png);
  background-size: 249px, 250px;
  width: 498px;
  height: 501px;
  left: 970px;
  top: 970px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  image-rendering: initial;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.5));
}
#myname {
  background-image: url(myname.png);
  background-size: 300px,300px;
  width: 300px;
  height: 300px;
  left: 530px;
  top:-150px;
  background-repeat: no-repeat;
  position: absolute;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}


p {
  color: #362b1a;
  font-family: Times New Roman;
}


body {
 background-repeat: no-repeat;            /* Prevent the image from repeating */
  background-position: center center;      /* Center the image within the element */
  background-size: cover;                  /* Scale the image to cover the entire container */
 background-attachment: fixed;            /* Keep the image fixed relative to the viewport */
 background-image: url("https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExN3c3bG9mdzN2OWVtcjJ2enY0czk0eHcwMWh4N3FyYmRhaTNkaWhrdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xUA7biAmbpRS5yeajK/giphy.gif");
 background-color: #cccccc;
 margin: 0; 
}


#logo {
  margin: auto;
  padding: 15px;
  text-align: center;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.5));
}
/* allllll the types of text! */
#heading {
  font-family: 	Times New Roman;
  font-size: 50px;
}




/* links */
a:link {
  background-color: #c2b7a5;
  color: #362b1a;
}

a:visited {
  background-color: #a89474;
}

a:hover {
  background-color: #85765e;
}

a:active {
  background-color: white;
} 





/*  main stuff! */
#container1 {
  font-family: Times New Roman;
  font-size: 20px;
  background-color: #FFF6EB;
  color: #362b1a;
  border: #8D9443 7px groove;
  margin: auto;
  height: 900px;
  width: 800px;
  padding: 5px;
  text-align: center;
}
#container2 {
  font-family: Times New Roman;
  font-size: 20px;
  color: #362b1a;
  text-align: center;
  column-rule: 4px double #8D9443;
  columns: 100px 3;
  justify-content: center;
}

#label {
  font-family: Times New Roman;
  font-size: 30px;
  text-align: center;
}
.container {
  display: flex;
  text-align: center;
  justify-content: center;
}

.container div {
  background-color: #FFF6EB;
  border: #8D9443 7px groove;
  margin: 20px;
  color: #362b1a;
  text-align: center;
  padding: 20px;
  font-size: 24px;
}