/*****************************************************************/
/* Light mode ****************************************************/
/*****************************************************************/
@media (prefers-color-scheme: light) {
html
{
color:#000;
background-color:#fff;
}
h3
{
border-bottom:1px solid rgba(0,0,0,1);
}
#navbut-line
{
border-top:1px solid rgba(0,0,0,1);
}
.content-bg-33
{
background-color:rgba(255,255,255,0.9);
}
.content-bg-22
{
background-color:rgba(255,255,255,0.7);
}
.content-bg-11
{
background-color:rgba(255,255,255,0.5);
}
.content-bg-00
{
background-color:rgba(255,255,255,0);
}
a
{
color:#f60;
}
a:hover
{
color:rgba(0,0,0,0.6);
}
a:active
{
color:rgba(0,0,0,1);
}
.button
{
border:1px solid rgba(0,0,0,0.3);
background-color:rgba(255,255,255,0.4);
}
.button:hover
{
background-color:rgba(255,255,255,0.6);
}
a.button:active
{
background-color:rgba(255,255,255,0.8);
}
.content-center-logo
{
background:url(../clavis/logo-l.svg) no-repeat center;
}
}
/*****************************************************************/
/* Dark mode *****************************************************/
/*****************************************************************/
@media (prefers-color-scheme: dark) {
html
{
color:#fff;
background-color:#000;
}
h3
{
border-bottom:1px solid rgba(255,255,255,1);
}
#navbut-line
{
border-top:1px solid rgba(255,255,255,1);
}
.content-bg-33
{
background-color:rgba(0,0,0,0.9);
}
.content-bg-22
{
background-color:rgba(0,0,0,0.7);
}
.content-bg-11
{
background-color:rgba(0,0,0,0.4);
}
.content-bg-00
{
background-color:rgba(0,0,0,0);
}
a
{
color:#f60;
}
a:hover
{
color:rgba(255,255,255,0.6);
}
a:active
{
color:rgba(255,255,255,1);
}
.button
{
border:1px solid rgba(255,255,255,0.4);
background-color:rgba(0,0,0,0.4);
}
.button:hover
{
background-color:rgba(0,0,0,0.6);
}
a.button:active
{
background-color:rgba(0,0,0,0.8);
}
.content-center-logo
{
background:url(../clavis/logo-d.svg) no-repeat center;
}
}
/*****************************************************************/
html
{
height:100%;
/* background-image:url(../clavis/bg-57.jpg); */
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
scroll-behavior:smooth;
/* color:#ddd; */
/* background-color:#eee; */
}
body
{
margin:0 auto;
font-family:arial,helvetica; font-size:1.2em; text-align:center; line-height:1.5;
overflow-y:scroll;
}
h1
{
margin:0px 0px 15px 0px; padding:0px;
font-size:1em; font-weight:lighter;
}
h3
{
margin:0px 0px 0px 0px; padding:0px; position:relative;
font-size:1em; font-weight:normal; line-height:1.9;
}
p
{
display:table; margin:0px; padding:0px;
}
a
{
text-decoration:none; cursor:pointer;
transition:all 0.1s linear;
}
a:hover
{
text-decoration:none;
transition:all 0.2s linear;
}
a:active
{
text-decoration:none;
}
.link-11
{
color:#ccc; text-decoration:none;
}
.link-11:hover
{
color:#fff; text-decoration:underline;
transition: all 0.2s linear;
}
a.link-11:active
{
color:#fff; text-decoration:underline;
}
.button
{
padding:8px 17px 9px 17px; border-radius:22px;
text-decoration:none;
}
.button:hover
{
text-decoration:none;
transition: all 0.2s linear;
}
a.button:active
{
text-decoration:none;
}
/*****************************************************************/
#navbut-line
{
clear:both; margin:0 auto;
width:100%; padding-top:20px;
text-align:left;
}
#navbut-block
{
/* display:flex; justify-content:center; */
margin-top:0px; padding:0px;
list-style-type:none;
}
#navbut-block li
{
float:left;
/* margin-right:30px; */
}
#navbut-block a
{
display:block;
height:60px; margin-right:0px;
}
#navbut-block a:hover
{
border-radius:5px;
background-color:rgba(255,102,0,0.3);
transition: all 0.3s linear;
}
#navbut-block a:active,
#navbut-block a.current-active
{
}
.navbut-space
{
margin-right:20px;
}
/*****************************************************************/
.content-bg-00, .content-bg-11, .content-bg-22, .content-bg-33
{
float:left; width:100%;
}
.content-center, .content-center-logo, .content-center-nogo
{
clear:both; margin:0 auto;
width:62%; max-width:1000px; padding:0px;
}
.content-center-logo
{
min-height:100vh;
no-repeat center; background-size:38%;
}
.content-center-nogo
{
min-height:100vh;
}
.content-base
{
float:left;
width:100%; padding:40px 0px 40px 0px; margin:0px;
text-align:left;
}
/*****************************************************************/
.navi
{
float:left;
padding:0px; margin-right:80px;
font-size:0.8em;
}
.spacer, .spacer-bottom, .spacer-separate
{
clear:both; margin:0 auto;
width:100%; height:32px;
}
.spacer-bottom
{
height:450px;
}
.spacer-separate
{
height:80px;
}
.center
{
float:right;
width:100%; margin:0px;
text-align:center;
}
.column
{
float:left; margin-right:100px; margin-bottom:0px;
}
.tippex
{
margin:0px; padding:5px 0px 5px 0px;
color:#fff; background-color:rgba(0,0,0,1.0);
}
/*****************************************************************/
.head
{
font-size:1.5em; font-weight:lighter;
}
.head-color
{
font-size:1.5em; font-weight:lighter;
}
.head-big,.head-big-left
{
font-size:2em; font-weight:lighter;
line-height:1.5;
/* line-height:3; */
}
.head-big-left
{
padding-left:96px;
}
.head-color, .head-big, .head-big-left
{
color:#f60;
}
.gal-pic
{
float:left; width:50%; margin:8px 20px 0px 0px;
border-radius:1px;
}
/*****************************************************************/
.bottom-force
{
width:38%; border:0px;
}
/*****************************************************************/
.start
{
height:135px;
display: block; margin-left: auto; margin-right: auto;
}
audio
{
display:none; margin:0; position:absolute; left:15px; top:0px;
}
#player
{
height:26px; margin:0px 0px 3px 0px;
background-color:#474;
}
.track
{
float:right; position:absolute; top:0px; right:0px;
width:55px; height:26px; margin:0px; border:0px;
}
#player-index
{
clear:both; margin-left:auto; margin-right:auto; position:fixed; top:10px; right:15px; z-index:11;
width:55px; height:26px;
opacity:0.8;
}