html{
height: 100%;
width: 100%;
}
.container {
text-align: center;
padding: 64px;
}
/* Press the light bulb button using either a mouse or a keyboard, touch works too! to change the theme :) */
/* DEFAULTS */
/* ======================================================= */
body {
--global-bg: hsl(222 4% 96%);
--global-s: hsl(222 99% 46%);
--global-l: hsl(222 22% 92%);
--global-bs: transparent;
}
body.on {
--global-bg: hsl(228 100% 4%);
--global-s: hsl(254 100% 83%);
--global-l: hsl(254 2% 18%);
--global-bs: hsl(146 100% 84% / .06);
}
body {
display: grid;
place-content: center;
min-height: 100vh;
padding: 20px;
box-sizing: border-box;
margin: 0;
background: var(--global-bg);
transition: .3s linear;
}
/* BUTTON */
/* ======================================================= */
button {
width: 200px;
height: 200px;
border-radius: 1000px;
padding: 2rem;
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--global-l);
background: transparent;
cursor: pointer;
transition: .3s;
margin: 0 auto;
}
button:focus {
outline: 0;
border-color: var(--global-s);
}
button:active {
transform: scale(.92);
}
/* LIGHT BULB */
/* ======================================================= */
.light-bulb {
--t-duration: .3s;
--t-type: linear;
pointer-events: none;
transform: translateY(9px);
}
.upper {
transform: translateY(-11px);
}
.circle {
width: 56px;
height: 54px;
background: inherit;
border: 2px solid var(--global-s);
border-radius: 100px;
position: relative;
transition: var(--t-duration) var(--t-type);
box-shadow: inset 0 8px 12px 2px var(--global-bs), 2px -4px 12px var(--global-bs);
}
.line-1 {
width: 10px;
height: 30px;
border-bottom: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
background: var(--global-bg);
transform: rotate(-30deg) translateX(-3px) translateY(50%);
display: flex;
justify-content: center;
transition: var(--t-duration) var(--t-type);
}
.line-2 {
width: 10px;
height: 30px;
border-bottom: 0;
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
background: var(--global-bg);
transform: rotate(30deg) translateX(3px) translateY(50%);
display: flex;
justify-content: center;
transition: var(--t-duration) var(--t-type);
}
.line-c {
width: 0;
height: inherit;
border: 1px solid var(--global-s);
transition: var(--t-duration) var(--t-type);
}
.circle-bottom {
width: 40px;
height: 40px;
background: var(--global-l);
border-radius: 100%;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
transition: var(--t-duration) var(--t-type);
}
.lower {
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.lower-1 {
align-self: center;
width: 20px;
height: 24px;
border: 2px solid var(--global-s);
border-radius: 0 0 0 4px;
position: relative;
display: flex;
justify-content: space-evenly;
flex-direction: column;
transition: var(--t-duration) var(--t-type);
box-shadow: 2px 0 4px var(--global-bs);
}
.lower-1::before {
content: '';
position: absolute;
left: 2px;
top: -2px;
z-index: 2;
width: 8px;
height: 8px;
border-radius: 50px 50px 0 0;
background: var(--global-bg);
transform: translate(-100%, -100%);
transition: var(--t-duration) var(--t-type);
}
.lower-1::after {
content: '';
position: absolute;
left: calc(100% - 6px);
top: -4px;
z-index: 2;
width: 6px;
height: 8px;
background: var(--global-bg);
transition: var(--t-duration) var(--t-type);
}
.lower-line {
width: 50%;
height: 2px;
background: var(--global-s);
transition: var(--t-duration) var(--t-type)
}
.lower-2 {
align-self: center;
transform: translateX(13px) translateY(-4px);
transition: .3s linear;
}
.lower-2-lines {
width: 2px;
height: 40px;
background: linear-gradient(to bottom,
transparent,
transparent 20%,
var(--global-s) 20%,
var(--global-s) 80%,
transparent 80%);
background-repeat: repeat-y;
background-size: 2px 10px;
transition: var(--t-duration) var(--t-type);
}
.lower-2-circle {
width: 3px;
height: 3px;
border: 2px solid var(--global-s);
border-radius: 10px;
transform: translateX(-2px) translateY(2px);
transition: var(--t-duration) var(--t-type)
}
.lower-2-inner {
transform-origin: center top;
animation: swing 4s infinite alternate linear;
}
@keyframes swing {
50% {
transform: rotate(-20deg)
}
100% {
transform: rotate(20deg)
}
}
/* ABS-PROFILES */
/* ======================================================= */
.abs-profiles {
position: fixed;
right: calc(20px + .6vw);
bottom: calc(23px + .6vw);
filter: saturate(0) brightness(1);
opacity: .7;
}
.abs-profiles a {
display: inline-block;
margin-left: 10px;
}