.togglenav { position:absolute; top:0; left:0; right:0; height:40px; z-index:1000; }
#toggleswitch {position: absolute;display: none;}
label[for=toggleswitch] { padding:30px; cursor:pointer;}
.togglebar, .togglebar:before, .togglebar:after{background-color: #7d5462; width: 50px; height: 2px;}
.togglebar {  position: absolute; top: 18px; left: 1vw; cursor: pointer; }
.togglebar:before { content: ""; position: absolute;  bottom: 10px; }
.togglebar:after { content: ""; position: absolute; top: 10px; }
.menu-box { position:fixed; z-index:100; top:40px; left:-200px; width:200px; height:calc(100vh - 40px);
 opacity: 0; }
.main-menu { background-color: #7d5462; list-style: none; position: relative; top: 20px; left:0; display: flex; flex-direction: column; height: 100vh; }
.main-menu li { border-bottom: 1px solid rgba(248, 243, 235, 0.2); }
.main-menu li a { display: block; text-align: center; text-decoration: none; color: #f8f3eb; font-size: 14px; text-transform: uppercase; padding: 15px 0 15px 0; font-weight: 500; }
.main-menu li a:hover { transition: 300ms; background-color: #f8f3eb; color: #7d5462;}
#toggleswitch:checked ~ .menu-box { left: 0px; transition: 300ms; width: 300px; opacity: 1; }
#toggleswitch:not(:checked) ~ .menu-box { transition: 300ms; }
#toggleswitch:checked ~ label .togglebar:before { transition:300ms; transform:rotate(-45deg);
 bottom: 7px; width: 20px; left: -4px; }
#toggleswitch:checked ~ label .togglebar:after { transition: 300ms; transform: rotate(45deg);
top: 6px; width: 20px; left: -4px; }
#toggleswitch:not(:checked) ~ label .togglebar:before, #toggleswitch:not(:checked) ~ label .togglebar:after {
transition: 300ms; }
main { width: 100%; height: 100vh; background-color: #f8f3eb; display: flex; align-items: center; }
main .text-box { margin: 0 auto; text-align: center; } main .text-box h2 { font-size: 1.7em; }
main .text-box a { text-decoration: none; color: #7d5462; }
main .text-box a:hover { transition: 300ms; }