@import url('https://fonts.googleapis.com/css2?family=Asimovian&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@200;300;400&display=swap');

* {
    font-family: Asimovian, Arial, sans-serif;
    box-sizing: border-box;
}
:root {
    --main-bg: white;
}

/*---- INITIAL VALUES----*/
body {
    background-color: rgb(252, 230, 202);
    margin: 0 14%;
    font-size: 14px;
}

section {
    border: 0.22rem solid azure;
    padding: 2rem;
    background-color: rgb(247, 238, 200);
    box-shadow: 0.25rem 0.33rem 0.33rem 0.2rem grey;
    margin-top: 3rem;
}

h1 {
    font-size: 3rem;
    color: brown;
    padding-right: 2rem;
}

h3 {
    font-size: 1.2rem;
    color: rgb(212, 128, 18);
    padding-right: 2rem;
}

p {
    font-family: 'Exo 2', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: rgb(247, 238, 200);
    margin-top: 3.5rem;
    padding-right: 2rem;
}

/*----CONTAINER----*/

.container {
    display: flex;
    background-color: rgb(247, 238, 200);
}


/*----HEADER----*/
#header{
    display: grid;
    margin: 10px 0;
    width: 100%;
   }

#hero_img{
    width: 100%;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
}

/*----NAVIGATION BAR----*/

#navbar {
  background-color: rgb(104, 63, 63);
  overflow: hidden;
}

/* Horizontal list items */
#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Float list items left */
#navbar li {
  float: left;
  position: relative; /* required for dropdown */
}

/* Navbar links */
#navbar li a, .dropbtn {
  display: block;
  color: rgb(252, 230, 202);
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Hover effect for links */
#navbar li a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(212, 128, 18);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(252, 230, 202);
  min-width: 160px;
  z-index: 1;
}

/* Dropdown links */
.dropdown-content li a {
  color: rgb(252, 230, 202);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.homeicon {
 width: 20px;
 height: auto;
 margin-right: 8px;
 vertical-align: middle;
}

/*----MINI GAME----*/

.about {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 2rem  
}

.about_logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.game_text h1,
.game_text h3 {
  text-align: center;
  margin-top: 0;

}

.game_text {
  border: 2px solid rgb(243, 218, 186);
  background-image: url('./images/darkcrystal.webp'); /* Replace with your actual texture path */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.last-line {
  margin-top: 3rem;
  font-style: italic;
  font-size: 1.2rem;
  color: #5c3a1e;
  text-align: center;
  position: relative;
  letter-spacing: 0.5px;
}

.last-line::before,
.last-line::after {
  content: "✦";
  position: absolute;
  font-size: 1.5rem;
  color: #d6b86a;
  top: 0;
}

.last-line::before {
  left: 0rem;
}

.last-line::after {
  right: 0rem;
}

.last-line:hover {
  color: brown;
  text-shadow: 0 0 5px brown;
  transition: all 0.3s ease-in-out;
  cursor: default;
}


.fox {
    width: 200px;
    height: fit-content;
    vertical-align: middle;
    margin: 5px;
}

/*----FOOTER----*/
footer {
    background-color: rgb(104, 63, 63);
    margin-top: 5rem;
    height: 1.75rem;
    position: absolute;
    width: 100%;
    left: 0;
}

/*----SCROLL UP BEE----*/

.iconbutton{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 3%;
  bottom: 9%;
  cursor: pointer;
  }

footer p { color: azure; position: absolute; margin-top: 0.1rem; }