:root {
    --color-one: rgb(249, 244, 173);
}
body,html {
  margin:0;
  padding:0;
}
header {
  border: 2px solid black;
  background-color: rgb(249, 214, 154);
  background-image: url("/IMGs/leo/sleeping.png");
  background-repeat: no-repeat;
  max-width: 30rem;
  height: 18rem;
  margin: 1rem auto;
}

.back-button {
    position: absolute;
}

body {
  display: flex;
}

.wrapper {
  background-color: var(--color-one);
  border-left: 3px dotted rgb(55, 10, 10);
  border-right: 3px dotted rgb(55, 10, 10);
  outline: 4px solid var(--color-one);
  box-shadow: 10px 4px 4px var(--color-one),
  -10px 4px 4px var(--color-one)
  ;
  margin: -3rem auto;
}

h2 {
  display: block;
  width: 100%;
  text-align: center;
}

#like-dislike {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.likes {
  grid-column: 1;
  list-style: url("/IMGs/leo/heart.gif");
}
.dislikes {
  grid-column: 2;
  list-style: url("/IMGs/leo/angy.gif");
}

.gallery {
  max-height: 30rem;
  overflow: scroll;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery img {
  width: 180px;
  height: 200px;
  object-fit: cover;
  border: 2px solid rgb(52, 3, 10);
  border-radius: 6px;
  margin: 2px;
}

.gallery img:hover {
  object-fit: contain;
}

/*=============================================
=                 Page Style                =
=============================================*/

* {
  cursor: url("/IMGs/leo/garfield.png"), auto;
}

body {
  font-family: "MSPgothic";
  background-image: url("/IMGs/leo/2398756.png");
  background-attachment: fixed;
}

h1 {
  font-family: "Spirit";
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
  color: rgb(255, 108, 0);
  text-shadow: 1px 1px 2px #820000;
  margin: 1rem;
}

.beginning {
  font-weight: bold;
}

.textbox {
  border: 4px outset #8d5454;
  border-radius: 2rem;
}

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}