html {

height:100%;

}

* {
  box-sizing: border-box;
}

body{
  background-image: url("images/bgs/spacebackground.gif");
  background-repeat: repeat;
  height:100%;
}

a {
  color: cyan;
}

li {
  margin-top: 1.75%;
}

#top{
  position: relative;
  top:0.5%;
  left:15%;
  right:15%;
  width:70%;
  height:auto;

  font-size: 2.3vmin;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-shadow: 3px 3px 2px black;
}

.topflex {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topflex img {
  max-width: 12vmin;
  min-width: 0;
  margin-right: 1vmin;
  width: auto;
  height: auto;
  object-fit: scale-down;
}

#logo {
  position: relative;
  left: 5%;
  top: 1%;
  width: 90%;
  height: auto;
}

.logoflex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.logoflex img {
  min-width: 0%;
  width: auto;
  height: auto;
  object-fit: scale-down;

}

.leftportrait{
  max-width: 20vmin; 
  margin-right: 5%;
}

.rightportrait{
  max-width: 20vmin; 
  transform: scaleX(-1); 
  margin-left: 5%;
}

#navbar {
  position: relative;
  left: 5%;
  top: 3%;
  width: 90%;
  height: auto;
}

#navbarflex {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -1%;
}


#navbarflex img {
  max-width: 30vmin;
  min-width: 0;
  width: auto;
  height: auto;
  object-fit: scale-down;
  margin: 0 1%;
}

#main {
  position: relative;
  left:12.5%;
  top:4%;
  width:75%;
  height:auto;

  font-size: 2.3vmin;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-shadow: 3px 3px 2px black;

  background-image: url("images/bgs/bgpinetrees.gif");
  background-repeat: repeat;

  /*border-style: groove;
  border-color: purple;
  border-width: 4px; */
  border: 25px solid;
  border-image-source: url("images/border-200px-large.png");
  border-image-slice: 16% 26% 16% 26%;
  border-image-width: 25px;
  border-image-repeat: round;
}

#main p {
  margin-left: 3%;
  margin-right: 3%;
}

#main h2 {
  margin-left: 3%;
  margin-right: 3%;
  text-align: center;
  font-family: 'Righteous', cursive;
}

#main li{
  margin-left: 3%;
  margin-right: 3%;
}

.generiflex {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generiflex img {
  min-width: 0;
  width: auto;
  height: auto;
  object-fit: scale-down;
}

.headerflex {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6vmin;
  font-family: 'Righteous', cursive;
}

.headerflex img {
  max-width: 20vmin;
  min-width: 0;
  width: auto;
  height: auto;
  object-fit: scale-down;
}

.flexchildtext {
  text-align: center;
}

.constructionflex {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.constructionflex img {
  max-width: 70vmin;
  min-width: 0;
  width: auto;
  height: auto;
  object-fit: scale-down;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%;} 

.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; }

#footer{
  position: relative;
  top: 6%;
  left:15%;
  right:15%;
  width:70%;
  height:auto;

  font-size: 2.3vmin;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-shadow: 3px 3px 2px black;

  padding-bottom: 1%;

}

.footerflex {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footerflex img {
  max-width: 30vmin;
  min-width: 0;
  margin-left: 3%;
  width: auto;
  height: auto;
  object-fit: scale-down;
}

#tc {
  position: relative;
  top: 6%;
  font-size: 1.15vmin;
}