body { background-color: lightgrey; color: white; font-family: Rodin; background-image: url("/cloudy.gif"); }
a {text-decoration: none}

#apartments { width: 540px; background-image: url("/apartments/apartments2.png"); justify-content: space-between; background-size: 100%;}

/* This should include every single type of icon */
#home, #problem, #empty, #friend, #play, #love, #nothome, #athome, #sad, #swirl, #mad, #sleep
{width: 55px; height: 47px; background-color:transparent; background-size: 100%; display: inline-block;}

/* This loads all of the images for the icons. */
#empty      { background-image: url("/apartments/i/empty.png")}
#home       { background-image: url("/apartments/i/homeA.gif")}
#home:hover { background-image: url('/apartments/i/homeB.gif')}
#problem       { background-image: url("/apartments/i/problemA.gif")}
#problem:hover { background-image: url('/apartments/i/problemB.gif')}
#friend       { background-image: url("/apartments/i/friendA.gif")}
#friend:hover { background-image: url('/apartments/i/friendB.gif')}
#play       { background-image: url("/apartments/i/playA.gif")}
#play:hover { background-image: url('/apartments/i/playB.gif')}
#love       { background-image: url("/apartments/i/loveA.gif")}
#love:hover { background-image: url('/apartments/i/loveB.gif')}
#nothome       { background-image: url("/apartments/i/nothomeA.gif")}
#nothome:hover { background-image: url('/apartments/i/nothomeB.gif')}
#athome       { background-image: url("/apartments/i/athomeA.gif")}
#athome:hover { background-image: url('/apartments/i/athomeB.gif')}
#sad       { background-image: url("/apartments/i/sadA.gif")}
#sad:hover { background-image: url('/apartments/i/sadB.gif')}
#swirl       { background-image: url("/apartments/i/swirlA.gif")}
#swirl:hover { background-image: url('/apartments/i/swirlB.gif')}
#mad       { background-image: url("/apartments/i/madA.gif")}
#mad:hover { background-image: url('/apartments/i/madB.gif')}
#sleep       { background-image: url("/apartments/i/sleepA.gif")}
#sleep:hover { background-image: url('/apartments/i/sleepB.gif')}

/* This is the pop up box's interior. */
#apt {display: inline-block; width: 200px; background-size: 100%; background-repeat: no-repeat; background-image: url("/apartments/bar.png"); padding: 2px; }
#ap2 {background-color: transparent; width: 80px; display: inline-block; padding: 0px;}
#ap3 {background-color: transparent; width: 120px; display: inline-block;padding: 0px;}

/* This is the Tomodachi Life buttons. */
.tomo1 { display: inline-block; background: black; padding: 2px;   border-radius: 10px; max-width: fit-content; text-decoration: none} 

.tomo2 { background: #fe6d00; font-family: Rodin; font-size: 16px; color: black; text-shadow: 1px 1px white; border-radius: 8px;  border-left: 3px solid #fedbc7; border-top: 3px solid #fedbc7; border-right: 3px solid #c76400; border-bottom: 3px solid #c76400; padding-left: 20px; padding-right: 20px; } 

.tomo2:hover { background: #00fefc; font-family: Rodin; font-size: 16px; color: black; text-shadow: 1px 1px white; border-radius: 8px; border-left: 3px solid #c7fffe; border-top: 3px solid #c7fffe; border-right: 3px solid #34b0ae; border-bottom: 3px solid #34b0ae; padding-left: 20px; padding-right: 20px; } 

.tomo3 { display: inline-block; background: black; padding: 2px;   border-radius: 10px; max-width: fit-content; text-decoration: none} 

.tomo4 { background: #fe6d00; font-family: Rodin; font-size: 12px; color: black; text-shadow: 1px 1px white; border-radius: 8px;  border-left: 3px solid #fedbc7; border-top: 3px solid #fedbc7; border-right: 3px solid #c76400; border-bottom: 3px solid #c76400; padding-left: 15px; padding-right: 15px; } 

.tomo4:hover { background: #00fefc; font-family: Rodin; font-size: 12px; color: black; text-shadow: 1px 1px white; border-radius: 8px; border-left: 3px solid #c7fffe; border-top: 3px solid #c7fffe; border-right: 3px solid #34b0ae; border-bottom: 3px solid #34b0ae; padding-left: 15px; padding-right: 15px; } 

@font-face { font-family: Rodin; src: url(https://coffeebug.neocities.org/rodin.otf); } 



/* Popup container from w3schools */
pop {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
pop pop2 {
  visibility: hidden;
  width: 216px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 4px 0;
  position: absolute;
  font-size: 14px;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -108px;
}

/* Popup arrow */
pop pop2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
pop .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.25s;
  animation: fadeIn 0.25s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}