blob: 43a06822d5ce430e1ba769f7a8142337b4f9ae96 [file] [log] [blame]
.backgroundImage {
position: absolute;
bottom: -8px;
left: -3px;
width: calc(100% + 6px);
border-radius: 0 0 16.5px 16.5px;
filter: var(--card-overlay-filter);
}
.header {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
filter: var(--card-overlay-filter);
}
.panel {
position: absolute;
overflow: hidden;
width: min(76%, 800px);
height: auto;
top: calc((100% - min(76%, 800px)) / 1.5 );
left: calc((100% - min(76%, 800px)) / 2 );
border-radius: 16.5px;
background-color: var(--card-background-color);
backdrop-filter: blur(7px);
filter: var(--card-filter);
padding-top: 30px;
padding-bottom: 40px;
}
.title {
width: 100%;
text-align: center;
font-weight: 100;
margin-top: 0px;
margin-bottom: -20px;
font-size: max(2em, 4vw);
color: var(--card-text-color);
word-break: break-word;
}
.subtext {
margin-bottom: 0px;
width: 100%;
text-align: center;
font-weight: 100;
font-size: max(1.5em, 1.5vw);
color: var(--card-text-color);
}
.subtextExtra {
margin-bottom: 80px;
}
@keyframes arrow-slide {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-1em);
transform: translateY(-1em);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.arrow {
-webkit-animation: arrow-slide 2s ease-in-out infinite both;
animation: arrow-slide 2s ease-in-out infinite both;
}
.arrowSpan {
position: absolute;
bottom: 100px;
width: 100%;
text-align: center;
}
.arrowHidden {
display: none;
}
.buttonLayout {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
padding: 0px;
position: absolute;
bottom: 5px;
right: 5px;
}
.button {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: right;
position: static;
flex: none;
order: 1;
flex-grow: 0;
margin: 5px;
padding: 5px 10px;
border-radius: 8px;
}