Files
pages/style.css
2020-11-24 16:53:34 +01:00

107 lines
1.7 KiB
CSS

/* Define colors */
:root {
--col-bg: #333333;
--col-fg: #f0f0f0;
--col-link: #0080ff;
--col-link-hover: #80f0ff;
}
body {
background-attachment: fixed;
background-color: var(--col-bg);
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
color: var(--col-fg);
}
a {
text-decoration: none;
color: var(--col-link);
}
a:hover {
text-decoration: none;
color: var(--col-link-hover);
}
h1 {
text-align: center;
opacity: 0.9;
}
.box img {
padding: 20px;
}
.box {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.2);
padding: 20px;
width: 60%;
min-width: 512px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
word-wrap: break-word;
}
.flexvertical {
display: flex;
align-items: center;
flex-direction: column;
}
.flexhorizontal {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap-reverse;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #eee;
text-align: center;
border-radius: 10px;
padding: 10px;
position: absolute;
z-index: 1;
left: 100%;
top: 0%;
margin-left: 10px;
opacity: 0;
transition: opacity 1s;
transition-delay: 2s;
transition-timing-function: ease-in;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#footer {
border: 0px;
background-color: rgba(0, 0, 0, 0);
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}