a { text-decoration: none; } /** NAVBAR */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif; font-family: 'Oswald', sans-serif; } .wrapper{ position: fixed; top: 0; right: -100%; height: 100%; width: 100%; background: rgb(36, 36, 36); /*background: linear-gradient(90deg, #f92c78, #4114a1);*/ /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */ /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/ transition: all 0.6s ease-in-out; z-index: 19; } #active:checked ~ .wrapper{ /*left: 0;*/ right:0; } .menu-btn{ position: absolute; z-index: 20; right: 20px; /*left: 20px; */ top: 20px; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; font-size: 20px; cursor: pointer; /*color: #fff;*/ /*background: linear-gradient(90deg, #f92c78, #4114a1);*/ /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */ /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */ transition: all 0.3s ease-in-out; } .menu-btn span, .menu-btn:before, .menu-btn:after{ content: ""; position: absolute; top: calc(50% - 1px); left: 30%; width: 40%; border-bottom: 2px solid #000; transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu-btn:before{ transform: translateY(-8px); } .menu-btn:after{ transform: translateY(8px); } .close { z-index: 20; width: 100%; height: 100%; pointer-events: none; transition: background .6s; } /* closing animation */ #active:checked + .menu-btn span { transform: scaleX(0); } #active:checked + .menu-btn:before { transform: rotate(45deg); border-color: #fff; } #active:checked + .menu-btn:after { transform: rotate(-45deg); border-color: #fff; } .wrapper ul{ position: absolute; top: 60%; left: 50%; height: 90%; transform: translate(-50%, -50%); list-style: none; text-align: center; } .wrapper ul li{ height: 10%; margin: 15px 0; } .wrapper ul li a { text-decoration: none; font-size: 30px; font-weight: 500; padding: 5px 30px; color: #fff; border-radius: 50px; position: absolute; line-height: 50px; margin: 5px 30px; opacity: 0; transition: all 0.3s ease; transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); } .wrapper ul li a:after{ position: absolute; content: ""; background: #fff; /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/ /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/ width: 100%; height: 100%; left: 0; top: 0; border-radius: 50px; transform: scaleY(0); z-index: -1; transition: transform 0.3s ease; } .wrapper ul li a:hover:after{ transform: scaleY(1); } .wrapper ul li a:hover{ color: rgb(7, 142, 181) } input[type="checkbox"]{ display: none; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; text-align: center; width: 100%; color: #202020; } .content .title{ font-size: 40px; font-weight: 700; } .content p{ font-size: 35px; font-weight: 600; } #active:checked ~ .wrapper ul li a{ opacity: 1; } .wrapper ul li a{ transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateX(100px); } #active:checked ~ .wrapper ul li a{ transform: none; transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); transition-delay: .6s; transform: translateX(-20vh); } /** endNavbar */ #main { max-width:1280px; min-height:100%; margin:0 auto; position:relative; } footer{ position:absolute; bottom:0; width:100%; font-size: 14px; font-family: Roboto,sans-serif; font-weight: 300; color: rgb(74, 74, 74); line-height: 18px; } #logo img { margin: 1rem 1rem; } @media screen and (min-width: 769px) { aside { left: 0; position: absolute; } } aside { margin-left: 1rem; } .side-menu { display: block; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; list-style-position: outside; list-style-type: none; margin: 0; padding: 0.77778rem 0; } .side-menu li { margin-top: 0.8rem; padding: 0; } .side-menu li a{ color: #008CBA; display: block; margin: 0; } footer a { color: #008CBA; } footer a:hover { color: #035d7a; } /* footer a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } footer a:hover:after { width: 100%; left: 0; } */ /* footer a { color: #008CBA; text-decoration: underline 0.15em rgba(255, 255, 255, 0); transition: text-decoration-color 300ms; } footer a:hover { text-decoration-color:#035d7a; } */ body a, footer a { box-shadow: inset 0 0 0 0 #54b3d6; color: #54b3d6; margin: 0 -.25rem; padding: 0 .25rem; transition: color .3s ease-in-out, text-decoration .3s ease-in-out; } body a:hover { /* box-shadow: inset 100% 0 0 0 #54b3d6; */ text-decoration: underline 0.15em rgba(255, 255, 255, 0); color: #54b3d6; background-color: rgba(0, 0, 0, 0.11); } /* .flashlight { color: hsla(0,0%,0%,0); perspective: 80px; outline: none; } #flash { display: inline-block; text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px; transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1); } .light { display: inline-block; text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px; } li:hover .light { text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px; transform: rotateY(-60deg); transition: transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out; } */