.container-1{
width: 100%;
}
.container-1 img {
width: 95%;
margin-left: 2.5%;
margin-top: 5.0vh;
}
.animated-box {
position: relative;
}
.animated-box:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.5vh;
background: linear-gradient(160deg, #335214,#588d23, #8ad143, #335214, #588d23, #335214, #8ad143);
background-size: 300% 300%;
clip-path: polygon(0% 100%, 0.5vh 100%, 0.5vh 0.5vh, calc(100% - 0.5vh) 0.5vh, calc(100% - 0.5vh) calc(100% - 0.5vh), 0.5vh calc(100% - 0.5vh), 0.5vh 100%, 100% 100%, 100% 0%, 0% 0%);
}
.animated-box.in:after {
animation: frame-enter 0.01s forwards ease-in-out reverse, gradient-animation 5s ease-in-out infinite;
}
/* motion */
@keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
@keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) calc(100% - 0.7vh), 0.7vh calc(100% - 0.7vh), 0.7vh 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) calc(100% - 0.7vh), calc(100% - 0.7vh) calc(100% - 0.7vh), calc(100% - 0.7vh) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0% 100%);
}
}
article{
border-top: none;
border-bottom: ridge 0.8vh #006400;
border-right: ridge 0.8vh #006400;
border-left: ridge 0.8vh #006400;
background-color: #cfdbd7;
padding-bottom: 10.0vh;
width: 100%;
}
#articleContainer{
width: 100%;
height:72.0vh;
overflow-x: hidden;
overflow-y: scroll;
}
.tableHeader{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #cfdbd7;
border-top: solid 1.0vh #006600;
border-bottom: solid 0.3vh #006600;
position:-webkit-sticky;
position:sticky; top:0;
}
article h1{
font-family: Monotype Corsiva;
text-align:center;
text-justify: inter-word;
font-size:9.0vh;
color:#498d49;
font-weight:bold;
letter-spacing: 0.5vh;
text-shadow: 0.2vh 0.1vh #404040;
margin-bottom: 0;
}
td img{
height:11.0vh;
}
article h2{
margin: -1.0vh auto 3.0vh auto ;
width: 50.0vh;
font-family: Monotype Corsiva;
text-align:center;
font-size:3.2vh;
color:#498d49;
font-weight:bold;
letter-spacing: 0.5vh;
}
.list{
column-count: 2;
column-width: 50%;
column-rule: 0.2vh solid #506a60;
}
article li {
line-height: 4.0vh;
}
article a:link {
text-decoration:none;
color: #000000;
padding: 0.5vh;
line-height: 3.0vh;
}
article a:visited {
text-decoration:none;
color: #000000;
padding: 0.5vh;
}
article a:hover {
position: relative;
text-decoration:none;
color: #fff;
background-color: #008000;
padding: 0.5vh;
border-radius: 0.5vh;
}
article a:active {
text-decoration:none;
color: #000000;
padding: 0.5vh;
}
article a img {
display:none;
}
article a:hover img {
position:absolute;
display:inline;
z-index: 99;
height: 10vh;
top: 3.0vh;
left: 95%;
border:inset 0.5vh #008000;
border-radius: 2.0vh;
background-image: url("Green Background.png");
}
nav {
min-width: 20.0vh;
}
#slideshow img {
min-width: 22.0vh;
}
.logo img{
position: absolute;
width: 11%;
min-width: 18.0vh;
top: 47.0%;
left: 5.0%;
padding-top: 1.5vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
@-webkit-keyframes rotate {
100% {
transform: rotate(1turn);
}
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
#rainbow {
position: relative;
z-index: 0;
height: 3.2vh;
padding: 0.7vh;
font-size: 1.6vh;
border-radius: 1.5vh;
overflow: hidden;
}
#rainbow::before {
content: "";
position: absolute;
z-index: -2;
left: -30%;
top: -250%;
width: 150%;
height:600%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#b5f084, #b5f084), linear-gradient(#a4ed67, #a4ed67), linear-gradient(#8ee943, #8ee943), linear-gradient(#73de1a, #73de1a);
-webkit-animation: rotate 3s linear infinite alternate;
animation: rotate 3s linear infinite alternate;
}
#rainbow::after {
content: "";
position: absolute;
z-index: -1;
left: 0.1vh;
top: 0.05vh;
width: calc(100% - 0.2vh);
height: calc(100% - 0.2vh);
background-image: linear-gradient(to right, #004400, #005500);
border-radius: 1.5vh;
}
@keyframes border-flicker {
0% {
opacity:1;
-webkit-box-shadow: 0vh 0vh 1.0vh 0.4vh rgb(255, 255, 51);
-moz-box-shadow: 0vh 0vh 1.0vh 0.4vh rgb(255, 255, 51);
box-shadow: 0vh 0vh 1.0vh 0.4vh rgb(255, 255, 51);
}
100% {
opacity:1;
-webkit-box-shadow: 0vh 0vh 1.0vh 0.4vh rgb(102, 255, 102);
-moz-box-shadow: 0vh 0vh 1.0vh 0.4vh rgba(102, 255, 102);
box-shadow: 0vh 0vh 1.0vh 0.4vh rgba(102, 255, 102);
}
}