body {
	font-family: sans-serif;
	background-color: ;
}

@font-face { font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf"); }
@font-face { font-family: "brownstdreg"; src: url("../fonts/brown.std.regular.otf"); }
@font-face { font-family: "brownstdbold"; src: url("../fonts/brown.std.bold.otf"); }

button {
  padding: 20px 40px;
  background: none;
  border: none;
  position: relative;
  text-transform: uppercase;
  font-size: 30px;
  letter-spacing: 3px;
  cursor: pointer;
}
button:after, button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid rgb(225,0,100);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

button:after {
  -webkit-transform: translate(3px, 3px);
          transform: translate(3px, 3px);
}
button:before {
  -webkit-transform: translate(-3px, -3px);
          transform: translate(-3px, -3px);
}
button:hover:after, button:hover:before {
  -webkit-transform: translate(0);
          transform: translate(0);
}


.home h1{
	color:rgb(225,0,100);
	font-family: "brownstdlight";

}

.home h5{
	color:rgb(225,0,100);
	font-family: "brownstdlight";
}

.home h6{
	
	font-family: "brownstdlight";
}


.home p{
	color:rgb(225,0,100);
	font-family: "brownstdlight";
	font-size: 23px;
}


/* to set font styles on specific elements, do it like this. you will now overwrite the styles set on the body */

/* style your links */
a:link { ;

}

a:visited {/*background: pink;
color:rgb(225,0,100);*/
}

a:hover {

}

a:active {

}

/* you can style your elements however you'd like. I'm adding a border so we can see them */
iframe {
	border: solid white 1px;
	width: 100%;
	height: 550px;
}

pre {
	border: solid blue 1px;
}

/* max-width: 100%; will prevent an element from extending beyond the page boundaries */
img {
	max-width: 100%;
}

/* width: 100%; will force an element to adopt the width of the page boundaries */
img.full-width {
	width: 100%;
}


/* CLASSES
---------- */

/* to apply different styles to different pages, you can add a class name to the body. when doing this, think about what you're changing and why. the overall structure and typogrphy around your site should feel consistent. any changes or deviations should be meaningful. click around between all the pages in this site so you can see how these classes and their respective styles are being applied. */
.home { 
	font-family: "brownstdlight";
	font-size: 36px;
}
.project-01 {
	background: lightpink;
	font-family: "brownstdlight";
}
.project-02 {
	background: white;
	font-family: "brownstdlight";
}
.project-03 {
	background: orange;
	font-family: "brownstdlight";
}

.project-04 {
	background: black;
	font-family: "brownstdlight";
}
.project-0501 {
	background:white;
	font-family: "brownstdlight";
}
.project-0502 {
	background:white;
	font-family: "brownstdlight";
}
.project-06 {
	background: white;
	font-family: "brownstdlight";
}
.project-07 {
	/*background: rgb(92,218,230);*/
	font-family: "brownstdlight";
}

.project-07{
background: linear-gradient(240deg, rgb(92,131,230), rgb(92,138,230), rgb(92,149,230), rgb(92,154,230), rgb(92,165,230), rgb(92,177,230), rgb(92,181,230), rgb(92,193,230), rgb(92,207,230), rgb(92,218,230));
background-size: 1000% 1000%;

-webkit-animation: bgb 12s ease infinite;
animation: bgb 12s ease infinite;}

@-webkit-keyframes bgb {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bgb { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


/* CONTAINERS
---------- */
/* why we use wrappers, here: http://stackoverflow.com/a/5275428 */
.wrapper {
	margin: 5px auto;
	max-width: 100%;
	border:solid rgb(225,0,100) 0px;
	max-width:1100px;
}

.header {
	padding-bottom: 30px;
}
.header.wrapper {
	background-color: white;
	padding:35px 3%;
	width:100%;
}

.footer {
	padding-top: 30px;
}
.footer.wrapper {
	background-color: white;
	padding:30px 10%;
	width:100%;
}