html{height:100%}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;padding-top:60px;display:flex;flex-direction:column;height:100%;box-sizing:border-box}header{display:flex;align-items:center;justify-content:center}header h1{margin:1rem;transition:transform .2s ease-in-out}header h1:hover{transform:scale(1.06)}header:before,header:after{content:"";background-color:#2c3e50;height:.1rem;width:20vw}.theme-switch-container{margin:1rem;position:absolute;top:0;right:0;background-color:#2c3e50;border-radius:8px;transition:transform .2s ease-in-out}.theme-switch-container:hover{transform:scale(1.06)}.theme-switch-container .theme-switch{left:2px;top:-2px;position:relative}.theme-switch-container .theme-switch button{padding:.2em;height:auto;width:40px;height:40px;margin:0 auto;z-index:1;position:relative;border-radius:8px;border:2px solid #2c3e50;font-size:14px;cursor:pointer;background-color:#f5f5f5;color:#2c3e50}.theme-switch-container .theme-switch button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.theme-switch-container .theme-switch button:last-child{border-bottom-left-radius:0;border-top-left-radius:0}.theme-switch-container .theme-switch button:hover{background:#2c3e50;color:#fff}.active{background:#2c3e50!important;color:#f5f5f5!important}main{display:flex;flex-direction:column;align-items:center;flex-grow:1}main .link-switch{display:flex;align-items:center}main .link-switch div.link-switch-container{margin:0rem;width:8rem;display:flex}main .link-switch div.link-switch-container h3.link-type{display:inline-block;position:relative;-webkit-user-select:none;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}main .link-switch div.link-switch-container h3.link-type:after{content:"";position:absolute;background-color:#2c3e50;height:.1rem;left:0;bottom:0;width:100%;transform:scaleX(0);transition:transform .1s linear;transform-origin:bottom center}main .link-switch div.link-switch-container h3.link-type:hover:after{transform:scaleX(1);transform-origin:bottom center}main .links{display:flex;flex-direction:column}@media screen and (max-width: 414px){main .links div{display:flex;flex-direction:column}}main .links label{position:relative;top:.25rem;font-size:2rem}main .links input{max-width:15rem;font-size:2rem;border:2px solid #eeeeee;margin-left:4px}main .text{max-width:80vw;margin:1rem 0}main .text>*{margin:0}.switch{--line: #505162;--dot: #747474;--circle: #9ea0be;--duration: .3s;--text: #9ea0be;cursor:pointer;transition:transform .2s ease-in-out}.switch:hover{transform:scale(1.1)}.switch input{display:none}.switch input+div{position:relative}.switch input+div:before,.switch input+div:after{--s: 1;content:"";position:absolute;height:4px;top:10px;width:24px;background:var(--line);transform:scaleX(var(--s));transition:transform var(--duration) ease}.switch input+div:before{--s: 0;left:0;transform-origin:0 50%;border-radius:2px 0 0 2px}.switch input+div:after{left:28px;transform-origin:100% 50%;border-radius:0 2px 2px 0}.switch input+div span{padding-left:56px;line-height:24px;color:var(--text)}.switch input+div span:before{--x: 0;--b: var(--circle);--s: 4px;content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 var(--s) var(--b);transform:translate(var(--x));transition:box-shadow var(--duration) ease,transform var(--duration) ease}.switch input+div span:not(:empty){padding-left:64px}.switch input:checked+div:before{--s: 1}.switch input:checked+div:after{--s: 0}.switch input:checked+div span:before{--x: 28px;--s: 12px;--b: var(--dot)}.list{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;max-width:80vw}.list-item-box{--show-btn-box: 0;background:#2c3e50;border-radius:10px;transition:transform .2s ease-in-out}.list-item-box:hover{transform:scale(1.06);--show-btn-box: 1}.list-item-box>.list-item{display:flex;flex-direction:column;left:4px;top:-4px;position:relative;background-color:#f5f5f5;border:2px solid #2c3e50;border-radius:10px;box-sizing:border-box;min-width:8rem;height:8rem}.list-item-box>.list-item a{flex:1;font-size:2rem;padding:1rem;display:flex;align-items:center;justify-content:center;color:#000}.list-item-box>.list-item .btn-box{transition:all .2s ease-in-out;opacity:var(--show-btn-box);position:relative;display:flex;justify-content:space-between;box-sizing:border-box;height:32%}.list-item-box>.list-item .btn-box>button{font-size:2rem;width:100%;border:none;background:transparent;cursor:pointer;padding:0;margin:0;color:#2c3e50}.list-item-box>.list-item .btn-box .savePort{border-bottom-left-radius:8px}.list-item-box>.list-item .btn-box .savePort:hover{color:#fff;background-color:#daa520}.list-item-box>.list-item .btn-box .deletePort{border-bottom-right-radius:8px}.list-item-box>.list-item .btn-box .deletePort:hover{color:#fff;background-color:red}.list-item-box>.list-item .btn-box .deletePortFromSaved{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.list-item-box>.list-item .btn-box .deletePortFromSaved:hover{color:#fff;background-color:red}footer{padding-top:60px}main.no-hover .list-item-box{transform:scale(1);--show-btn-box: 1}main.no-hover .list-item-box:hover{transform:scale(1);--show-btn-box: 1}body{height:100%;margin:0;background:white;color:#2c3e50}@media (prefers-color-scheme: dark){body{background:black;color:#f5f5f5}body header:before,body header:after{background-color:#f5f5f5}body a{color:#f5f5f5}body input{background-color:#2c3e50;border:1px solid #2c3e50;color:#f5f5f5}body h3.link-type:after{background-color:#f5f5f5!important}}@media (prefers-color-scheme: light){body{background:white;color:#2c3e50}body header:before,body header:after{background-color:#2c3e50}body a{color:#2c3e50}body input{background-color:#f5f5f5;border:1px solid whitesmoke;color:#2c3e50}body h3.link-type:after{background-color:#2c3e50!important}}body.dark{background:black;color:#f5f5f5}body.dark header:before,body.dark header:after{background-color:#f5f5f5}body.dark a{color:#f5f5f5}body.dark input{background-color:#2c3e50;border:1px solid #2c3e50;color:#f5f5f5}body.dark h3.link-type:after{background-color:#f5f5f5!important}