:root {
  --off-white-text: #F8F0E3;
  --off-black-text: #323B4A;
  --button-color: var(--accent-color-1);
  --text-color: var(--off-white-text);
  
  /* Colors to go with the background image starbase_20230416.jpg */
  /* Generated with https://color.adobe.com/create/image */
  /* Color names provited by chatgpt */
  --accent-color-1:  #A4B5BF; /* blueish grey */
  --accent-color-2:  #BFD1D9; /* lighter blueish grey */
  --accent-color-3: #4C591E; /* brown */
  --accent-color-4: #58594D; /* greenish grey */
  --accent-color-5: #4c1114; /* orangeish brown */
  --accent-color-6: #2c2c33; /* slightly greenish grey */
  
  /* Average of starbase_20230416 top section */
  /* Mainly used on mobile where the image can be scrolled */
  --average-color-top: #B7C6D3;
}
body {
	/* Set background image */
	background-image: url("DSCN3803.JPG");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 120%;
	background-color: var(--average-color-top);
}

.top-banner {
	background-color: yellow;
}

.container {
  text-align: center;
  width: 100%;
  height: 80%;
}
  
.title {
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  text-decoration: underline;
}

.header {
  display: inline-block;
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.link-container {
  display: inline-block;
}

.button {
  /* Buttons */
  background-color: var(--button-color);
  color: var(--text-color);
  border-radius:15px;
  padding:8px 16px;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  
  body {
    /* Background image */
    background-size: cover, auto;
    background-attachment: scroll;
    background-position: 40%;
  }
  
  .container {
    #text-align: right
  }
  
  .title {
	font-size: 36px;
  }
  
  .header {
	font-size: 30px;
  }
  
  a {
    /* Buttons */
	font-size: 18px;
  }
  
  .hide-on-mobile {
    display: none;
  }
}