/* Notice there is an ID named #container. This is standard practice 
   for creating an invisible “box” around the entire page content. 
   This helps develop fluid pages for mobile devices and gives a parent 
   element to hold all page elements. It could be named anything, but 
   container is standard.*/

@charset "utf-8";

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Quicksand', Arial, Tahoma, sans-serif;
  color: #000;
}


/*
body {
   font-family: 'Quicksand', Arial, Tahoma, sans-serif;  
   color: #000000;
   } */


/* Headers get the playful font */


h1, h2, h3 {
  font-family: 'Baloo 2', cursive; 
}


h1 {
   color: #285b44;
  font-size: clamp(2rem, 5vw, 3em); 
   }

h2 {
   color: #285b44;
   text-align: center;
   }

p  {
  font-size: clamp(1rem, 2.4vw, 18pt);
   font-weight: bold;
   margin-left: 2.7%;
   }

header {
   background-color: #fdfdea; 
   color: #ffffff;
   text-align: center;
   padding: 0px;
   width: 80%;
   margin: 30px auto 30px;   /* centers header and adds bottom space */

   border: 3.7px solid #5C4033; 
   }

header h1, header h2, header h3,
footer {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}


#container {
   width: 100%;
   }


main {
   width: 80%;
   background-color: #fdfdea; 
   padding: 5px;
    margin: 30px auto 0;   /* top space + centered */

   border: 3.7px solid #5C4033;  
   border-radius: 0.4em;
   }


footer {
   clear: both;
  background-color: transparent; /* ✅ makes it see-through */
   color: #fff;
   text-align: center;
     padding: 5px;
   font-size: 12pt;
   width: 100%;

   }

nav {
   color: #eaf4e9; 
   padding: 5px;
   width: 80%;
   margin-left: 10%;
   font-weight: bold;
   }


nav ul {
   list-style: none;
   }


nav ul li {
   float: left;
   padding: 5px;
   text-align: center;
   border-radius: 0.4em;
   }

nav ul li a:link, nav ul li a:visited {
   display: block;
   width: 150px;
   color: #285b44;
   padding: 2px 4px 2px 4px;
   border-radius: 0.2em;
   text-decoration: none;
   }

nav ul li a:hover {
   color: #000000;
   background-color: #d1c8ad; 
   }

nav ul li.current {
   background-color: #285b44; 
   }



table#foodmenu, table#beverages {
   width: 100%;
   background: #ffff7e;
   border: 2.7px solid #ffc727;
   } 

table#foodmenu tr.rowcolor, table#beverages tr.rowcolor {
   background: #fc8c13;
   }

table#foodmenu caption, table#beverages caption {
   font-size: 2em;
   font-weight: bold;
   color: #fc8c13;
   padding: 5px;
   }


.forms {
   padding: 20px;
   }

.forms label {
   float: left;
   width: 40%;
   }

.forms div {
   clear: left;
   margin: 0 0 0.5em 0;
   }

.forms .radio label, .forms .checkbox label {
   float: none;
   }

.forms .radio legend, .forms .checkbox label {
   float: left;
   width: 40%;
   margin: 0;
   padding: 0;
   }

.forms .radio, .forms .checkbox {
   border: none;
   clear: left;
   margin: 0 0 0.5em 0;
   padding: 0;
   }

.forms input[type="text"], .forms input[type="email"], .forms textarea {
   width: 55%;
   }

.forms div {
   clear: left;
   margin: 0 0 0.5em 0;
   background-color: #d7ffdf;
   padding: 0.5em;
   border-radius: 0.5em;
   }

.radio, .checkbox {
   background-color: #d7ffdf;
   padding: 0.5em;
   border-radius: 0.5em;
   }

.forms div.submitbutton {
   background-color: transparent;
   text-align: center;
   }

.forms input[type="submit"] {
   font-size: 1.2em;
   border: 1px solid #cccccc;
   background-color: rgb(255,255,255);
   border-radius: 0.2em;
   padding: 0.2em 1em 0.2em 1em;
   box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
   }

.forms input[type="number"] {
   background-color: rgb(255, 255, 255);
   text-align: center;
   }

input, textarea {                         
   background-color: rgb(255,255,255);
   border: 2px solid #000000;
   }

div.reset {
   text-align: center;
}

.shortcuts {
  text-align: center;
  margin: 20px auto;
}

/* Shared button base styles */
.shortcuts a {
  display: inline-block;
  margin: 0 15px;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


/* Blue theme for Fissubi */
.fissubi-btn {
  color: #ffffff;
  background-color: #4299e1;
  border: 2px solid #2b6cb0;
}

.fissubi-btn:hover {
  background-color: #2b6cb0;
  box-shadow: 0 0 12px #4299e1;
}





/* Green theme for Bugami */
.bugami-btn {
  color: #ffffff;
  background-color: #48bb78;
  border: 2px solid #2f855a;
}

.bugami-btn:hover {
  background-color: #2f855a;
  box-shadow: 0 0 12px #48bb78;
}



/* Silver theme for Bugami */
.acatgame-btn {
  color: #ffffff;
  background-color: #9aa0a6;
  border: 2px solid #6b7280;
}

.acatgame-btn:hover {
  background-color: #6b7280;
  box-shadow: 0 0 12px #9aa0a6;
}





.app-iconfissubi {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 200px;
  border: 4px solid #285066; /* blue tone */
  border-radius: 12px;
}
.app-iconbugami {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 200px;
  border: 4px solid #285b44;
  border-radius: 12px;
}
.app-iconacatgame {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 200px;
  border: 4px solid #6b7280;   /* dark silver frame */
  border-radius: 12px;
}



/* Runner container styled like your banner */
.cat-runner-wrap {
  width: 100%;
  max-height: 220px;          /* match your .banner-above height */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #f8fafc, #e5e7eb); /* subtle silver backdrop */
  overflow: hidden;
}

/* The animated image itself */
.cat-runner {
  height: 220px;              /* keeps a consistent “banner” height */
  width: auto;                /* preserve aspect */
  display: block;
  image-rendering: auto;      /* crisp on mobile; try 'pixelated' for retro look */
}




.app-icon:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  transition: all 0.2s ease-in-out;
}

.banner-above {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  margin-bottom: 20px;
}


html {
  scroll-behavior: smooth;
}


.google-play-badge {
  display: block;
  margin: 20px auto;
  height: 60px;
}