@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
:root {
--white: #FFF;
--background: #060D23;
--background-hover: #383D4F;
--primary-blue: #00E0FE;
--blue-gray: #f4fcff;
}
html {
font-size: 16px;
font-family: "Mulish";
}
body {
height: 100%;
background-color: var(--blue-gray);
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.faq-container {
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 12em;
max-width: 600px;
padding: 2em;
border-radius: 1em;
background-color: var(--background);
}
details {
font-size: 1rem;
margin: 0 auto;
width: 100%;
border-radius: 8px;
position: relative;
max-width: 600px;
transition: all 0.3s ease-in-out;
}
details:hover {
background-color: var(--background-hover);
}
details:hover svg {
stroke: var(--primary-blue);
}
details[open] {
background-color: var(--background-hover);
}
details[open] .faq-title {
color: var(--primary-blue);
}
summary {
user-select: none;
cursor: pointer;
font-weight: 600;
display: flex;
list-style: none;
padding: 1em;
align-items: center;
}
summary svg {
stroke: var(--white);
}
details[open] summary svg {
stroke: var(--primary-blue);
transform: rotate(90deg);
}
summary:hover .faq-title {
color: var(--primary-blue);
}
summary::-webkit-details-marker {
display: none;
}
summary:focus {
outline: none;
}
.faq-title {
color: var(--white);
width: 90%;
transition: all 250ms ease-in-out;
}
.faq-content {
color: var(--white);
padding: 0.2em 1em 1em 1em;
font-weight: 300;
line-height: 1.5;
}
.expand-icon {
pointer-events: none;
position: absolute;
right: 1em;
transition: all 150ms ease-out;
}