/* styles.css */
@font-face { font-family: Roboto; src: url('static/Roboto-Regular.ttf'); }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Roboto;
  font-size: 18px;
}

.background {
  background: url('images/mountain_peaks.jpg') no-repeat center center / cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.top-logo {
  text-align: center;
  padding: 20px 0;
}

.top-logo img {
  /* max-width: 200px; */
  height: auto;
}

.content {
  text-align: center;
}

.text-links {
  background-color: #d7dae3CC;
  display: inline-block;
  padding: 20px;
  /* border-radius: 8px; */
  max-width: 700px;
}

.text-links a {
  margin: 0 10px;
  text-decoration: none;
  color: #3273ff;
}

.bottom-logo {
  text-align: center;
  padding: 20px 0;
}

.bottom-logo img {
  max-width: 150px;
  height: auto;
}








.top-logo {
  text-align: center;
  padding: 20px 0;
}

.logo-stack {
  position: relative;
  display: inline-block; /* so it centers */
  /* width: 200px; /* adjust to logo size */
  height: 150px;
}

.logo-stack img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* specific for rotating image */
.logo-rotating {
  animation: spin 30s linear infinite;
  max-height: 138px;   /* won't exceed base logo height */
  width: auto; 
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.logo-overlay {
    width: 400px;
}

.logo-base {
    width: 200px;
}