@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");*,body,html{font-family:Poppins,sans-serif;text-transform:capitalize;margin:0;padding:0}section{background:linear-gradient(45deg,crimson,#3636ed)}section .logo{margin:50px 50px 5px}section .logo img{width:8%;transition:all .3s linear;border-radius:50%;cursor:pointer}section .logo img:hover{border-radius:15px;transform:scale(1.1) rotate(15deg)}section .name h1{font-size:34px}.main ul li a{text-decoration:none;border-radius:40px}.main ul .satu{color:#242424}.main ul .dua{color:#c13584}.main ul .tiga{color:#242424}.main ul .empat{color:#0077b5}.main ul .lima{color:#1da1f2}.main ul .enam{color:#010101}.main a,.main a:focus{color:crimson;background-color:#fff;transition:all .3s ease-in-out}.main a:focus:hover,.main a:hover{color:#fff;background-color:crimson}section .footer span{transition:all .3s}section .footer span:hover{color:#00b7ff}section .footer i{transition:all .3s}section .footer i:hover{color:#00b7ff}@media (max-width:992px){section .logo img{width:15%}section{height:100%}section .main{width:55%}}@media (max-width:768px){section .logo img{width:20%}section .name h1{font-size:36px}section .main{width:60%}.main ul li a{margin:30px auto;padding:5px 50px;max-width:100%;font-size:24px;font-weight:600}section .footer h1{font-size:16px;color:#fff}}@media (max-width:576px){section .main{width:80%;padding:0;display:flex;flex-direction:column;align-items:center}.main ul{width:100%;padding:30px 0 80px;margin:0;list-style:none;text-align:center}section .name h1{text-transform:capitalize;color:#fff;font-size:30px;padding-top:12px}section .name h1 span{color:red}.main ul li a{margin:20px 0;padding:8px 5px;font-size:22px;font-weight:600;text-align:center;display:flex;align-items:center;position:relative}.main ul li a i{font-size:28px}}