body,html{margin:0;scroll-behavior:smooth;width:100%}main{margin:0 auto;width:70%}@media (max-width:900px){main{width:90%}}.box-layout:hover p{background:#0062ff}.tag{margin-top:160px}.tag ul{display:flex;flex-wrap:wrap;gap:20px}.tag a,.tag ul{color:#b1b1b1;list-style:none}.tag a{text-decoration:none}.box-layout{margin-top:100px}.box-layout p{background:#cfcfcf;color:#fff;font-size:14px;font-weight:700;margin:0;padding:12px;transition:background .3s ease;width:-moz-fit-content;width:fit-content}.box-layout ul{border:1px solid #cfcfcf;color:#b1b1b1;display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin:0;padding:30px;transition:border-color .3s ease}.box-layout ul:hover{border-color:#0062ff}.box-layout ul a{align-items:center;border:1px solid hsla(0,0%,60%,.32);color:#9a9a9a;display:flex;gap:9px;padding:5px;text-decoration:none;transition:color .3s ease,border-color .3s ease}.box-layout ul a:hover{border-color:#0062ff;color:#0062ff}.box-layout ul a img{width:24px}.home{margin-top:100px}.home p{color:#000;font-size:20px}.home p span{color:#b1b1b1;font-size:14px}.nav{display:flex;font-size:14px;gap:20px;justify-content:flex-end;margin-top:10px}.nav a,.nav div{color:#959595;text-decoration:none}.hover-box{background:#fff;border:1px solid #ccc;border-left:4px solid #0062ff;box-shadow:0 2px 8px #00000026;font-size:14px;max-width:200px;padding:6px 10px;pointer-events:none;position:absolute;white-space:normal;z-index:999}.bottom{color:#cfcfcf;font-size:14px;margin-bottom:100px;margin-top:80px}.bottom p{margin:0}