/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
  background-color: white;
  color: black;
  font-family: Verdana;
  /* grid background */
  background-image: url('KATO TILE.jpg');
  background-repeat: repeat;
  background-size: 50px 50px;  /* makes tiles 50x50 pixels */
}

body.dark-mode {
  background-image: url('KATO TILE DARK.jpg');
  color: #ddd; /* default text color in dark mode */
}

body.dark-mode .floating-window,
body.dark-mode .side-panel,
body.dark-mode .main-window,
body.dark-mode .marquee,
body.dark-mode .inner-box {
  background-color: #7B8087;
}

body.dark-mode .marquee {
  color: #fff;
}  

.logo {
    max-width: 100px;
    height: auto;
    display: inline-block;
}

.logo img {
  width: 100%;
  height: auto;
  display: block;
}

.cool-font {
  font-family: 'Bungee', sans-serif;
  color: #2eb3ec;
}

body.dark-mode .cool-font {
  color: #ffcc00; /* example bright color */
}

.blue1 {
  color: #2eb3ec;
}

.window-content {
  font-family: 'Courier New', monospace;
  text-align: center;
}

.container {
  max-width: 800px; 
  text-align: center; /* centres stuff inside the container */
}

ul {
  list-style-type: none; /* remove bullets */
  padding-left: 0;
  text-align: center;
}

ul li::before {
  content: "★ ";  /* custom bullet */
  color: black;   /* bullet color */
}

.img-button {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.img-button img {
  width: 100px;
  height: auto;
  transition: transform 0.2s ease;
}

.img-button:hover img {
  transform: scale(1.1);
}

.floating-window {
  position: absolute;
  top: 700px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding: 20px;
  background-color: #f7fdff;
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 10;
  text-align: center;
}

@media (max-width: 600px) {
  .floating-window {
    top: 475px;
  }
}

.newwrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px; 
  margin-top: 40px;
  margin-right: 20px;
  margin-left: 20px;
}

.newwrappernocen {
  display: flex;
  flex-direction: row;
  gap: 50px; 
  margin-right: 10px;
  margin-left: 10px;
}

@media (max-width: 600px) {
  .newwrapper {
    flex-direction: column; 
    align-items: center;
  }
  
  .newwrappernocen {
    flex-direction: column; 
    align-items: center;
  } 
}

.side-panel {
  width: 120px;
  height: 300px;
  background-color: #f7fdff;
  padding: 20px;
  border-radius: 12px;
  top: 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 5px solid transparent;
}

.main-window {
  width: 1000px;
  background-color: #f7fdff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) { /* mobile only */
  .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }  

  .side-panel {
    width: 70vw; 
    height: 50px; 
    max-width: 500px;
    margin-top: 10px;
  }

  .side-panel img {
    display: block;
    margin: 0 auto;
  }
  
  .marquee {
    top: 85px;
    font-size: 15px;
    height: 40px;
    line-height: 20px;
  }
  
  .main-window {
    width: 70vw;
    height: 300px;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;
  }  
  
  .banner-container {
    padding: 0 20px;  
    margin-bottom: -15px;
  }
}

.marquee {
  top: 20px;
  width: 80vw;  /* full viewport width */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #f7fdff;
  color: #2eb3ec;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  padding: 10px 0;
  position: relative;
  margin: 0 auto; /* centres marquee */
}

.marquee p {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 10s linear infinite;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
  padding-left: 100%;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.banner-container {
  margin: 30px auto 0 auto; 
  max-width: 1200px;
  padding: 0 40px; 
  box-sizing: border-box; 
}

.banner-image {
  width: 100%;  /* fills da whole container */
  height: auto;  /* keeps dimentions right */
  display: block; 
  border-radius: 12px; 
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.inner-box {
  width: 500px; 
  height: 110px;  
  background-color: #f3faff;
  padding: 10px;
  border-radius: 10px; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
}

@media (max-width: 600px) { /* mobile only */
  .inner-box {
    margin: 0px auto;
    height: auto;
    width: 250px;
  }
}