@import url(http://fonts.googleapis.com/css?family=Parisienne);

#pari
{
font-family: 'Parisienne', cursive;
color:#fff;
z-index: 8;
}

:root {
     font-size: calc( 24px + (24 - 12) * ( (100vw - 400px) / ( 800 - 400) )); 
}

body {
background-image: linear-gradient(100deg,#ff4da6 1%, #ffdb4d 20%, #1aff1a 50%,#7300e6 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;

}



#accordion li::before {
    content: ☕
    padding-right: 8px;
    color: rgb(75, 79, 123);
}

.ui-accordion {
position: relative;
top:30vh;
font-size: .5em;
}


.madlib {

}

.button {
position:relative;
top:0em;
left:40vw;
}

.insult font {
position:relative;
font-size: 1em;
font-family: 'Parisienne', cursive;
color:#000;
bottom: -1em;
left:1vw;
}

#body_home
{
}

#div1
{
background: #111 linear-gradient(#DADAE1, #636363) repeat scroll 0% 0%;
position:absolute;
top:0%;
left:0%;
width:105vw;
height: 12vh;
margin: 0px;
padding:0%;
outline: 0px none !important;
}

#div2 {
position:relative;
font-size:.5em;
z-index:7;
}


#body_phear
{

}


/* For mobile phones: */
@media only screen and (max-width: 45em) {

body
{
min-height:100%;
font-size: 1.5em;
}

.index {
padding:1em;
font-size: calc( 20px + (24 - 12) * ( (100vw - 400px) / ( 800 - 400) ));
}

.indexbg {
position: absolute;
z-index:-2;
top:2em;
left:0em;
background-image: linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,150,150,.6) );
/*background:rgba(255,255,255,.7);*/
}

#body_phear
{

}

.shakes {
position:absolute;
width:100%; height: 5em; left: 0vw;
top:20vh;
background:rgba(192,192,192,0.6);
}



#div1
{
text-align:center;
text-shadow: 1px 1px 1px #000;
margin-top:0px;
z-index:-1;

}



#div2
{
top: 10vh;
margin: 0px;
width:100%;
}


p#pari {
position:absolute;
top:-1.1em;
margin-left: calc( 10px + 12 * ( (100vw - 400px) / ( 800 - 400) ));
white-space:nowrap;
text-overflow: ellipsis;
font-size: 1.2em;
}



ol#tabs a {
color:#fff; text-align:center; text-decoration:none;
background-color:#696969;
background: #333 linear-gradient(#9F9F9F, #6B6B6B) repeat scroll 0% 0%;
text-decoration: none;
padding-left:8px;
padding-right:8px;
padding-top:8px;
padding-bottom:8px;
position:relative;
border: 1px solid #333;
border-top: 1px solid rgba(255, 255, 255, .5);
border-left: none;
border-right: none;
list-style: outside none none;
width:100%;
max-width: 100%;
min-width: 0.75em;
display: block;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;
font-size: 1em;
font-family: Arial,Helvetica,sans-serif;
}



}/*smaller done*/

/*for larger screens*/
@media only screen and (min-width: 45.001em) {
.index {
padding:7em;
font-size: .5em; 
}

.indexbg {
position: absolute;
z-index:-2;
top:0em;
left:0em;
background-image: linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,150,150,.6) );
/*background:rgba(255,255,255,.7);*/
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}


#body_phear
{
background-position:left bottom;
}

.shakes {
position:absolute;
width:80%; height: 5em; left: 2vw;
top:20vh;
background:rgba(192,192,192,0.6);
-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
}

.shakes p {
margin: 1em;
font-size: 1.2em;
text-shadow: 1px 1px 1px #000;
}

#div1 {
text-shadow: 1px 1px 1px #000;
}

#div2 {
position:relative;
top:10vh;
}



p#pari {
position:absolute;
top: -1.1em;
margin-left: calc( 200px + 12 * ( (100vw - 400px) / ( 800 - 400) )); 
font-size:1.2em;
white-space:nowrap;
text-overflow: ellipsis;
}



ol#tabs a {
font:Arial,Serif; 
color:#fff; text-align:center; text-decoration:none;
background-color:#696969;
background: #333 linear-gradient(#9F9F9F, #6B6B6B) repeat scroll 0% 0%;
text-decoration: none;
text-align:center;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
position:relative;
top:0%;
width:100%;
border: 1px solid #333;
border-top: 1px solid rgba(255, 255, 255, .5);
border-left: none;
border-right: none;
list-style: outside none none;
width:100%;
display: block;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
font-family: Arial,Helvetica,sans-serif;
}



} /*larger done*/






.button {
padding:.2em;
-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
border:3px solid #696969; border-top-width:1px; border-bottom-width:4px;
background-color:rgba(200,200,200,1); 
color:#000000; text-align:center; text-decoration:none;
position:absolute;
margin-top:5px;
z-index:1;
font-size:.8em;
}

.button:hover { 
border:3px solid #363636; border-top-width:1px; border-bottom-width:5px;
background-color:#ADAD63; 
color:#FFFFFF;
 }
 
.button:active   {
border:3px solid #3C3075; 
background-color:#000000; 
color:#FFFFFF;
 }


ol#tabs {
position:relative;
    height: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
z-index:7;
clear: both;
}


ol#tabs a:hover {
background: #111 linear-gradient(#535353, #404040) repeat scroll 0% 0%;
border-top: 1px solid rgba(100, 100, 100, .5);
}


ol#tabs li {
margin: 0 0px 0 0;
float: left;
}

ol#tabs a.current {
    background-color: #636363;
background: #C5C7C9 linear-gradient(#D8D9DA, #595969) repeat scroll 0% 0%;
    color:#ffffff;
text-shadow: 0px 1px 0px #0A1E56;
}



/*some fancy stuff*/


.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  margin: 86.60px 0;
  background-image: url(BG_sP.jpg);
  background-size: auto 346.4102px;
  background-position: center;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 43.93px;
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 300.0000px;
  height: 173.20508075688775px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -106.0660px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -106.0660px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 300.0000px;
  height: 173.2051px;
  z-index: 2;
  background: inherit;
}