@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* HEADER */

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html, body {
  margin: 0 auto;
  /*background-color: rgb(118, 207, 224);*/
  background-color: rgb(11, 80, 97);

}

strong {
   font-weight: bold;
}

header {
  margin: 0;
  background-color: rgb(1, 47, 58);  
}

h1 {
  color: #FFFFFF;
  margin: 0px;
}

hr {
   color:#ededed;
}

header {
  text-align: center;
}

h1 {
  padding: 5px;
  margin: 0px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight:100;
  font-size: 60px;
}

h2 {
   padding: 5px;
   margin: 0px;
   margin-top: 15px;
   font-family: 'Roboto', sans-serif;
   font-weight:100;
   font-size: 30px;
   text-align: center;
}

h3 {
   padding: 5px;
   margin: 0px;
   margin-top: 15px;
   font-family: 'Roboto', sans-serif;
   font-weight:200;
   font-size: 27px;
}

/* NAVIGATION MENU */
nav {
  text-align: center;
  padding-bottom: 20px;

  box-shadow: 0 8px 5px -5px black;
  width: 100%;
}

hr {
  margin:0px;
  padding:0px;
}

ul {
  padding-left: 30px;
}

nav ul {
  list-style-type: none;
  margin:0px;
  padding:0px;
}

nav li {
  display: inline-block;
}

nav li a {
  text-align: center;
  display:inherit;
  color:whitesmoke;
  padding: 25px;
  text-decoration: none;
  overflow:hidden;
}

nav li a:hover {
  border-bottom: 3px solid #51E3FF;
  padding-bottom:22px;
}

#active {
  border-bottom: 3px solid #51E3FF;
  padding-bottom:22px;
  color: #51E3FF;
}


/* MAIN CONTENT */


.flex-container {
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: row;
  justify-content: center;
  align-content: center;
  height:100%;
}

#julia-block {
  max-height: 720px;
  max-width: 480px;
  margin:20px;
}

#julia {
  border-radius:30px;
}

#text-block {
  max-width:800px;
  min-height:100%;
  align-content: center;
  vertical-align: middle;
  margin:20px;
  display:flex;
  justify-content:cener;
  align-items:center;
}

#text {
  border-radius: 30px;
  padding: 20px;
  color:#51E3FF;
  background-color: rgb(11, 80, 97);
  /*background-color:black;*/
}

.link_button {
  border-color:black;
  border-width:2px;
  border-style:solid;
  padding:10px;
  background-color:rgb(1, 47, 58);
  color:white;
  box-shadow: 2;
  font-family: 'Roboto', sans-serif;
}

p {
  margin-top: 20px;
  color:white;
}

body {
  align-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 100;
}

article {
   margin-top: 20px;
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}