/*
Joel Mardock
10-4-2022
Module 12.2 Assignment: bioSite Final Submission Part 1 (Peers)
*/

/*
row, container, and columns resources from https://getbootstrap.com/
*/

html
{
  background-color: #DBDBDB;
}

h1
{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 55px;
  text-align: center;
}

h3
{
  font-family: 'Roboto', sans-serif;
}

#navbar
{
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  word-spacing: 40px;   
}
#navbar a
{
  color: #6C759E;
  text-decoration: none;
    
    
}
#navbar a:hover
{
  font-weight: 700;
  text-decoration: underline;
    
}

.text-start
{
text-align: left;
}

.text-end
{
text-align: right;
    
}
.text-center
{
  text-align: center;
}

.gold-border
{
  border-style:solid;
  border-radius: 10px;
  border-width: 10px;
  border-color: #A88418;
  width: 300px;
  height: 300px;
}

.blue-border
{
  border-style:solid;
  border-color: #697EDB;
  border-radius: 10px;
  border-width: 10px;
  width: 300px;
  height: 300px;
}

footer
{
  background-color:#000000;
  font-weight: 400;
  font-style: italic;
  padding-right: 10px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0;
    
}
footer p
{
  color: white;
  font-weight: 400;
  float: left;
  padding: 1px;
  font-style: italic;
}

#about-image1
{
  border-style:solid;
  border-color: #697EDB;
  border-radius: 10px;
  border-width: 10px;
  width: 230px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.about-text1, .hobbies-text1
{
  margin: auto;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  width: 50%;
  margin-bottom: 100px;
}


footer
{
  background-color:#000000;
  font-weight: 400;
  font-style: italic;
  padding-right: 10px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0;
    
}
footer p
{
  color: white;
  font-weight: 400;
  float: left;
  padding: 1px;
  font-style: italic;
}


#hobbyImage1
{
  border-style:solid;
  border-color: #A88418;
  border-radius: 10px;
  border-width: 10px;
  width: 300px;
  height: 300px;
}


.row
{
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

  
.col {

  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  
}


.container 
{
  min-width: 450px;
    max-width: 960px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 100px;
}