/*Created on 7/18 */
/*Amanda Wahlstedt*/
/*code from CS 115 and W3Schools*/
            /*this styles the webpage background*/
body {
	background-color: #0B2839;
    color:white;
    font-size:120%; /*for larger text*/
}
            /*end webpage background style*/

                        /*flex boxes for navigation*/
/* Large */
#topnav {
  position: fixed;
  align-self: center;
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-start;
  opacity: 0.7;
  z-index: 1;
}

/* Medium screens */
@media all and (max-width: 800px) {
  #topnav {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  #topnav {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
/*this creates the style for the top navigation bar*/
/* Add a black background color to the top navigation */
#topnav {
    background-color: #133B64;
    overflow: hidden;
    
}

/* Style the links inside the navigation bar */
#topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    font-weight: Thin;
}

/* Change the color of links on hover */
#topnav a:hover {
    background-color: #3477D0;
    color: black;
}

/* Add a color to the active/current link */
#topnav .active {
    background-color: #8FBAF1;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: Semi-Bold;
}
            /*end navigation bar style*/





            /*profile photo style*/
.profile {
    border-radius: 50%;
    float: right;
    padding-left:20px;
}
            /*end photo style*/




            /*header style*/
#header{
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 3vw;
    text-align: center;
    justify-content: center;
    padding-top: 20px;
}
#subheader{
  color: gray;
  font-family: 'Montserrat', sans-serif;
  font-weight: Light;
  font-size: 15px;
  text-align: center;
  justify-content: center;
}
          
            
            
            
            
            
            
            /*style for three boxes*/
.container {
  display: flex;
    flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
            /*copied code for transparency*/
.box {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: inline-flex;
  transition: .5s ease;
  backface-visibility: hidden;
   border-radius:25%;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*-ms-transform: translate(-50%, -50%);*/
  text-align: center;
}

.box:hover .image {
  opacity: 0.3;
}

.box:hover .middle {
  opacity: 1;
}
.text {
    background-color: #94459B;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
}


            /*flex for three boxes*/
/* Large */
.container {
  text-align:center;
  display: flex;
  flex-flow: row wrap;
   /* This aligns items to the end line on main-axis */
  justify-content: center;
  padding-top: 20px;
}
.container > div {
  flex: 1; /*grow*/
}
/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
            /*end boxes*/

            
            /* footer style*/
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #F48F0A;
    color: #0B2834;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
   /*end footer style*/
            
            
                                            /*ABOUT STYLE PAGE*/

            /*flex for three bio*/
/* Large */
#bio {
  text-align: justify;
  line-height: 1.6;
  font-size: 22px;
  display: flex;
  flex-flow: row wrap;
   /* This aligns items to the end line on main-axis */
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  
  padding-left: 20px;
  padding-right: 20px;
}
#bio > div {
  flex: 1; /*grow*/
}
/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
   justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  #bio {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
                                            /*CONNECT STYLE PAGE*/
.icon {
    width:50px;
    border-radius:50%
}

/* Style inputs with type="text", select elements and textareas */
/*input[type=text], select, textarea {
  width: 100%; /* Full width */
 /* padding: 12px; /* Some padding */  
  /*border: 1px solid #ccc; /* Gray border */
  /*border-radius: 4px; /* Rounded borders */
  /*box-sizing: border-box; /* Make sure that padding and width stays in place */
  /*margin-top: 6px; /* Add a top margin */
  /*margin-bottom: 16px; /* Bottom margin */
  /*resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
/*}

/* Style the submit button with a specific background color etc */

/*input[type=submit] {
  background-color: #94459B;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family:'Montserrat', sans-serif;
  font-weight: bold;
}

/* When moving the mouse over the submit button, add a darker green color */
/*input[type=submit]:hover {
  background-color: #8FBAF1;
  align-content:center;
}

/* Add a background color and some padding around the form */
/*.form {
  border-radius: 5px;
  background-color: #3477D0;
  padding: 20px;
  padding-top:20px;
  font-family:'Montserrat', sans-serif;
}
/*#bodytext {
  font-family: 'playfair display', serif;
  text-align: center;
}*/
                                          /*PHOTOGRAPHY STYLE PAGE*/
#photos {
  /* Prevent vertical gaps */
  line-height: normal;
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px; 
  padding-top: 20px; 
  -ms-flex-order: random;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
 /*button style*/
 .button {
  background-color: #f48f0a;
  border: none;
  width: 100%;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  font-family:'Montserrat', sans-serif;
  align-self: center;
  padding-left: 75%;
}

.button:hover {
  background-color: #3477D0;
}
                                          /*ENGAGEMENTS STYLE PAGE*/
#history {
  font-family:'Montserrat', sans-serif;
  font-weight:bolder;
}
#eng {
  font-family:'Montserrat', sans-serif;
}
#engagementtxt {
  padding: 20px;
  text-align: left;
}