177 lines
2.6 KiB
CSS
177 lines
2.6 KiB
CSS
:root {
|
|
--primary-pink: #F5A9B8;
|
|
--primary-blue: #5BCFFA;
|
|
--white: #FFFFFF;
|
|
--dark-bg: #161618;
|
|
--gray-blue: #A8C5DB;
|
|
--dark-blue: #12354B;
|
|
--dark-teal: #12404B;
|
|
|
|
}
|
|
|
|
display-imagebody,
|
|
html {
|
|
-ms-scroll-chaining: none;
|
|
overscroll-behavior: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--dark-bg);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
font-family: "Noto Sans", serif;
|
|
font-optical-sizing: auto;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-variation-settings:
|
|
"wdth" 100;
|
|
}
|
|
|
|
.background-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-item {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.display-image {
|
|
width: 15em;
|
|
height: auto;
|
|
display: block;
|
|
border-radius: 0%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover
|
|
}
|
|
|
|
.link-each-image {
|
|
max-width: 3em;
|
|
max-height: 3em;
|
|
width: auto;
|
|
height: auto;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.main-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.header {
|
|
padding: 3rem 0 1.5rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
color: #f2f5f4;
|
|
text-align: center;
|
|
margin: 10px auto;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.pronouns-desc {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
color: #f2f5f4;
|
|
text-align: center;
|
|
margin: 10px auto;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.flag {
|
|
width: 1.5em;
|
|
height: auto;
|
|
border-radius: 0.10em;
|
|
}
|
|
|
|
.lang-flag {
|
|
width: auto;
|
|
max-width: 2em;
|
|
height: 1em;
|
|
}
|
|
|
|
.separator {
|
|
font-weight: unset;
|
|
}
|
|
|
|
.separator,
|
|
.source {
|
|
color: #f2f5f4;
|
|
text-align: center;
|
|
margin: 25px auto;
|
|
margin-top: 20px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
hr {
|
|
color: white
|
|
}
|
|
|
|
.ConYes {
|
|
background-color: #06d6a0;
|
|
color: #222222;
|
|
}
|
|
|
|
.ConProb {
|
|
background-color: #ffd166;
|
|
color: #222222;
|
|
}
|
|
|
|
.ConProbNo {
|
|
background-color: #ef476f;
|
|
color: #222222;
|
|
}
|
|
|
|
.row {
|
|
display: table;
|
|
width: 100%;
|
|
/*Optional*/
|
|
table-layout: fixed;
|
|
/*Optional*/
|
|
border-spacing: 10px;
|
|
/*Optional*/
|
|
}
|
|
|
|
.column {
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
max-width: fit-content;
|
|
padding: 5px;
|
|
border-radius: 0.5em;
|
|
font-size: clamp(0.6rem, 0.1rem + 1.6vw, 1rem);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
|
|
@media (max-width:768px) {
|
|
.display-image {
|
|
width: 15em;
|
|
}
|
|
}
|
|
|
|
@media (max-width:480px) {
|
|
.display-image {
|
|
width: 10em;
|
|
}
|
|
} |