Global rules */


@import url('https://fonts.googleapis.com/css?family=Quicksand|Spectral');


html {
   background-color: lightgray;
   font-family: 'Quicksand', sans-serif;
   font-size: 0.95em;
   line-height: 1.5em;
   background-image: url("../images/background.jpg");
   background-repeat: repeat;
   background-size: 2000px 1200px;
}


body{
   margin:0; /* removes gap at top of page */
}


h1 {
   font-weight: normal;
   margin: auto;
   background: #fff;
   line-height: 2.5em;
   padding-left:1%;
}


/*
The border radius on h1.page-header and main.wrapper provide the
curved corners that appear on the body area of the page
*/
h1.page-header{
   font-family: 'Spectral',serif;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}
main.wrapper {
   background-color: white;
   overflow: auto;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}


p {
   margin: 1em;
}


h2,h3 {
   font-weight: normal;
   margin-left: 1em;
   line-height: 1em;
}


a {
   color:darkcyan;
   text-decoration: none;
}


a:hover {
   color: whitesmoke;
   background-color: darkcyan;
   text-decoration: none;
}


footer {
   clear: both;
   text-align: center;
   padding: 1em;
}




/* start positioning styles */


.text-align-center{
   text-align:center;
   background-color:aqua;
}
.margin-auto > div{
   margin:auto;
   width:50%;
   background-color:beige;
   text-align:center;
}


/* Allows box to take up full space, ignoring padding/margin */
* {
   box-sizing: border-box;
 }
/* Create two equal columns that floats next to each other */
.my-column {
   float: left;
   width: 50%;
   padding: 10px;
   min-height: 300px; /* Can be removed. Only for demonstration */
 }
  /* Clear floats after the columns */
 .my-row:after {
   content: "";
   display: table;
   clear: both;
 }
 @media all and (max-width:500px) {
   .my-column {
       width: 100%;
     }
}


.fa {
   padding: 20px;
   font-size: 30px;
   text-align: center;
   text-decoration: none;
   margin: 5px 2px;
   border-radius: 50%;
 }
  .fa:hover {
     opacity: 0.7;
 }
  .fa-facebook {
   background: #3B5998;
   color: white;
   padding: 20px 25px;
 }
  .fa-twitter {
   background: #55ACEE;
   color: white;
 }
  .fa-youtube {
   background: #bb0000;
   color: white;
 }
  .fa-instagram {
   background: #125688;
   color: white;
 }
  .fa-snapchat-ghost {
   background: #fffc00;
   color: white;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }


 .social-container {
   display: flex;
   justify-content: space-evenly;
 }
 /* flexible image rules start here */




.flexible img{
   width:100%;
}
.flexible{
   display: flex;
   justify-content: space-evenly;
}
/* flexible image rules end here */


/* end positioning styles */




/* Responsive rules */


/* DESKTOP */
@media all and (min-width:1200px) {
   main.wrapper {
       width: 80%;
       margin: auto;
   }


   h1.page-header {
       width: 80%;
   }
 
   picture.profile img {
       width: 50%;
       float: left;
       margin-right: 2em;
   }
  
}


/* TABLET */
@media all and (min-width:501px) and (max-width:1199px) {
   main.wrapper {
       width: 90%;
       margin: auto;
   }


   h1.page-header {
       width: 90%;
   }
  
   picture.profile img {
       width: 50%;
       float: right;
       margin-left: 1em;
   }


}


/* PHONE */
@media all and (max-width:500px) {
   main.wrapper {
       width: 100%;
   }
  
   h1.page-header {
       width: 99%;
   }
  
   picture.profile img {
       width: 100%;
   }
  
}