/* Color scheme for now: */
    /* Puce: #C08497 */
    /* Snow: #FCF7F8 */
    /* French Gray: #CED3DC */
    /* Light Sky Blue: #90C2E7 */
    /* Air Force Blue: #4E8098 */

/* Making the Navigation Bar */
.navbar {
  width: 100%;
  max-width: 100%;
}

.navbar ul{
  list-style: none;
  background: #4E8098;
  padding: 0;
  margin: 0;
  text-align: center;
}

.navbar li{
  display: inline-block;
}

.navbar a{
  text-decoration: none;
  color: #FCF7F8;
  width: 100%;
  display: block;
  padding: 14px 25px;
  font-size: 18px;
  text-align: center;
}

.navbar a:hover{
  background-color: #90C2E7;
} 


/* Body */
body{
    margin: 0;
    padding: 0;
    background-color: #FCF7F8;
    font-family: "Times New Roman", Times, serif;
    font-size:18px;
    display: flex;
    flex-direction: column;
}

.bodytxt{
  margin: 30px 30px 30px 30px;
  font-family: "Times New Roman", Times, serif;
  font-size:18px;
}

.appletcentertxt{
  font-family: "Times New Roman", Times, serif;
  font-size:18px;
  width: 56%;
  margin-left: 22%;
  margin-right: 22%;
}

.applet{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Footer */

/* This one in particular is so I can have a "sticky footer" that sticks to the bottom of the page and is pushed down with more context/area change */
.content {
  flex: 1 0 auto;
}

/* This makes sure on mobile devices the footer goes all the way to the bottom of the screen */
html, body {
  height: 100%;
}

footer{
  display: block;
  background: #4E8098;
  width: 100%;
  padding: 20px;
  font-size: 17px;
  color: #CED3DC;
  flex-shrink: 0;
}

.footertxt{
  color: #CED3DC;
  font-size: 13px;
}

.pallign{
  text-align: center;
  color: #CED3DC;
  font-size: 17px;
  margin-left: auto;
  margin-right: auto;
}

img {
  width: 300px;
  max-width: 100%;
  height: auto;
  width: auto\9;
}

.marginpls{
  margin: 30px 30px 30px 30px;
}


/* Card Stuff - Got from the interwebs*/
* {
  box-sizing: border-box;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  max-width: 100%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;} 
/*.row{
  margin: 30px 30px 30px 30px;
}  */

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
} 

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}

/* Responsive columns - one column layout (vertical) on small screens */
/* THIS IS MESSING UP MY NAVIGATION BAR*/
@media screen and (max-width: 750px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10%;
  }
} 


/* Formatting the main title */
.header{
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 40px;
    color: #90C2E7; 
    padding: 2%;
    margin-left: auto;
    margin-right: auto;
}

.subheading{
  text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 28px;
    color: #C08497; 
    padding: 2%;
    margin-left: auto;
    margin-right: auto;
}

.subsubheading{
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #90C2E7; 
}

.liltitle{
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: #90C2E7;
  padding-top: 18px;
  max-width: 100%;
  height: auto;
  width: auto\9;
}

.liltext{
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  padding-bottom: 16px;
  color: #C08497;
}

p{
  max-width: 100%;
  height: auto;
  width: auto\9;
}

.maintitle{ 
    font-family: "Times New Roman", Times, serif;
    font-size: 40px;
    color: #4E8098;
    text-align: center;
}


/* Image and Color Stuff*/
  #parent{
    position: relative;
    width:400px;
    height: 500px;
  }

  .puce{
    background: #C08497;
    width: 300px;
    height: 400px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    border: 2px solid #C08497;
  }

  .skyblue{
    background: #90C2E7;
    width: 300px;
    height: 400px;
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 1;
    border: 2px solid #90C2E7;

  }

  #parent img{
    vertical-align: middle;
    position: absolute;
    width: 300px;
    height: 400px;
    top: 30px;
    left: 30px;
    z-index: 3;
    border: 2px solid #4E8098;
    max-width: 100%;
    max-height: 100vh;
  }