body {
font: 100% "Arial CE", "Helvetica CE", Arial, helvetica, sans-serif;
font-size:large;
background: linear-gradient(-45deg, #00356B, #021e3b);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
a {
color: #00ffff;
transition: 0.25s;
text-decoration:underline;
text-shadow:#08a6a6 3px 3px 4px;
}
a:hover {
text-decoration:none;
}
#content {
color:#fff;
max-width:500px;
margin:auto;
margin-top:40px;
padding: 10px 20px 30px 20px;
background: rgba(0, 0, 0, 0.4);
z-index:1000;
}
h1 {
font-size: 2em;
font-weight: 600;
letter-spacing: -1px;
text-shadow: 1px 1px 2px #808080;
}
#info {
width:500px;
bottom:5px;
right:5px;
color:#fff;
font-size:15px;
position:fixed;
text-align:right;
line-height:150%;
}
#info a {
color:#fff;
}
#info a:hover {
text-decoration:none;
}
footer {
color:#000;
text-align:center;
font-size:medium;
margin-top:30px;
}
.iconLink {
width:50px;
}
.spoiler-content {
height: 0;
overflow: hidden;
padding: 10px 10px 0px 10px;
line-height: 160%;
transition: height 0.5s ease-out, transform 0.5s ease-out, background 0.5s ease-out, color 0.5s ease-out;
transform: translateY(-100%);
color: transparent;
background: transparent;
border: solid transparent 1px;
}
.spoiler-header {
color: #000;
background: #c0c0c0;
border: solid #000 1px;
cursor: pointer;
width:120px;
text-align:center;
padding:5px;
border-radius: 5px;
margin-bottom: 10px;
}
.spoiler-content.show {
height: auto; /* or a fixed height that suits your content */
transform: translateY(0);
color: #000;
background: #c0c0c0;
border: solid #000 1px;
border-radius: 5px;
}