#main > article {
flex: 0 0 60%;
}
#main > aside {
flex: 0 0 15%;
}
.container-1{
width: 100%;
}
.container-1 img {
width: 95%;
margin-left: 2.5%;
margin-top: 5.0vh;
}
.rain {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
/* The class attributes of the 'photo-grid-container' in relationship to the page...Contains the 'photo-grid, which contains the 'photo-grid-items' */
.photo-grid-container {
display: flex;
justify-content: center;
}
/* The class attributes of the 'photo-grid' in relationship to the photo-grid-container...Contains the 'photo-grid-items'...The grid layout for the photos */
.photo-grid {
flex-wrap: wrap;
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
background-image: url("Tan Background.png");
}
/* The class attributes of the 'photo-grid-items': The item, or items, within each 'cell' of the grid...In this case, an image */
.photo-grid-item {
justify-content: center;
width: 30.7vh;
height: 40.5vh;
padding: 0.3vh;
border: 0.8vh double #939393;
border-radius: 2.5vh 2.5vh 6.5vh 6.5vh;
margin: 1.0vh;
}
.drop {
position: absolute;
bottom: 100%;
width: 1.5vh;
height: 12.0vh;
pointer-events: none;
animation: drop 0.5s linear infinite;
}
@keyframes drop {
0% {
transform: translateY(0vh);
}
75% {
transform: translateY(130vh);
}
100% {
transform: translateY(1305vh);
}
}
.stem {
width: 0.25vh;
height: 100%;
margin-left: 0.7vh;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
animation: stem 0.5s linear infinite;
}
@keyframes stem {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.splat {
width: 1.5vh;
height: 1.0vh;
opacity: 1;
transform: scale(0);
animation: splat 0.5s linear infinite;
display: none;
}
article.splat-toggle .splat {
display: block;
}
@keyframes splat {
0% {
opacity: 1;
transform: scale(0);
}
80% {
opacity: 1;
transform: scale(0);
}
90% {
opacity: 0.5;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
.flashit{
animation-delay: 4s;
-webkit-animation: flash ease-out 10s infinite;
-moz-animation: flash ease-out 10s infinite;
animation: flash ease-out 10s infinite;
}
.flashit img{
width: 100%;
index: 1;
}
@-webkit-keyframes flash {
from { opacity: 0; }
83% { opacity: 0; }
84% { opacity: 0.6; }
85% { opacity: 0.5; }
87% { opacity: 0.8; }
to { opacity: 0; }
}
@keyframes flash {
from { opacity: 0; }
83% { opacity: 0; }
84% { opacity: 0.6; }
85% { opacity: 0.5; }
87% { opacity: 0.8; }
to { opacity: 0; }
}
.container{
height: 8.0vh;
border: ridge 1.0vh #cc7a00;
border-radius: 2.0vh;
overflow: hidden;
background: #008000;
}
.text{
width: 27.5vh;
text-decoration: none;
color: #ffff00;
font-family: Algerian, Goudy Type;
font-size: 3.5vh;
text-align: center;
padding-top: 0.6vh;
margin: 0;
margin-left: 9.8vh;
transform: translateX(-200%);
opacity: 0;
animation: slide-in-anim 13s ease-out forwards infinite;
}
@keyframes slide-in-anim {
0% {
opacity: 0;
}
5% {
opacity: 0.3;
}
10% {
transform: translateX(-50%);
opacity: 1;
}
80% {
transform: translateX(-50%);
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(50%);
}
}
.sway {
animation-delay: 1s;
animation-duration: 25s;
animation-name: sway;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes sway {
25% {transform: skewX(-3deg); color: #118c00}
45% {transform: skewX(5deg)scaleY(0.9); color: #16b400}
50% {transform: skewX(3deg)scaleY(1.1); color: #0d6a00}
55% {transform: skewX(7deg); color: #118c00}
60% {transform: skewX(-5deg); color: #0d6a00}
65% {transform: skewX(3deg); color: #16b400}
70% {transform: skewX(-20deg)scaleY(0.8); color: #118c00}
75% {transform: skewX(-10deg); color: #0d6a00}
80% {transform: skewX(25deg)scaleY(1.2); color: #16b400}
85% {transform: skewX(20deg); color: #0d6a00}
90% {transform: skewX(30deg) scaleY(1.5); color: #118c00}
95% {transform: skewX(-25deg)scaleY(0.5); color: #118c00}
100 {transform: skewX(-5deg); color: #0d6a00}
}
.content {
height: 8.0vh;
width: 29.3vh;
min-width: 27.5vh;
border: ridge 0.7vh #a0522d;
border-radius: 2.0vh;
position: relative;
margin-left: -1.5vh;
background:#004400;
}
.leaves {
position: absolute;
}
.leaf1 {
position: absolute;
top: -55vh;
animation: fall 8s linear infinite;
overflow: hidden;
}
.leaf2 {
position: absolute;
top: -57vh;
animation: fall2 6s linear infinite;
overflow: hidden;
}
.leaf3 {
position: absolute;
top: -58vh;
left:-10.0vh;
animation: fall 14s linear infinite 1s;
overflow: hidden;
}
.leaf4 {
position: absolute;
top: -54vh;
left:25vh;
animation: fall2 8s linear infinite 1.5s;
overflow: hidden;
}
.leaf5 {
position: absolute;
top: -59vh;
left:29vh;
animation: fall3 5.5s linear infinite 2s;
overflow: hidden;
}
@keyframes fall {
0% {top:-57.0vh; transform: translateX(-5.0vh) rotateX(180deg);}
100% {top:33.0vh; transform: translateX(12.0vh) rotateX(-220deg);}
}
@keyframes fall2 {
0% {top:-59vh; transform: translateX(5vh) rotateX(-100deg);}
100% {top:33vh; transform: translateX(-35vh) rotateX(320deg);}
}
@keyframes fall3 {
0% {top:-56vh; transform: translateX(0vh) rotateX(-120deg);}
100% {top:33vh; transform: translateX(-40vh) rotateX(180deg);}
}
@keyframes fall4 {
0% {top:-55vh; transform: translateX(0vh) rotateY(-180deg);}
100% {top:33vh; transform: translateX(-40vh) rotateY(135deg);}
}
@keyframes fall5 {
0% {top:-57vh; transform: translateX(-10vh) rotateY(180deg);}
100% {top:33vh; transform: translateX(25vh) rotateY(-180deg);}
}
.leaf6 {
position: absolute;
top: -58vh;
left:25vh;
animation: fall3 11s linear infinite 1.5s;
overflow: hidden;
}
.leaf7 {
position: absolute;
top: -59vh;
left:17vh;
animation: fall5 6.5s linear infinite .5s;
overflow: hidden;
}
.leaf8 {
position: absolute;
top: -60vh;
left:25vh;
animation: fall3 10.2s linear infinite .5s;
overflow: hidden;
}
.leaf9 {
position: absolute;
top: -58vh;
left:18vh;
animation: fall4 7.2s linear infinite .3s;
overflow: hidden;
}
.leaf10 {
position: absolute;
top: -57vh;
left:10vh;
animation: fall5 5.7s linear infinite 1.3s;
overflow: hidden;
}
.leaf11 {
position: absolute;
top: -59vh;
left:17vh;
animation: fall5 13.7s linear infinite 1.7s;
overflow: hidden;
}
.animationDiv{
margin-left: -1.5vh;
padding-top: 1.5vh;
width: 29.3vh;
height: 9.0vh;
font-size: 2.5vh;
font-family: Kristen ITC;
background: #1e623b;
border-radius: 2.0vh;
border: ridge 1.0vh #cc7a00;
}
.animate-charcter
{
background-image: linear-gradient(
-225deg,
#fffc0b 0%,
#13ff59 10%,
#c54d63 20%,
#fff800 30%,
#13ff59 40%,
#fffc0b 50%,
#ff6d9d 60%,
#ec9480 70%,
#feab0c 80%,
#e8992a 90%,
#fffc0b 100%
);
background-clip: border-box;
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 7s linear infinite;
display: inline-block;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
.mushrooms {
width: 29.3vh;
margin-left:-1.5vh;
font-family: "Cooper Black";
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 9.5vh;
letter-spacing: 0.1vh;
padding: 3.0vh 0 3.0vh 0;
border: ridge 0.7vh #c47700;
border-radius: 2.0vh;
background: #eed6a8;
}
.condensed {
font-size: 2.8vh;
font-family: Cooper Black, Goudy Type, Goudy Old Style;
-webkit-transform: scale(1, 2);
-moz-transform: scale(1, 2);
-ms-transform: scale(1, 2);
-o-transform: scale(1, 2);
transform: scale(1, 2);
}
@keyframes lights {
0% {
color: hsl(230, 40%, 80%);
text-shadow:
0 0 1em hsla(320, 100%, 50%, 0.2),
0 0 0.125em hsla(320, 100%, 60%, 0.3),
-1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
}
30% {
color: hsl(230, 80%, 90%);
text-shadow:
0 0 1em hsla(320, 100%, 50%, 0.5),
0 0 0.125em hsla(320, 100%, 60%, 0.5),
-0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
}
40% {
color: hsl(230, 100%, 95%);
text-shadow:
0 0 1em hsla(320, 100%, 50%, 0.5),
0 0 0.125em hsla(320, 100%, 90%, 0.5),
-0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
}
70% {
color: hsl(230, 80%, 90%);
text-shadow:
0 0 1em hsla(320, 100%, 50%, 0.5),
0 0 0.125em hsla(320, 100%, 60%, 0.5),
0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
-0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
}
100% {
color: hsl(230, 40%, 80%);
text-shadow:
0 0 1em hsla(320, 100%, 50%, 0.2),
0 0 0.125em hsla(320, 100%, 60%, 0.3),
1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
-1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
}
}
/* The class attributes for the buttons inside of the photo-grid-container */
.button1 {
display: inline-block;
width: 28.0vh;
height: 4.7vh;
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(125,125,125,1));
border: 0.2vh solid #b3b3b3;
color: #144e14;
text-decoration: none;
font-family: Angsana New;
font-size: 2.2vh;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border-radius: 1.5vh;
margin-top: 0.5vh;
}
/* The class attributes for the buttons inside of the photo-grid-container cedad0*/
article h2 {
display: inline-block;
width: 28vh;
height: 2.5vh;
font-family: LilyUPC;
font-size: 1.7vh;
letter-spacing: 0.2vh;
background: transparent;
color: #545454;
border-radius: 2.5vh;
padding-left: 0.3vh;
padding-right: 0.3vh;
margin-top: 0.5vh;
margin-bottom: -0.2vh;
text-decoration: none;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The class attributes that create the 'Hover' effects for the button inside of 'footer-Item1' */
.button1:hover {
color: #008000;
text-shadow: 0.1vh 0.1vh #00ff00;
border-color: #006000;
}
article h2.pointer:hover {
text-decoration: none;
cursor: default;
}
hr.greenline {
margin-top: 0.5vh;
margin-bottom: 0.5vh;
border-top: 0.1vh solid #008000;
}
#slideshow img {
position: absolute;
height:auto;
left: 2.5%;
width:20%;
border: ridge 1.0vh #004400;
border-radius: 2.5vh;
}
#slideshow img:nth-of-type(1) {
animation-name: fader;
animation-delay: 10s;
animation-duration: 10s;
z-index: 20;
}
#slideshow img:nth-of-type(2) {
z-index: 10;
}
#slideshow img:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.searchTable{
height: 9.0vh;
border-collapse: separate;
border-radius: 1.5vh;
background-image: linear-gradient(to right, #00aa00, #004400);
border: solid 0.2vh #fff;
color: #fff;
}
.dropup {
position: relative;
margin-top: 1.0vh;
margin-right: 2.0vh;
display: inline-block;
width: 30.0vh;
z-index: 1;
}
.dropup-content {
display: none;
position: absolute;
}
#myInput {
background-repeat: no-repeat;
background-color: #e6ffe6;
width: 30vh;
height: 3.0vh;
font-size: 2.0vh;
color: #000;
border-radius: 0.5vh;
margin-left: 0.8vh;
}
#myUL {
position: absolute;
width: 29.5vh;
list-style-type: none;
padding: 0;
margin-left: 1.0vh;
height: 25.0vh;
overflow-y:scroll;
bottom: 2.8vh;
}
#myUL li {
display: none;
text-align: left;
}
#myUL li a {
border: .1vh solid #006400;
border-radius: .5vh;
background-color: #f0f8ff; /* AliceBlue */
text-decoration: none;
text-indent: 0.5em;
font-size: 1.6vh;
color: #555;
display: block;
height: 2.75vh;
padding-top: 0.4vh;
}
#myUL li a:hover:not(.header) {
color: #e6ffe6;
background-color: #006400;
}
.radioButton{
filter: saturate(75%) hue-rotate(240deg) brightness(100%) contrast(100%);
}
label{
margin-left: -0.75vh;
padding: 1.5vh 1.75vh 0 0.5vh;
vertical-align: 0.25em;
font-size: 1.3vh;
}
.listTable{
height: 9.0vh;
border-collapse: separate;
border: solid 0.2vh #fff;
border-radius: 1.5vh;
background-image: linear-gradient(to right, #00aa00, #006600);
}
.listTable th{
border: none;
font-size: 1.7vh;
text-align: center;
color: #d8f6d9;
}
.listTable td{
padding-left: 1.0vh;
padding-right: 1.0vh;
}
.listTable a{
color: #fff;
line-height: 1.4vh;
}