@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap);body{margin:0;padding:0;box-sizing:border-box;background:linear-gradient(135deg,#a1c4fd 10%,#c2e9fb);min-height:100vh;display:flex;justify-content:center;align-items:flex-start}#app{font-family:Open Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;max-width:100%;margin:0;background:hsla(0,0%,100%,.3);border-radius:0;border:none;box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:center}#app,#nav{padding:10px}#nav{margin-bottom:15px;background:hsla(0,0%,100%,.4);border-radius:10px;border:1px solid hsla(0,0%,100%,.6);box-shadow:0 2px 6px 0 rgba(0,0,0,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:stretch;gap:10px}#nav a{font-weight:600;color:#555;text-decoration:none;transition:color .3s ease,transform .3s ease;padding:10px 0;border-radius:8px;position:relative;display:block}#nav a:after{content:"";position:absolute;width:0;height:2px;bottom:5px;left:50%;transform:translateX(-50%);background-color:#74a4bc;transition:width .3s ease}#nav a:hover{color:#333;transform:translateY(-2px)}#nav a:hover:after{width:80%}#nav a.router-link-exact-active{color:#3f68a8;background:hsla(0,0%,100%,.3);box-shadow:0 2px 8px 0 rgba(63,104,168,.2);transform:translateY(-2px)}#nav a.router-link-exact-active:after{width:80%;background-color:#3f68a8}@media (min-width:700px){#app{max-width:900px;margin:50px auto;padding:25px;border-radius:20px;border:1px solid hsla(0,0%,100%,.5);box-shadow:0 6px 20px 0 rgba(0,0,0,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#nav{flex-direction:row;justify-content:center;align-items:center;gap:25px;padding:15px;margin-bottom:25px;border-radius:15px;box-shadow:0 3px 10px 0 rgba(0,0,0,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#nav a{padding:10px 20px;border-radius:10px;display:inline-block}#nav a.router-link-exact-active:after,#nav a:hover:after{width:calc(100% - 20px)}}.topic-list{margin:0 auto;max-width:800px}.topic{font-size:24px;border-bottom:1px solid #f2f2f2;padding:10px 20px}.topic:last-child{border:0}table{text-align:left;width:800px;border-collapse:collapse}td{padding:4px}tbody tr:nth-child(2n){background-color:#f2f2f2}.topic-list a:link,.topic-list a:visited{color:#00f;text-decoration:none}.topic-list a:hover{text-decoration:underline}.topic-details{padding:20px 20px;margin:0 auto;max-width:600px}.topic-details .bubble{box-sizing:border-box;width:auto;position:relative;clear:both;background:#95c2fd;background-image:linear-gradient(0deg,#bee2ff 15%,#95c2fd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#95c2fd",endColorstr="#bee2ff");border:1px solid rgba(0,0,0,.5);border-radius:20px;box-shadow:inset 0 8px 5px hsla(0,0%,100%,.65),0 1px 2px rgba(0,0,0,.2);margin-bottom:20px;padding:6px 20px;color:#000;text-shadow:0 1px 1px hsla(0,0%,100%,.8);word-wrap:break-word}.addMessage{display:block;padding:0 0 10px 10px}a.addMessage:link,a.addMessage:visited{color:#00f;text-decoration:none}a.addMessage:hover{text-decoration:underline}form{font-size:16px}form *{box-sizing:border-box;line-height:1.5}.field{display:flex;flex-direction:column}.field label{margin:4px 0}.field input,.field textarea{padding:8px;font-size:18px}.field textarea{height:300px}.actions{padding:10px 0}.actions button[type=submit]{background-color:#28a745}.actions button[type=submit]:hover{background-color:#218838}.field input[type=text]{width:100%;padding:10px;border:1px solid rgba(0,0,0,.2);border-radius:5px;background:hsla(0,0%,100%,.8);box-sizing:border-box}.actions button[type=submit]{background-color:#4caf50}.actions button[type=submit]:hover{background-color:#45a049}.actions button[type=button]{background-color:#f44336}.actions button[type=button]:hover{background-color:#da190b}form{margin-top:20px;padding:20px;background:hsla(0,0%,100%,.2);border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.field{margin-bottom:15px}.field label{display:block;margin-bottom:5px;font-weight:700;color:#333}.field input[type=text],.field textarea{width:100%;padding:10px;border:1px solid rgba(0,0,0,.2);border-radius:5px;background:hsla(0,0%,100%,.8);box-sizing:border-box}.field textarea{min-height:100px;resize:vertical}.actions{text-align:right;margin-top:20px}.actions button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;margin-left:10px}.actions button[type=submit]{background-color:#007bff;color:#fff}.actions button[type=submit]:hover{background-color:#0056b3}.actions button[type=button]{background-color:#6c757d;color:#fff}.actions button[type=button]:hover{background-color:#5a6268}