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; }