2 lines
2.7 KiB
CSS
2 lines
2.7 KiB
CSS
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Oswald:wght@600&display=swap";#header{background:#fdffff;padding:0 150px;position:sticky;display:flex;flex-direction:row;justify-content:space-between;align-items:center}@media screen and (max-width: 850px){#header{padding:0 50px}}@media screen and (max-width: 360px){#header{padding:0 25px}}#header #logo{display:flex;align-items:center;height:56px}@media screen and (max-width: 850px){#header #logo{height:36px}}#header .bounce-animation span{font:600 56px "Oswald",sans-serif;display:inline-block;color:#1d60b5;animation:bounce 2500ms infinite;animation-delay:calc(.1s*var(--i))}@media screen and (max-width: 850px){#header .bounce-animation span{font-size:36px}}@keyframes bounce{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(-5px)}}#header .navbar{display:flex}#header .navbar .nav-item{margin-right:1vw;font:18px "Montserrat",sans-serif;font-weight:600;color:#706fff;text-decoration:none}#header .navbar .nav-item:hover{color:#01003b}#header .navbar .nav-item:last-of-type{margin-right:0}@media screen and (max-width: 1200px){#header .navbar .nav-item{display:none}}#header #toggle{display:none}#header #toggle-label{margin:0;width:36px;height:36px;position:relative;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#header #toggle-label .bar{padding:0;width:36px;height:4px;background-color:#1d60b5;display:block;border-radius:4px;transition:all .4s ease-in-out;position:absolute}#header #toggle-label .bar1{transform-origin:5%}#header #toggle-label .bar4{transform-origin:5%}@media screen and (max-width: 850px){#header #toggle-label{width:28px;height:28px}#header #toggle-label .bar{width:28px}}#header .bar1{top:0}#header .bar2,#header .bar3{top:16px}@media screen and (max-width: 850px){#header .bar2,#header .bar3{top:12px}}#header .bar3{right:0}#header .bar4{bottom:0}#header #toggle:checked+#toggle-label>.bar1{transform:rotate(45deg);height:3px;width:50px}@media screen and (max-width: 850px){#header #toggle:checked+#toggle-label>.bar1{width:39px}}#header #toggle:checked+#toggle-label>.bar3{transform:rotate(45deg);height:3px;background-color:rgba(0,0,0,0)}#header #toggle:checked+#toggle-label>.bar2{transform:rotate(-45deg);height:3px;background-color:rgba(0,0,0,0)}#header #toggle:checked+#toggle-label>.bar4{transform:rotate(-45deg);height:3px;width:50px}@media screen and (max-width: 850px){#header #toggle:checked+#toggle-label>.bar4{width:39px}}#header #toggle-label{display:none}@media screen and (max-width: 1200px){#header #toggle-label{display:block}}
|