body {
  background-color: darkgoldenrod;
  background-image: url('decorations/gingham-lavender.jpg');
  cursor: url("cowboy/claw_cursor.png"), default;
  font-family: 'animal_crossing_wild_worldRg';
  color: saddlebrown;
}


font-face {
  font-family: 'animal_crossing_wild_worldRg';
  src: url('wild-world/animal-crossing-wild-world-webfont.woff2') format('woff2'),
       url('wild-world/animal-crossing-wild-world-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

font-face {
    font-family: 'groovy';
    src: url('groovy/groovy-webfont.woff2') format('woff2'),
         url('groovy/groovy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

P {
  color: antiquewhite;
  text-align: justify;
  font-family:  'animal_crossing_wild_worldRg';
}



a {
  color: thistle;
  text-decoration: none;
  font-family:  'animal_crossing_wild_worldRg';
    cursor: url("cowboy/claw_cursor_hover.png"), auto;
}

a:visited {
  color: hotpink;
  font-family:  'animal_crossing_wild_worldRg';
}

a:hover {
  color: mediumpurple;
  font-family:  'animal_crossing_wild_worldRg'
}

H1{
  color: hotpink;
  text-shadow: 3px 2px 1px antiquewhite;
  text-align: left;
  font-family: 'groovy';
  font-size: 70px;
  line-height: 10px;
}


H2 {
  color: goldenrod;
  font-family:  'animal_crossing_wild_worldRg';
}

H3 {
    color: hotpink;
    font-family:  'animal_crossing_wild_worldRg';
}


li {
  text-align: left;
   padding: 10px;
    background: antiquewhite;
    border: 1px solid goldenrod;
  list-style: none;
  font-size: 15px;
}

li:hover {
 text-align: left;
   padding: 10px;
    background: antiquewhite;
    border: 1px solid goldenrod;
    box-shadow: 2px 2px 2px 1px  goldenrod;
  list-style: none;
  font-size: 15px;
}

.box-one {
    width: 75%;
    padding: 10px;
    margin: 20px;
    text-align: justify
}


img {
  height: auto;
}



.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;

  padding: 10px;
       border-radius: 5px;
}

.container > div {
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
}

.item1 /* header */{
  grid-column: 1 / span 3;
  border: 1px solid transparent;
  margin: 5px;
}

.item2 /* sidebar */{
    grid-column: 1 / span 1;
    grid-row-start: 2;
    margin: 0 5px;
    position: relative;
    top: 0;

    border: 30px solid transparent;
    border-image-slice: 17%;
    border-image-repeat: round;
    background-color: transparent;
}

.item3 /* home page enter tile */{
  grid-column: 1 / span 3;
  grid-row: span 2;
  margin: 75px;
  border: 25px solid transparent;
  border-image: url(decorations/pink_window.png);
  border-image-slice: 17%;
  border-image-repeat: round;
    background-color: rgba(51,47,54,0.85);
}

.item4 /* main page. content */{
  grid-column: 2 / span 1;
  border: 25px solid transparent;
  border-image: url(decorations/pink_window.png);
  border-image-slice: 17%;
  border-image-repeat: round;
    background-color: rgba(51,47,54,0.85);
  margin: 5px 0;

}

.item5 /* footer*/{
  grid-column: 1 / span 3;
  display: inline-block;
    border: 10px antiquewhite;
    background-color: rgba(51,47,54,0.85);
}


.item6 /* fragrance shelf container */{
  grid-column: 2 / span auto;
  border: 25px solid transparent;
  background-color: antiquewhite;
  padding: 0;
}

.card{
  grid-column: 1;
  grid-row-start: 3;
  }

.w3-bar{
  text-align: center;
}


.gallery {
  margin: 5px;
  float: left;
  width: 180px;
    border:20px solid transparent;
  border-image: url(decorations/gold_frame.png);
    border-image-slice: 10%;
    border-image-repeat: round;
}

.gallery-2 {
  margin: 5px;
  float: left;
  width: auto;
    border:20px solid;

}

.gallery:hover {
  transform: scaleX(-1);
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
  font-family:  'animal_crossing_wild_worldRg';
}


recordbutton {
  background-color: transparent;
  margin-left:960px; margin-top:315px; z-index:-1; position:absolute;
      cursor: url("cowboy/claw_cursor_hover.png"), auto;
}

recordbutton:hover {
  transform: rotate(20deg)
}

.cowboybutton{
  background-color: transparent;
  margin-left:600px; 
  margin-top:260px; 
  z-index:0; 
  position:absolute;
  width:145px;
}

.cowboybutton:hover {
  transform: rotate(20deg);
}

.cowboybutton:hover + .cowboyhide{
  display: block;
  z-index:0; 
  position:absolute;
}
.cowboyhide { 
  border: 2px dashed rosybrown;
  text-align: match-parent;
  background-color: rgb(255, 245, 238, .9);
  margin-left:650px; 
  margin-top:350px; 
  position:fixed;
  width: 100px;
  height: 20px;
  display: none;
} 

.guestbutton{
  background-color: transparent;
  margin-left:510px; 
  margin-top:460px;
  z-index:0;
  position:absolute;
  width:150px;
}

.guestbutton:hover {
  transform: rotate(20deg);
}

.fragshelfbutton{
display: block;
position: absolute;
}

.fragshelfbutton:hover {
  transform: rotate(2deg);
  cursor: url("cowboy/claw_cursor_hover.png"), auto;
}

.fragbutton{
  background-color: transparent;
  position: absolute;
}

.fragbutton:hover {
  transform: rotate(-1deg);
  cursor: url("cowboy/claw_cursor_hover.png"), auto;
}

.fragbutton:hover + .hide{
  display: block;
}

.hide { 
    border: 25px solid transparent;
  border-image: url(decorations/pink_window.png);
  border-image-slice: 17%;
  border-image-repeat: round;
    background-color: rgba(51,47,54,0.85);
   grid-column: 3 / span 1; 
   grid-row-start: 3 / span auto;
   display: none;
}