66 lines
1.2 KiB
SCSS
66 lines
1.2 KiB
SCSS
:root {
|
|
--text-color: #fff;
|
|
--background: #383C4A;
|
|
--background-darker: #2E323E;
|
|
--background-darkest: #2A2D38;
|
|
--blue: #5BCEFA;
|
|
--pink: #F5A9B8;
|
|
--blurple: #7289DA;
|
|
--dark-blurple: #4E5D94;
|
|
--href: var(--blurple);
|
|
--href-darker: var(--dark-blurple);
|
|
--main-font: "OpenDyslexic2";
|
|
}
|
|
|
|
#shadow img {
|
|
position: relative;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 1s infinite ease-in-out alternate;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from {
|
|
transform: scale(0.8);
|
|
}
|
|
to {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
#wordmark {
|
|
filter: drop-shadow(2px 2px 4px #222);
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#universe .grid-container {
|
|
padding-top: 2px;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#universe figure {
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
|
|
#universe figcaption {
|
|
background-color: var(--blurple);
|
|
}
|
|
|
|
#universe figure img {
|
|
border-radius: 2px;
|
|
background-color: var(--dark-blurple);
|
|
padding-bottom: 0;
|
|
height: 475px;
|
|
width: 260px;
|
|
}
|