InigoValentin/public/css/help.css

section.help{
    padding: 0;
    max-height: 2.8em;
    overflow-y: hidden;
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    transition: all .5s ease-in-out;
}
@media screen and (max-width : 800px){
    section.help{
        max-height: 2em;
        width: 90%;
    }
}
section.help.selected{
    max-height: 30em;
    border-bottom-right-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
}
@media screen and (max-width : 800px){
    section.help.selected{
        max-height: 50em;
    }
}
section.help h3{
    margin: 0;
}
@media screen and (max-width : 800px){
    section.help h3{
        margin: -0.8em -1em 0em -1em;
    }
}
section.help h3 img.slider{
    width: 1em;
    height: 1em;
    transition: all .3s ease-in-out;
    float: left;
    margin-left: -2em;
}
@media screen and (max-width : 800px){
    section.help h3 img.slider{
        margin-left: 0;
        margin-top: 0.1em;
    }
}
section.help.selected h3 img.slider{
    transform: rotate(90deg);
}
section.help div{
    margin: 1em 2em;
}

div#policy_cover{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: #000000aa;
    display: none;
}

section#policy{
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    z-index: 100;
    display: none;
}

section#policy h3 div#policy_close{
    float: right;
    cursor: pointer;
}

section#policy h3 div#policy_close img{
    height: 1.2em;
    width: 1.2em;
}

section#policy div{
    overflow-y: scroll;
    height: 90%;
}

section#policy div h1, section#policy div h2, section#policy div h3{
    all: revert;
}

section#policy div h3::before{
    all: revert;
}