html, body { width: 100%; height: 100%; }


/* USING CUSTOM FONTS */
@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"); }

/* adding differnet hover effect to each face*/

#page00 #background
{background-image: url(../assets/.jpg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;}

#page01 #background
{background-image: url(../assets/0.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f7b680;
background-blend-mode: multiply;}

#page02 #background
{background-image: url(../assets/2.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #e18d77;
background-blend-mode: multiply;}

#page03 #background
{background-image: url(../assets/3.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #b36a65;
background-blend-mode: multiply;}
#page03:hover {    
-webkit-animation: shake 0.5s ease-in-out 0.5s infinite alternate;
}

#page04 #background
{background-image: url(../assets/4.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f6636c;
background-blend-mode: multiply;}

#page05 #background
{background-image: url(../assets/5.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #fdb46c;
background-blend-mode: multiply;}

#page06 #background
{background-image: url(../assets/6.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #e18d77;
background-blend-mode: multiply;}

#page07 #background
{background-image: url(../assets/7.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f6636c;
background-blend-mode: multiply;}

#page08 #background
{background-image: url(../assets/8.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #e18d77;
background-blend-mode: multiply;}

#page09 #background
{background-image: url(../assets/9.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #b36a65;
background-blend-mode: multiply;}

#page10 #background
{background-image: url(../assets/10.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #fdb46c;
background-blend-mode: multiply;}

#page11 #background
{background-image: url(../assets/11.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f7b680;
background-blend-mode: multiply;}


#page12 #background
{background-image: url(../assets/12.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f6636c;
background-blend-mode: multiply;}


#page13 #background
{background-image: url(../assets/13.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #e18d77;
background-blend-mode: multiply;}

@-webkit-keyframes shake {
 from {
    -webkit-transform: rotate(5deg);
 }
 to {
   -webkit-transform-origin:center center;
   -webkit-transform: rotate(-5deg);
 }
}

#page14 #background
{background-image: url(../assets/14.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #fdb46c;
background-blend-mode: multiply;}

#page15 #background
{background-image: url(../assets/15.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #b36a65;
background-blend-mode: multiply;}

#page16 #background
{background-image: url(../assets/16.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f7b680;
background-blend-mode: multiply;}

#page17 #background
{background-image: url(../assets/17.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f6636c;
background-blend-mode: multiply;}

#page18 #background
{background-image: url(../assets/18.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #e18d77;
background-blend-mode: multiply;}

#page19 #background
{background-image: url(../assets/19.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f8f890;
background-blend-mode: multiply;}

#page20 #background
{background-image: url(../assets/20.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #b36a65;
background-blend-mode: multiply;}

#page21 #background
{background-image: url(../assets/21.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #fdb46c;
background-blend-mode: multiply;}

#page22 #background
{background-image: url(../assets/22.svg);
background-size: contain;
background-position: center;
background-repeat:no-repeat;
background-color: #f7b680;
background-blend-mode: multiply;}


/*circles in index page*/
.circle0{
width:50vh;
height:50vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:-30%;
right:3%;
filter:blur(20px);
animation-name: color0;
animation-duration: 20s
}
@-webkit-keyframes color0 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #f7b680;}
    50%  {background-color: #b36a65;}
    100% {background-color: #e18d77;}
}

.circle1{
width:65vh;
height:65vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom: 10%;
right:60%;
filter:blur(20px);
animation-name: color1;
animation-duration: 10s
}
@-webkit-keyframes color1{
    0%   {background-color: #fdb46c;}
    25%  {background-color: #e18d77;}
    50%  {background-color: #f7b680;}
    100% {background-color: #b36a65;}
}


.circle2{
width:30vh;
height:30vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:20%;
right:10%;
filter:blur(20px);
animation-name: color2;
animation-duration: 10s
}
@-webkit-keyframes color2 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #f6636c;}
    50%  {background-color: #f7b680;}
    100% {background-color: #b36a65;}
}

.circle3{
width:65vh;
height:65vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom: 50%;
right:20%;
filter:blur(20px);
animation-name: color3;
animation-duration: 10s
}
@-webkit-keyframes color3 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #b36a65;}
    50%  {background-color: #f7b680;}
    100% {background-color: #f6636c;}
}

.circle5{
width:25vh;
height:25vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom: 30%;
right:30%;
filter:blur(20px);
animation-name: color5;
animation-duration: 10s
}
@-webkit-keyframes color5 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #f6636c;}
    50%  {background-color: #f7b680;}
    100% {background-color: #b36a65;}
}

.circle4{
width:25vh;
height:25vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:15%;
right:50%;
filter:blur(20px);
}

.circle6{
width:15vh;
height:15vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:5%;
right:40%;
filter:blur(20px);
animation-name: color6;
animation-duration: 10s
}
@-webkit-keyframes color6 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #b36a65;}
    50%  {background-color: #f6636c;}
    100% {background-color: #f7b680;}
}

.circle7{
width:15vh;
height:15vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:78%;
right:70%;
filter:blur(20px);
animation-name: color7;
animation-duration: 10s
}
@-webkit-keyframes color7 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #f7b680;}
    50%  {background-color: #b36a65;}
    100% {background-color: #e18d77}
}

.circle8{
width:15vh;
height:15vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:15%;
right:3%;
filter:blur(20px);
animation-name: color8;
animation-duration: 10s
}
@-webkit-keyframes color7 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #e18d77;}
    50%  {background-color: #b36a65;}
    100% {background-color: #f7b680;}
}

.circlex1{
width:10vh;
height:10vh;
border-radius: 50%;
position:absolute;
background:#fdb46c;
bottom:75%;
right:5%;
filter:blur(20px);
animation-name: colorx1;
animation-duration: 10s
}
@-webkit-keyframes colorx1 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #f7b680;}
    50%  {background-color: #b36a65;}
    100% {background-color: #e18d77;}
}

.circlex2{
width:10vh;
height:10vh;
border-radius: 50%;
position:absolute;
background:#fdb82c;
bottom:3%;
right:90%;
filter:blur(20px);
animation-name: colorx2;
animation-duration: 10s
}
@-webkit-keyframes colorx2 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #e18d77;}
    50%  {background-color: #b36a65;}
    100% {background-color: #f7b680;}
}

.circlex3{
width:20vh;
height:20vh;
border-radius: 50%;
position:absolute;
background:#fdb82c;
bottom:85%;
right:85%;
filter:blur(20px);
animation-name: colorx3;
animation-duration: 10s
}
@-webkit-keyframes colorx3 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #f7b680;}
    50%  {background-color: #e18d77;}
    100% {background-color: #b36a65;}
}

.circlex4{
width:10vh;
height:10vh;
border-radius: 50%;
position:absolute;
background:#fdb82c;
bottom:75%;
right:95%;
filter:blur(20px);
animation-name: colorx4;
animation-duration: 10s
}
@-webkit-keyframes colorx4 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #b36a65;}
    50%  {background-color: #f7b680;}
    100% {background-color: #e18d77;}
}

.circlex5{
width:15vh;
height:15vh;
border-radius: 50%;
position:absolute;
background:#fdb82c;
bottom:60%;
right:5%;
filter:blur(20px);
animation-name: colorx5;
animation-duration: 10s
}
@-webkit-keyframes colorx5 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #e18d77;}
    50%  {background-color: #f7b680;}
    100% {background-color: #f6636c}
}

.circlex6{
width:20vh;
height:20vh;
border-radius: 50%;
position:absolute;
background:#fdb82c;
bottom:3%;
right:60%;
filter:blur(20px);
animation-name: colorx6;
animation-duration: 10s
}
@-webkit-keyframes colorx6 {
    0%   {background-color: #fdb46c;}
    25%  {background-color: #b36a65}
    50%  {background-color: #e18d77;}
    100% {background-color: #f6636c}
}

.circlex7{
width:25vh;
height:25vh;
border-radius: 50%;
position:absolute;
background:#fdb82c;
bottom:85%;
right:3%;
filter:blur(20px);
animation-name: colorx7;
animation-duration: 10s
}
@-webkit-keyframes colorx7 {
    0%   {background-color: #b36a65;}
    25%  {background-color: #fdb46c}
    50%  {background-color: #f6636c;}
    100% {background-color: #e18d77}
}




.txt{font-family: sans-serif;
	font-size: 60px;
	color:blue;
	position: absolute;
	margin:auto;
	top:0%;left:0;right:85%;bottom:80%;
	text-align: center;
	height: 0em;
	text-shadow:;
}


.txt:hover {    
    -webkit-animation: shake 0.3s ease-in-out 0.3s infinite alternate;
}

@-webkit-keyframes shake {
 from {
    -webkit-transform: rotate(10deg);
 }
 to {
   -webkit-transform-origin:center center;
   -webkit-transform: rotate(-10deg);
 }

}


@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-40px);
		transform: translateY(-40px);
	}

	80% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
}
#page20 #background:hover {
	animation: bounce 10s;
}