/*

General CSS Stylesheet for Tufts Girls of Code Website

Font: Open Sans
Color Scheme: Purple Monochrome
  bright purple: #a852d8 (sparingly for accents)
  light purple: #d2bbdf (backgrounds, hover effects, etc.)
  dark purple: #431b5a (text/headings, subtle accents)

  Feel free to use different shades of purple, but use a color picker so that
  we're using the tones/shades of the same purple! e.g. color-hex.com

Note: text color should be set using rgba values with opacity < 1 so that
    the color will stand out on any color background. E.g. color:rgba(0,0,0,.7)
    over a bright purple background will appear dark purple instead of black.
    Use (255,255,255,OPACITY) for light text and (0,0,0,OPACITY) for dark.

Try to remain as consistent as possible with margins/padding and other stylistic
decisions to maximize the flow of the site.

I have tried to create a general style for common HTML elements, but if you use
any in your page that I haven't styled already and you style them, please do so
in this file so that any page that contains that element will look the same!

You are free to make changes to this stylesheet, but please mention any changes
in the group chat (so that we can discuss them if they are significant and download
the right version of the code even if they're not!)

*/

/* general styling */

html, body {
  margin: 0;
  padding: 0;
}

body {
  background:#ffffff;
  font-family:Open Sans, sans-serif;
  font-size:12px;
  color:rgba(0,0,0,.7);
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

a {
  text-decoration:none;
  #color:rgba(0,0,0,.7);
   color:#431b5a;
  padding-bottom:2px;
  transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
}

a:hover {
  color:rgba(0,0,0,.3);
}


h1 {
  color: #431b5a;
  opacity: .8;
  position: relative;
}



h1::after {
  content:"";
  position: absolute;
  height: 3px;
  width: 30px;
  background: #d2bbdf;
  left: 0;
  bottom: -10px;
}

center {
  text-align: center;
}

h2 {
  font-size:1.2em;
  margin: 0;
  font-style: italic;
}

p {
  letter-spacing: .02rem;
}

/* added this for huge text */ 
b {
    font-size: 250%;
    color: #431b5a;
    opacity: .8;
    letter-spacing: .03rem;
    font-weight: bold;
    text-align: center;
}

blockquote {
  letter-spacing: .03rem;
  font-weight: 300;
  font-style:italic;
  position: relative;
}

blockquote::before {
  content:"“";
  position: absolute;
  opacity: 0.6;
  color: #d2bbdf;
  font-size: 46px;
  font-weight:bold;
  font-family: Georgia;
  margin-left: -15px;
  margin-top: 5px;
  z-index: -1;
  font-style: normal;
}

ul {
  list-style-type:none;
  padding:.5em 0 .5em 15px;
}

li {
  position: relative;
  margin-left: 10px;
}

li:before {
    left:0;
    top:0;
    position:absolute;
    content:'›';
    display:block;
    vertical-align:top;
    color: #a852d8;
    margin-left: -10px;
}

p a {
  border-bottom:1px solid transparent;
}

p a:hover {
  border-bottom-color: #d2bbdf;
}
/* header styling */

#header {
  padding:20px;
  #background: #9e519b;
  background: #E8AAD6;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  z-index:9;
}

#title {
  font-size: 34px;
  letter-spacing: .01rem;
  font-weight: 700;
  color: rgba(0,0,0,.46);
  line-height:34px;
  display: inline-block;
  position: relative;
}

#subtitle {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 5px;
  font-weight: 600;
  display:block;
  position: relative;
  color: rgba(255, 255, 255, .87);
}

#links {
  position: relative;
  float: right;
  margin-right: 20px;
  height: 100px;
  line-height: 100px;
  margin-top: -40px;
}

#links a {
  margin: 0 10px;
  font-weight: 800;
  color: rgba(0, 0, 0, .4);
  font-size:13px;
  letter-spacing: .03rem;
  position: relative;
  overflow: hidden;
  border: none;
}

#links a::after {
  content:"";
  position: absolute;
  height: 2px;
  background: rgba(255,255,255, .6);
  width: 0;
  left: 0;
  bottom: -5px;
  transition:  400ms;
  -webkit-transition:  400ms;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
}

#links a::before {
  content:"";
  position: absolute;
  height: 2px;
  background: rgba(255,255,255, .6);
  width: 0;
  right: 0;
  top: -5px;
  transition:  400ms;
  -webkit-transition:  400ms;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
}

#links a:hover::after, #links a:hover::before {
  width: 100%;
}

#links a:hover {
  color: rgba(0, 0, 0, .6);
}



#logo {
  float: left;
  position: relative;
  width:500px;
  overflow: hidden;
  margin-right: 15px;
}

#logo img {
  width:70px;
  height:70px;
}


#main {
  position: relative;
  margin: 180px auto 100px auto;
  width: 75%;
  max-width: 800px;
  font-size: 1.3em;
  line-height: 180%;
}

#footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(100% - 40px);
  background: rgba(0,0,0,.8);
  color: rgba(255, 255, 255, .87);
  padding: 20px;
  font-size: 1.3em;
  text-align: center;
  letter-spacing: .03rem;
}

.link-icon {
  width: 30px;
  margin: 10px;
  filter: invert(1);
  opacity: 0.8;
  transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
}

.link-icon:hover {
  opacity: 1;
}

/* added this for the center */
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #ffffff;
  padding: 10px;
}


.van {
    top: 45%;
    left: 44%;
} 

#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

.object {
    position: static;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

#cred {
  font-size: 10px;
  display: block;
  color: rgba(255,255,255,.67);
}