+ body {
+ padding-bottom: 50px;
+ }
+ /* de aca para abajo es para el hamburguer*/
+ a {
+ text-decoration: none;
+ color: #232323;
+
+ transition: color 0.3s ease;
+ }
+
+ a:hover {
+ color: tomato;
+ }
+
+ #menuToggle {
+ display: block;
+ position: relative;
+ top: 5px;
+ left: 15px;
+
+ z-index: 1;
+
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ #menuToggle input {
+ display: block;
+ width: 40px;
+ height: 32px;
+ position: absolute;
+ top: -7px;
+ left: -5px;
+
+ cursor: pointer;
+
+ opacity: 0;
+ /* hide this */
+ z-index: 2;
+ /* and place it over the hamburger */
+
+ -webkit-touch-callout: none;
+ }
+
+ /*
+ * Just a quick hamburger
+ */
+ #menuToggle span {
+ display: block;
+ width: 33px;
+ height: 4px;
+ margin-bottom: 5px;
+ position: relative;
+
+ background: #cdcdcd;
+ border-radius: 3px;
+
+ z-index: 1;
+
+ transform-origin: 4px 0px;
+
+ transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+ background 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+ opacity 0.55s ease;
+ }
+
+ #menuToggle span:first-child {
+ transform-origin: 0% 0%;
+ }
+
+ #menuToggle span:nth-last-child(2) {
+ transform-origin: 0% 100%;
+ }
+
+ /*
+ * Transform all the slices of hamburger
+ * into a crossmark.
+ */
+ #menuToggle input:checked~span:nth-last-child(4) {
+ transform: translate(-6px, 8px) rotate(-45deg) scale(0.4, 0.8);
+ background: #ffcdcd;
+ }
+
+ /*
+ * But let's hide the middle one.
+ */
+ #menuToggle input:checked~span:nth-last-child(3) {
+ transform: translate(-5px, 0px) rotate(0deg) scale(0.7, 0.7);
+ background: #ffcdcd;
+ }
+
+ /*
+ * Ohyeah and the last one should go the other direction
+ */
+ #menuToggle input:checked~span:nth-last-child(2) {
+ transform: translate(-4px, -11px) rotate(45deg) scale(0.4, 0.8);
+ background: #ffcdcd;
+ }
+
+ /*
+ * Make this absolute positioned
+ * at the top left of the screen
+ */
+ #menu {
+ position: absolute;
+ width: 300px;
+ margin: -100px 0 0 -50px;
+ padding: 50px;
+ padding-top: 125px;
+ height:120vh;
+ background: #343a40;
+ list-style-type: none;
+ -webkit-font-smoothing: antialiased;
+ /* to stop flickering of text in safari */
+
+ transform-origin: 0% 0%;
+ transform: translate(-100%, 0);
+
+ transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+ }
+
+ #menu li {
+ padding: 0.5rem 0;
+ font-size: 1.5rem;
+ color: white;
+ }
+
+ /*
+ * And let's slide it in from the left
+ */
+ #menuToggle input:checked~ul {
+ transform: none;
+ }