@font-face {
    font-family: 'ShapeStorm';
    src: url('./shapestorm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

/* App wrapper and layout */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('./shapestorm.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: contain;
  font-family: 'Nouvea', sans-serif; /* Custom font */
}

/* Wrapper to ensure the Unity game is centered */
#app-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Polaroid-style frame for Unity WebGL - Increase padding and size */
.polaroid-frame {
  position: relative;
  background: #000000;
  padding: 10px;
  padding-bottom: 60px; /* Extra padding at the bottom for the button */
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #2b2b2b, 0 0 20px #ffffff;
}

/* Ensures the game stays centered on the screen */
#unity-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1366px; /* Unity canvas size stays the same */
  height: 768px; /* Unity canvas size stays the same */
}

/* Fullscreen button styled */
.fullscreen-button {
  position: absolute;
  bottom: 9px;
  left: 95.5%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background-color: #353535;
  border: none;
  color: black;
  font-size: 14px;
  font-family: 'ShapeStorm', sans-serif;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.fullscreen-button:hover {
  background-color: #00ffcc;
}

.fullscreen-button:active {
  background-color: #00cca3;
}

/* Footer styling */
.footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

.footer a {
  color: #00B0C7;
  text-decoration: none;
  margin-left: 5px;
}

.footer a:hover {
  text-decoration: underline;
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }