.container details{padding:.75em;margin-bottom:1em;border:1px solid var(--text);border-radius:8px;margin-inline:.5em;background-color:#fff;interpolate-size:allow-keywords;min-width:300px}.container details::details-content{transition:block-size .3s,content-visibility .3s allow-discrete;overflow:hidden;block-size:0}.container details[open]::details-content{block-size:auto}.container details summary{cursor:pointer}.container details[open] summary{padding-bottom:.75em;margin-bottom:1em;border-bottom:1px solid var(--text)}.container details form{display:grid;gap:.75em}.container details form button{border:1px solid transparent;padding:.5em 1em .25em;max-width:fit-content;border-radius:6px;font-size:.9em;transition:border-color .25s ease-in-out;text-transform:capitalize;--form-btn-color: hsl(from var(--text) h s 35%)}.container details form button:active,.container details form button:focus-visible{border-color:var(--form-btn-color);filter:drop-shadow(0 0 .25em var(--form-btn-color))}.personal-form button{margin-left:auto}.year-inputs{display:flex;gap:1em;justify-content:space-between;max-width:200px}.form-field{display:grid;max-width:275px}.form-field span{font-size:.9em}.form-field input,.form-field textarea{padding-inline:.5em;padding-block:.5em .25em;border-color:hsla(from var(--text) h s l / .75);border-radius:4px}.form-field:has(textarea){max-width:400px}.form-field textarea{resize:none}.form-buttons{display:flex;gap:1em;margin-left:auto}.submit-btn.submit-btn{background-color:var(--accent);--form-btn-color: var(--primary)}.list{display:grid;gap:1em}.data-item{display:flex;justify-content:flex-end;align-items:center;gap:.5em}.data-item p{margin-right:auto}.data-item button{max-height:28px;border-radius:50%;background-color:transparent;border-color:transparent;text-transform:capitalize}.data-item button svg{transition:fill .2s ease-in-out}.edit-btn{--active-color: hsl(197, 84%, 36%)}.edit-btn:focus-visible svg,.edit-btn:active svg{fill:var(--active-color)}.delete-btn{--active-color: hsl(0, 72%, 55%)}.delete-btn:focus-visible svg,.delete-btn:active svg{fill:var(--active-color)}.add-item{display:flex;justify-content:center}.add-item button{background-color:var(--accent);padding:.5em 1em .25em;border:1.5px solid transparent;border-radius:6px;font-size:.9em;transition:border-color .25s ease-in-out}.add-item button:active,.add-item button:focus-visible{border-color:var(--primary);filter:drop-shadow(0 0 .25em var(--primary))}@media (hover: hover) and (pointer: fine){.delete-btn:hover,.edit-btn:hover{fill:var(--active-color)}.container form button:hover{border-color:var(--form-btn-color);filter:drop-shadow(0 0 .25em var(--form-btn-color))}.add-item button:hover{border-color:var(--primary);filter:drop-shadow(0 0 .25em var(--primary))}}.preview{display:flex;flex-direction:column;align-items:center;background-color:#fff;padding-bottom:2em;--shadow: hsla(from var(--text) h s l / .1);box-shadow:4px 4px 5px var(--shadow),-2px 0 3px var(--shadow)}.preview header{display:flex;flex-direction:column;text-align:center;padding-block:1.8em 1.4em;padding-inline:.5em;background-color:var(--primary);min-width:100%;margin-bottom:1em;gap:1em}.preview header address{display:flex;justify-content:space-evenly;align-items:center;gap:1em}.preview section{min-width:100%;padding-inline:.5em}.preview section ul{padding-block:1em}.info{display:inline-flex;align-items:center;gap:.25em}.section-header{text-align:center;max-width:calc(100% - 2em);margin-inline:auto;background-color:hsla(from var(--secondary) h s l / .75);padding-block:.6em .3em}.list-item{display:flex;gap:1em;padding:1em}.list-item article>p:first-of-type{font-weight:500}.list-item article>p:last-of-type{color:hsl(from var(--text) h s 25%)}.year-duration{min-width:14ch;text-align:center}*{padding:0;margin:0;box-sizing:border-box}:root{--ff-sans-serif: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--text: hsl(120, 4%, 5%);--background: hsl(135, 29%, 97%);--primary: hsl(143, 51%, 54%);--secondary: hsl(143, 75%, 71%);--accent: hsl(143, 99%, 61%)}body{min-height:100vh;font-family:var(--ff-sans-serif);line-height:1.5;background-color:var(--background);color:var(--text)}svg{height:24px;width:24px}button,input,textarea{font-family:inherit;font-size:inherit}li{list-style:none}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.9}.toggle-buttons{margin:1em auto;max-width:320px;display:flex;justify-content:center;gap:1em}.toggle-buttons button{padding:.5em .9em .4em;border:1px solid transparent;background-color:hsl(from var(--primary) h s 55%);border-radius:6px;transition-property:opacity,border-color;transition-duration:.25s;transition-timing-function:ease-in-out}.toggle-buttons button:not(:disabled):focus-visible,.toggle-buttons button:not(:disabled):active{border-color:var(--accent);filter:drop-shadow(0 0 .25em var(--accent))}main{max-width:720px;margin-inline:auto}@media (hover: hover) and (pointer: fine){.toggle-buttons button:not(:disabled):hover{border-color:var(--accent);filter:drop-shadow(0 0 .5em var(--accent))}}