/* CONTAINS:
1) For the Show More ('Spew More') & Show Less ('Spew Less') function/buttons
2) My vomitting emoji animations
3) Face changing vomitting emoji
4) For the 'spewmore' that has two revealed/spewed messages
*/

/* -----------------------------------------------*/


/* 1) For the Show More ('Spew More') & Show Less ('Spew Less') function/buttons */
/* From https://www.youtube.com/watch?v=kQW-MXriUIU  "Add a READ MORE Hidden-Text Drop-Down in simple JavaScript, HTML and CSS""  Channel: Code with Ania Kubów */


.expandMoreContent {
/*Her original: height: 10px.  Something, even 0px, must be specified for height*/
height: 0px;
overflow: hidden;
transition: height 0.5s ease-in-out;
position: relative;

/*pn. Fallback, if gradient fails*/
background: rgba(58,255,58, 1);

/*pn. This vertical gradient starts off transparent at the top*/
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,3aff3a+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(58,255,58,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(58,255,58,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(58,255,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#3aff3a',GradientType=0 ); /* IE6-9 */

/*pn. */
padding-left: 2px;
padding-right: 2px;
margin-left:10px;
margin-right: 10px;
}

/*For small screens makes the revealed content have same space on the left and right as the rest of the answer*/
@media screen and (max-width:510px) {
.expandMoreContent {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
}


.expandMoreContent.expand-active {
height: auto;
/*PN: worked out that I needed to add this, to overturn .epandMoreContent having overflow: hidden.  The latter was 'inherited' by .expand-active (the revealed div), and it prevented the thrusting forward vomitting emoji being fully seen when the emoji was big (when the emoji thrust forward); the emoji was clipped.  Took ages to figure this out! */
overflow: visible;
/*Her transition speed only works if height here is not 'auto' but a specified size*/
/*transition: height .5s ease-in-out;*/
/*PN. Has spewed revealed section shaking for a bit, on small screen.  Will only work up to 709px, because at 710 px the 'revealanswer_in_your_face' applies*/
animation: revealanswer_shake .5s /*alter speed*/ linear 1 /*Last number = number of times performed*/;
}

/*PN. Has revealed section briefly coming towards the viewer, on big screens*/
@media screen and (min-width: 710px){
.expandMoreContent.expand-active {
animation: revealanswer_in_your_face .8s;
}
}
/*END MQ*/

.expandMoreHolder {
/* Her original: padding: 15px 0; */
padding: 0;
text-align: center;
}

.btn-expand-more {
cursor: pointer;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-bottom: 1px solid black;
display: inline-block;
/*pn*/
margin-top: 3px;
margin-bottom: 0;
padding: 3px;
background-color:;
color:;
}


/*Makes the hover and 'active' colours only work on screen size bigger than tablet*/
@media screen and (min-width: 769px){
.btn-expand-more:hover {
border-left: 1px solid lightgreen;
border-top: 1px solid lightgreen;
border-right: 1px solid green;
border-bottom: 1px solid green;
}
.btn-expand-more:active {
border-left: 1px solid hsl(16, 100%, 55%);
border-top: 1px solid hsl(16, 100%, 55%);
border-right: 1px solid orangered;
border-bottom: 1px solid orangered;
}
}
/* END: MQ */



/*pn.  KEYFRAMES: SHAKER. For the reveal part of the answer to shake, and increase in opacity*/
@keyframes revealanswer_shake {
0% {
transform: translate(12px);
opacity: 0;
}
25% {
transform: translate(-12px);
}
50% {
transform: translate(12px);
}
75% {
transform: translate(-12px);
}
100% {
transform: translate(12px);
opacity: 1
}
}
/* END: KEYFRAMES: SHAKER*/


/*pn.  KEYFRAMES: ANSWER VOMITS. For the reveal part of the answer to vomit towards the viewer*/
@keyframes revealanswer_in_your_face {
0% {
}
10% {
transform: perspective(300px) translateZ(100px);
}
50% {
}
75% {
}
100% {
}
}
/* END: KEYFRAMES: ANSWER VOMITS.*/


/* 2. MY VOMITTING EMOJI ANIMATIONS */


/*EMOJI SLIDER (bar keyframes). For the vomitting emoji (in small screens) to slide to the right and back, when revealed*/
/*Needn't have had this media query; as the value here would be overriden for big screens by the 'min-width: 710px' media query below.  However, makes for easy working and differentially tweaking of the values*/
@media screen and (max-width: 709px){

.expandMoreContent.expand-active .vomitting_emoji_container {
/* Display is block so that emoji will be on a line by itself above the text, to look better for 'spewing out' the text below*/ /*Change to inline-block, if I want emoji to be on the first line of the text.*/
display: block;
}

.expandMoreContent.expand-active .vomitting_emoji {
background-color:;
font-size: 30px;
/*Emoji will not slide if display is 'inline', which it is by default with a span*/
display:inline-block;
/*To ensure emoji is on top*/
z-index: 3;
/*First numerical 's' value is animation speed; second numerical 's' value is animation delay*/
animation: revealanswer_emoji_sidewaysslide 4s .8s;
}

}
/*END MQ*/
/*END: EMOJI SLIDER (bar keyframes)*/


/*EMOJI THRUSTER (bar keyframes). For the vomitting emoji (in big screens) to itself thrust forward, when revealed*/
@media screen and (min-width: 710px){

/*Change to block, if I want emoji to be on a line by itself.*/
.expandMoreContent.expand-active .vomitting_emoji_container {
display: inline-block;
}

.expandMoreContent.expand-active .vomitting_emoji {
background-color:;
font-size: 30px;
/*Emoji will not thrust if display is 'inline', which it is by default with a span*/
display: inline-block;

/*PN.  Needed else z-index wouldn't apply, and the thrusting emoji wouldn't be on top of the 'good advice' photo - as is in one of the expansions*/
position: relative;
/*To ensure emoji is on top*/
z-index: 1000;

/*First numerical 's' value is animation speed; second numerical 's' value is animation delay (here it matches the length of 'revealanswer_in_your_face' animation, so that the emoji will thrust forward as soon as 'revealanswer_in_your_face' finishes*/
animation: revealanswer_emoji_thrustforward 1s .8s;
}

}
/*END MQ*/
/*END: EMOJI THRUSTER (bar keyframes*/


/* KEYFRAMES. EMOJI SLIDER */
@keyframes revealanswer_emoji_sidewaysslide {
0% {
}
10% {
}
15% {
/*Best way to have the slide cover most of the width, across different widths of small screen size, was to set vw - viewport width*/
transform: translate(75vw);
}
25% {
}
50% {
}
75% {
}
100% {
}
}
/* END: KEYFRAMES. EMOJI SLIDER */


/* KEYFRAMES: EMOJI THRUSTER */
@keyframes revealanswer_emoji_thrustforward {
0% {
}
10% {
}
15% {
transform: translateX(29vw) translateY(100px)  perspective(100px) translateZ(90px);
}
25% {
transform: translateX(29vw) translateY(100px)  perspective(100px) translateZ(90px);
}
35% {
}
50% {
}
75% {
}
100% {
}
}
/* KEYFRAMES: EMOJI THRUSTER */

/* END: 2. MY VOMITTING EMOJI ANIMATIONS */




/* 3. FACE CHANGING VOMITTING EMOJI */

/* From: https://codepen.io/GeorgePark/pen/aazBGj  Simple Emoji Animations
George W. Park
*/


@media screen and (max-width: 709px) {

.expandMoreContent.expand-active .twoface_vom_emoji::after {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.expandMoreContent.expand-active .vomit::after {
/*PN: This vomitting face is 🤮*/
    content:'🤮';
/*PN: This pre-vomitting face is 🤢*/
    --emoji:'🤢';
    animation-name: twoFrames;
    animation-duration: 1s;
/*matches duration (4s) of sidewaysslide animation PLUS its delay (.8s), so that the face doesn't start changing intil the thrust forward animation has finished.*/
animation-delay: 4.8s;
}

@keyframes twoFrames {
/*pn: varying this perecntage seems to make no difference*/
    50% {
        content: var(--emoji);
    }
}

}
/* END MQ*/


@media screen and (min-width: 710px) {

.expandMoreContent.expand-active .twoface_vom_emoji::after {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.expandMoreContent.expand-active .vomit::after {
    content:'🤮';
    --emoji:'🤢';
    animation-name: twoFrames;
    animation-duration: 1s;
/*matches duration (1s) of thrustforward animation PLUS its delay (.8s), so that the face doesn't start changing intil the thrust forward animation has finished.*/
animation-delay: 1.8s;
}

@keyframes twoFrames {
/*pn: varying this percentage seems to make no difference*/
    50% {
        content: var(--emoji);
    }
}

}
/* END MQ*/


/* END: 3. FACE CHANGING VOMITTING EMOJI */


/* FOR DOUBLESPEW SPEWMORE.  I.e when there's two spewed written pieces answering a question */
    /*NB: See also doublespew.css, for the 'action' of the doublspew*/


.toilet_lever {
/* Prents div being across whole page, which isn't wanted cos only want to the active property to work when user hovers over the words or icon*/
display: inline-block;
}

.toilet_lever:hover {
background-color: orangered;
transition: transform 3.8s ;
transform-origin: top left;
transform-style: preserve-3D;
transform: rotate(4deg);
}

.toilet_lever:active {
background-color: red;
transition: transform .8s;
transform-origin: top left;
transform: rotate(7deg);
}

/* END: FOR DOUBLESPEW SPEWMORE.*/



/* 4. For the 'spewmore' that has two revealed/spewed messages */
/* Adapted from  https://stackoverflow.com/questions/26836532/onclick-image-display-div-content */

#showMoreContent13 {
width: ;
background-color:;
}

#divId1 {
display: ;
float:  ;
background:;
width: ;
margin:;
/*My animation*/
animation: spewaround .8s;
}

#divId2 {
display: ;
float: ;
width: ;
margin:;
/*My animation*/
animation: spewaround .8s;
}

@keyframes spewaround {
0% {
opacity: 1;
transform: rotatex(0deg);
}

40% {
}

45% {
transform: perspective(100px) translateZ(-90px);
opacity: 0;
}

50% {
}

55% {
transform: perspective(100px) translateZ(90px);
opacity: 0;
}

60% {
}

100% {
opacity: 1;
}
}


/* Does a good change of page with just a 180 turn */
/*
@keyframes spewaround {
0% {
opacity: 1;
transform: rotatex(0deg);
}

45% {
opacity: 0;
transform: rotatex(90deg);
}

50% {
}

55% {
opacity: 0;
transform: rotatex(270deg);
}

100% {
transform: rotatex(360deg);
opacity: 1;
}
}
*/

/*Original class.  display: none  It applied to both of the spewed divs (#divId1 and #divId2).  However, with this neither div was present upon clicking spewmore.  I wanted one div to be on show (with the other div selectable via a 'spew even more' button'.  The fix I came up with was to not speficy 'none' in .hideDivs, and to add class .hideDivB (with display:none) to #divID2.  Means #divId1 will be displayed upon clicking spewmore, but #divId2 won't.  And yet the jscript can fill in the show or display quality for either div, as per clicking a 'spew even more' or  'go back to the first spew' button.
*/
 .hideDivs{
    display:; 
 }

/*My class*/
 .hideDivB{
    display: none;
 }


/* END: 4. For the 'spewmore' that has two revealed/spewed messages */

/* END FILE */