[SP] Summer Pafu Smoothie Event CSS

/*-- TOP --*/

<div align="center"><a href="http://fav.me/dd4mvbs"><div class="button">General Information </div></a><a href="http://fav.me/dd4mva5"><div class="button">Traits</div></a><a href="http://fav.me/dd4mver"><div class="button">Behaviour & Care </div></a><a href="http://fav.me/dd57zu4"><div class="button">Masterlist</div></a>


/*-- CSS --*/

*{
background:none;
border:none;
padding:0;
margin:0;
}

.gr{padding:0!important;}
.gr-top img, .gr1, .gr2, .gr3 {display:none;}
a.external:after {display:none;}

/* Journal Background */
.gr-box{
background-image: url("https://i.pinimg.com/564x/e3/0d/f9/e30df9b0a0d82cfecc364420e9751600.jpg");
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #faa1d2;
padding: 0px;
}

/* Journal Top */
.gr-top{
background: #fef582;
text-align: center;
padding: 30px 50px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

/* Journal Title */
.gr-top h2, .gr-top h2 a{
color: #ffffff;
font-family: Cinzel Decorative;
letter-spacing: 4px;
font-size: 60px;
text-shadow: 2px 3px #c5bb53;
}

/* Top Timestamp */
.gr-top .timestamp{
display:none;
}

/* Journal Text */
.text{
background:#fff;
padding: 1%;
margin: 4%;
color: #a19308;
font-family: Open Sans;
font-size: 14px;
text-align: left;
line-height:1.5em;
margin-left: 5%;
margin-right: 5%;
border: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

/* Thumbnails */
.shadow-holder{
vertical-align:middle;
margin: 3px;}

.shadow-holder img{
padding: 1px;
background:none;
margin:1px;
border-radius: 10px;
border: 1px none #fff}

img.lit{display:none;}

.shadow-holder:hover{
padding: 0px;
border-radius: 10px;
background-color: none}

.embedded-deviation img, .embedded-freeform-deviation{
padding:10px;
background:none;
width:97%;}

.embedded-deviation img:hover{}

.img {
display: block;
width: 100%;
height: auto;
}

.img:hover{
background-color: #fff;
}

/* Buttons */
.button {
display: inline-block;
background: #fef582;
color: #faa1d2;
width: 20%;
padding: 0.5%;
margin-right: 2%;
margin-left: 2%;
margin-bottom: 2%;
transition: all 0.3s ease;
}
.button:hover {
background: #faa1d2;
color: #fff;
}

/* Bold */
b{
color:#9ba2fd;
}

/* Italic */
i{
color:#faa1d2;
}

/* Journal Links */
.text a{
color: #faa1d2;
text-decoration: underline overline;
transition: all 0.3s ease;
}

.text a:hover{
color: #FDD9ED;
text-decoration: underline overline;
transition: all 0.3s ease;
}

/* Blockquote */
blockquote{
background: #fefbd8;
color: #c5bb53;
font-family: Raleway;
text-align: auto;
padding: 1%;
margin-left: 20%;
margin-right: 20%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

/* Box */
.box{
color: #4f4a8c;
background: #fff;
overflow: auto;
height: auto;
padding: 0.4%;
margin-left: 20%;
margin-right: 20%;
border-radius: 10px;
border: 2px solid #8B87AC;}

/* Text Headers */
.gr-box .text h1{
border: solid #817ae8 2px;
border-left: solid #817ae8 40px;
color: #8259B8;
font-size:22px;
padding:0.7%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.gr-box .text h2{
color: #eec622;
font-family: Cinzel Decorative;
font-size: 25px;
text-align: auto;
letter-spacing: 2px;
font-weight: 600;
line-height:0.8em;
padding: 1.4%;
text-decoration: underline overline;
}

.gr-box .text h3{
color: #faa1d2;
font-family: Quicksand;
font-size: 17px;
text-align: auto;
font-weight: 600;
}

.gr-box .text h4{
color: #8259B8;
font-family: Cinzel Decorative;
font-size: 30px;
text-align: auto;
letter-spacing: 5px;
font-weight: 500;
line-height:0.8em;
padding: 1.4%;
text-decoration: underline overline;
}


/* Divider */
hr{
border-bottom: 2px solid #fef582;
margin: 20px 0 10px;
margin-left: 15%;
margin-right: 15%;
}

/* Columns */
.column {
float: left;
width: 32%;
margin-left: 1%;
}

/* After Columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Hover Boxes  */
.question {
position: relative;
display: auto;
}

.answer {
display: none;
position: auto;
background: #fff;
color: #6c81a2;
width: 98.75%;
opacity:100%;
border-left: 2px solid #7c77c6;
border-right: 2px solid #7c77c6;
border-bottom: 2px solid #7c77c6;
padding:0.5%;
z-index: 1;
}

.question:hover .answer {
display:block;
min-width: 98.75%;
max-width: 100%;
opacity:100%;
}

/* Journal Bottom */
.bottom{
background:#fef582;
padding: 20px 0px;
text-align: center;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

/* Journal Comments */
.commentslink{
display:none;
color: #ffffff;
font-family: Quicksand;
font-size: 14px;
font-weight: 500;
}

/* Credits */
.credit{
left:0;
width:100%;
text-align:center;
position: absolute;
bottom: 9px;
}

.credit, .credit a{
text-align:center;
text-decoration:none;
color: #faa1d2!important;
font-size: 9px;
font-family: Quicksand;
transition: all 0.3s ease;
}

.credit a:hover{
color: #FDD9ED;
transition: all 0.3s ease;
}


/* -- FOOTER -- */

<div align="center"><div class="credit">coding by @Elxyiee and @yumechobap</div></div>