@font-face{font-family:Anton;font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/anton-vietnamese-400-normal-BRPVXRTF.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/anton-vietnamese-400-normal-C0K6nn5y.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Anton;font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/anton-latin-ext-400-normal-COC3X5J9.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/anton-latin-ext-400-normal-C-IPPeEh.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Anton;font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/anton-latin-400-normal-o-fJkNZY.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/anton-latin-400-normal-DdE6rvvq.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-ext-400-normal-BwJdxs7r.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-ext-400-normal-Cd63HKDh.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-400-normal-DjhbW-4D.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-400-normal-7kQcAFpS.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-greek-ext-400-normal-CpIwTHMM.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-greek-ext-400-normal-BI1kUwmR.woff) format("woff");unicode-range:U+1F00-1FFF}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-greek-400-normal-DZReXJla.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-greek-400-normal-DJm9Ud5h.woff) format("woff");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-vietnamese-400-normal-CwtaIDr2.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-vietnamese-400-normal-dYp9C364.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-latin-ext-400-normal-UNsKFIBq.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-latin-ext-400-normal-BGPHfnm_.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-sans-3-latin-400-normal-DQi5PRDE.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-latin-400-normal-AFMiCETP.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-ext-700-normal-BhUSqjb8.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-ext-700-normal-B6RPsSdD.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-700-normal-CIuudVLB.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-cyrillic-700-normal-DYE6gq6k.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-greek-ext-700-normal-Dd6uIcuy.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-greek-ext-700-normal-C6ITAlBU.woff) format("woff");unicode-range:U+1F00-1FFF}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-greek-700-normal-C8Tp2qRF.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-greek-700-normal-BWdBblwd.woff) format("woff");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-vietnamese-700-normal-Bgamivog.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-vietnamese-700-normal-BHxM10oo.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-latin-ext-700-normal-6Xi0A2be.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-latin-ext-700-normal-ChH_v7nA.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:700;src:url(/fullstackopen-phonebook/assets/source-sans-3-latin-700-normal-CkzU-mV9.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-sans-3-latin-700-normal-BBbVrHF_.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-serif-4-cyrillic-ext-400-italic-zoDFlEzN.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-serif-4-cyrillic-ext-400-italic-Dx4A8QUO.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-serif-4-cyrillic-400-italic-BLN19cOa.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-serif-4-cyrillic-400-italic-Dx8qIUN3.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-serif-4-greek-400-italic-C7D4Dq0H.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-serif-4-greek-400-italic-DcuniPAV.woff) format("woff");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-serif-4-vietnamese-400-italic-CjUPRDIa.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-serif-4-vietnamese-400-italic-DyjhI2GX.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-serif-4-latin-ext-400-italic-JynPwBMj.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-serif-4-latin-ext-400-italic-G7LDTi7t.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/fullstackopen-phonebook/assets/source-serif-4-latin-400-italic-0j97Jm6B.woff2) format("woff2"),url(/fullstackopen-phonebook/assets/source-serif-4-latin-400-italic-Dv9jnFA_.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{margin:0;padding:0;box-sizing:border-box}:root{--golden-ratio: 1.618;--left-ratio: calc(var(--golden-ratio) - 1);--right-ratio: calc(1 - var(--left-ratio));--min-touch-size: 46px;--safe-rem: clamp(14px, 1rem, 22px);--safe-inset-top: max(env(safe-area-inset-top, 0), 30px);--safe-inset-x: max(env(safe-area-inset-right, 0), 12px);--h1-font-size: min(14svw, calc(var(--safe-rem) * 8));--h2-font-size: calc(var(--h1-font-size) * var(--left-ratio));--header-height: calc(var(--h1-font-size) * 1.4);--gap: max(var(--safe-rem), 3svmin);--mini-gap: calc(var(--gap) * var(--left-ratio));--grid-space: calc(100% - 2 * var(--safe-inset-x) - 2 * var(--gap));--central-width: clamp(70px, calc(100svw * var(--right-ratio)), 400px);--empty-space: calc(var(--grid-space) - var(--central-width));--left-width: calc(var(--empty-space) * var(--left-ratio));--right-width: calc(var(--empty-space) * var(--right-ratio));--row-height: min(14svmin, calc(var(--safe-rem) * 2.7));--o-button-width: auto;--background-color: rgb(32, 38, 50);--basic-title-color: rgb(49, 66, 101);--soft-title-color: rgba(49, 66, 101, .373);--basic-input-color: rgb(94, 111, 144);--soft-input-color: rgba(94, 111, 144, .711);--basic-text-color: rgb(200, 212, 237);--soft-text-color: rgba(200, 212, 237, .545);--trans-text-color: rgba(200, 212, 237, .232)}@media only screen and (max-width: 540px){:root{--o-button-width: var(--row-height)}}html,body{text-align:right;font-size:1.2rem;font-family:source-sans-3,system-ui,sans-serif;color:var(--basic-text-color);background-color:var(--background-color);scroll-behavior:smooth}a,button,[role=button]{min-width:var(--min-touch-size)!important;min-height:var(--min-touch-size)!important;cursor:pointer}input[type=text]{-moz-appearance:none;appearance:none;-webkit-appearance:none}.app{width:100%;min-height:calc(100lvh + var(--row-height));padding:0 var(--safe-inset-x);padding-top:var(--safe-inset-top);display:grid;gap:var(--gap);grid-template-columns:var(--left-width) var(--central-width) var(--right-width);grid-template-rows:var(--header-height) auto var(--h1-font-size) auto 1fr auto;grid-template-areas:"title title title" "form-kvo form-kvo form-kvo" "subtitle subtitle ." "filter-kv filter-kv ." "table-kvo table-kvo table-kvo" ". totop-v ."}.app h2{font-size:var(--h2-font-size)}.popover-container{width:100svw;height:100svh;position:fixed;top:0;left:0;z-index:99;display:flex;justify-content:center;align-items:center}.popover{width:60svmin;min-height:12svmin;padding:var(--safe-rem);padding-top:calc(var(--safe-rem) * 1.5);border-radius:4px;color:var(--basic-text-color);background-color:var(--background-color)}.popover-positive{border:2px solid rgba(0,128,51,.396);box-shadow:0 0 10px -5px #00803365}.popover-neutral{border:2px solid var(--trans-text-color);box-shadow:0 0 10px -5px var(--trans-text-color)}.popover-negative{border:2px solid rgba(255,0,106,.39);box-shadow:0 0 10px -5px #ff006a63}.popover>p{text-align:center;font-family:"Source Serif 4",serif}.popover>button{margin:var(--safe-rem);padding:calc(var(--safe-rem) / 4) var(--safe-rem);text-align:center;font-size:1.2rem;font-family:Anton,system-ui,sans-serif;border-radius:4px;border:none;color:var(--background-color);background-color:var(--basic-text-color)}.popover>button:hover{background-color:var(--soft-text-color)}.popover>button:active{background-color:var(--trans-text-color)}.popover>input{text-align:left;font-family:"Source Serif 4",serif}.app-header{grid-area:title;align-self:flex-end;padding-right:calc(var(--right-width) + var(--gap));position:sticky;top:0;z-index:6;background-color:var(--background-color)}.app-header h1{font-size:var(--h1-font-size)}.generic-title{font-family:Anton,system-ui,sans-serif;color:transparent;background:linear-gradient(to bottom,var(--soft-text-color) 0%,var(--basic-title-color) 60%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.contact-form{grid-area:form-kvo;display:grid;grid-template-columns:subgrid;grid-template-rows:var(--row-height) var(--row-height) calc((var(--golden-ratio)) * var(--row-height));row-gap:var(--mini-gap)}.contact-form>label{grid-column:1}.contact-form>input{grid-column:2}.contact-form>button{grid-column:2;margin:4px 0 0 1px;display:flex;justify-content:center;align-items:center;text-align:center;font-size:min(5svw,calc(var(--safe-rem) * 1.4));font-family:Anton,system-ui,sans-serif;color:var(--background-color);background-color:var(--basic-input-color);border:none;border-radius:4px;box-shadow:inset -2px -4px 8px -2px var(--background-color)}.contact-form button:hover{background-color:var(--soft-input-color);box-shadow:inset -1px -4px 9px -6px var(--basic-text-color);text-shadow:0 0 6px var(--soft-text-color)}.contact-form button:active{color:var(--basic-text-color);box-shadow:inset -1px -2px 14px -1px var(--basic-text-color);text-shadow:0 0 12px var(--basic-text-color)}.field-k{font-style:italic;font-family:"Source Serif 4",serif;font-size:1.2rem;text-shadow:0 0 6px var(--soft-text-color)}.field-o{display:inline-flex;justify-content:left}.generic-input{padding:4px 10px 1px;font-size:1rem;font-weight:700;color:var(--background-color);background-color:var(--basic-input-color);box-shadow:inset 1px 1px 2px var(--background-color),inset 0 -1px 2px 2px var(--soft-text-color)}.generic-input:focus{box-shadow:inset 0 -1px 5px var(--soft-text-color)}.generic-input::placeholder{color:var(--soft-text-color)}.contacts-filter{grid-area:filter-kv;display:grid;grid-template-columns:subgrid;grid-template-rows:var(--row-height)}.contacts-filter>label{grid-column:1}.contacts-filter>input{grid-column:2}.contacts-table{grid-area:table-kvo;display:grid;grid-template-columns:subgrid;grid-auto-rows:var(--row-height);row-gap:var(--mini-gap)}.contacts-table .contacts-thead{align-self:center;position:sticky;top:calc(var(--header-height) * .94);z-index:6;background-color:var(--background-color);font-weight:700;text-shadow:0 0 4px var(--soft-text-color)}.contacts-table>:nth-child(2){text-align:center}.contacts-table .field-k{grid-column:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.contacts-table .field-v{grid-column:2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:1.3rem;border-radius:4px;color:var(--soft-text-color);border-top:2px solid var(--soft-title-color);box-shadow:inset 0 20px 12px -14px var(--soft-title-color);text-shadow:0 1px 10px var(--trans-text-color)}.contacts-table .field-v:hover{font-size:1.4rem;color:var(--basic-text-color);text-shadow:0 1px 10px var(--soft-text-color);cursor:pointer}.contacts-table .field-o{grid-column:3}.contacts-table .field-o button{width:var(--o-button-width);padding:0 calc(var(--safe-rem) * .5);overflow:hidden;text-overflow:ellipsis;font-size:.8rem;border:none;border-radius:.6rem;border-top:2px solid var(--soft-text-color);color:var(--soft-text-color);background-color:transparent;box-shadow:none;box-shadow:inset 0 -10px 10px -12px var(--trans-text-color)}.contacts-table .field-o button:hover{border-top:2px solid var(--basic-text-color);box-shadow:inset 0 -10px 10px -4px var(--soft-text-color);color:var(--background-color);background-color:var(--trans-text-color)}.contacts-table .field-o button:active{background-color:var(--soft-text-color)}.back-to-top{grid-area:totop-v;grid-column:2;height:calc((var(--golden-ratio)) * var(--row-height));margin:4px 0 0 1px;position:relative;top:var(--safe-rem);display:flex;justify-content:center;align-items:center;text-align:center;text-decoration:none;font-size:min(5svw,calc(var(--safe-rem) * 1.4));font-family:Anton,system-ui,sans-serif;color:var(--background-color);background-color:var(--soft-input-color);border:none;border-radius:4px;box-shadow:inset -2px -4px 8px -2px var(--background-color)}.back-to-top:hover{background-color:var(--basic-input-color);box-shadow:inset -1px -4px 9px -6px var(--basic-text-color);text-shadow:0 0 6px var(--soft-text-color)}.back-to-top:active{color:var(--basic-text-color);box-shadow:inset -1px -2px 14px -1px var(--basic-text-color);text-shadow:0 0 12px var(--basic-text-color)}.footer{--f-size: min(2.7svw, calc(var(--safe-rem) * 1.4));--height: calc(var(--f-size) * 5);width:100%;height:var(--height);padding:0 var(--safe-inset-x);display:grid;gap:var(--gap);align-items:flex-end;grid-template-columns:var(--left-width) var(--central-width) var(--right-width);background-color:var(--background-color);box-shadow:inset 0 calc(var(--height) * -.8) calc(var(--height) * .2) calc(var(--height) * -.5) var(--soft-input-color)}.footer *{text-decoration:none;font-size:var(--f-size);font-style:normal;font-family:Anton,system-ui,sans-serif;color:var(--background-color)}.footer>div{grid-column:1}.footer>address{grid-column:2;text-align:center}.footer>svg{grid-column:3;text-align:left;position:relative;bottom:calc(var(--f-size) * .23);height:var(--f-size)}.footer>svg>circle{fill:var(--background-color)}