#table-of-content-button{background:#000;color:#FFF;border:1px solid #000;position:fixed;left:-101px;top:50%;transform:rotate(-90deg);height:50px;width:250px;cursor:pointer;transition:.3s}#table-of-content-button:hover{background:#FFF;color:#000;border-color:#000;transition:.3s}.table-of-content{position:fixed;top:0;left:0;transform:translateX(-100%);height:100%;min-width:400px;background-color:#FFF;transition:0.3s ease;z-index:5;padding:0 1rem 0 4rem;display:flex;flex-direction:column;justify-content:center}.table-of-content.active{transform:translateX(0);transition:0.3s ease}.table-of-content ul{list-style:none;padding:0;margin:0}.table-of-content header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.table-of-content h2{font-family:'SF Pro Text',sans-serif;font-size:18px;font-weight:300;line-height:23px;letter-spacing:-.02em}.close-table-of-content{cursor:pointer;transition:.3s}.close-table-of-content:hover{transform:scale(1.1);transition:.3s}.table-of-content li{padding:1rem 0}.table-of-content li.active a{opacity:1;transition:.3s}.table-of-content a{font-size:18px;font-weight:300;line-height:23px;letter-spacing:-.02em;opacity:.45;transition:.3s}.table-of-content a:hover{opacity:.7}@media (max-width:768px){#table-of-content-button{width:225px;height:1.8rem}.table-of-content{min-width:auto;width:100%;padding-left:2rem}}