/**
 * Frontend CSS for GW Under Construction Mode.
 *
 * @package    GW_Under_Construction_Mode
 * @subpackage includes/css
 * @author     greenwebsite
 * @link       https://www.greenwebsite.net/wordpress
 * @since      1.0.0
*/

body {
  background-color: #f1f1f1;
  color: #121212;
}

body.dark-mode {
  background-color: #121212;
  color: #f1f1f1;
}

.gwuncomo-container {
  max-width: 800px;
  margin: auto;
  padding-top: 10vh;
}

.gwuncomo-box {
  background: white;
  padding: 48px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .gwuncomo-box {
  background: #1e1e1e;
}

.gwuncomo-title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}

.gwuncomo-message {
  font-size: 18px;
  margin-top: 16px;
  text-align: center;
}

.gwuncomo-graphic {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 30px;
  text-align: center;
}

.gwuncomo-graphic img,
.gwuncomo-graphic svg {
  height: auto;
  display: inline-block;
}

/* w3-animate-opacity */
.w3-animate-opacity {
  animation: opac 0.8s;
}

@keyframes opac {
  from {opacity: 0} 
  to {opacity: 1}
}