Perché e come abbandonare i Social Media, più soluzioni etiche. https://quitsocialmedia.club
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

964 lines
16 KiB

  1. ---
  2. ---
  3. /*@import "../_sass/search";*/
  4. @import "../_sass/highlight";
  5. @import "../_sass/nav";
  6. @import "../_sass/inter";
  7. @import "../_sass/ubuntu-mono";
  8. :root {
  9. --black-ish: #222;
  10. --white-ish: #F1FAEE;
  11. --dark-grey: #555;
  12. --light-grey: #AAA;
  13. --yellow: #FCC920;
  14. --dark-yellow: #D0A00E;
  15. --light-blue: #A8DADC;
  16. --blue: #1D3557;
  17. --red: #E63946;
  18. --green: #20CE88;
  19. --razzmatazz: #EC0868;
  20. --purple: #592176;
  21. color-scheme: dark light;
  22. --yellow-gradient: linear-gradient(145deg, #DAAE1B, #FFD23E);
  23. --blue-gradient: linear-gradient(145deg, #4c96ff, #226dd7);
  24. --tiny: .2rem;
  25. --tinyem: .2em;
  26. --small: .5rem;
  27. --smallem: .5em;
  28. --regular-less: .9rem;
  29. --regular: 1.1rem;
  30. --regular-em: 1.1em;
  31. --regular-more: 1.3rem;
  32. --regular-more-em: 1.3em;
  33. --big: 1.6rem;
  34. --bigger: 1.8rem;
  35. --twice: 2.2rem;
  36. --height: 3.1rem;
  37. --mastodon: 4.4rem;
  38. --margin: 6.5rem;
  39. --trans: .5s;
  40. --quicktrans: .2s;
  41. --radius-s: 5px;
  42. --radius-m: .6rem;
  43. --radius-l: 1rem;
  44. --title-text-shadow-hover: none;
  45. }
  46. html {
  47. box-sizing: border-box;
  48. cursor: url(/logos/red-cursor.svg) 16 16, crosshair;
  49. background: var(--background);
  50. scroll-behavior: smooth;
  51. }
  52. /* DARK THEME */
  53. @media screen and (prefers-color-scheme: dark) {
  54. --background: var(--blue);
  55. --text: var(--white-ish);
  56. --deep: #102040;
  57. --link: var(--primary);
  58. --primary: var(--light-blue);
  59. --secondary: var(--red);
  60. --internal-link: var(--primary);
  61. --grey: var(--dark-grey);
  62. --other-grey: var(--light-grey);
  63. --shadow: 5px 5px 20px #102040BB, -5px -5px 20px #FFFFFF11;
  64. --little-shadow: 2px 2px 3px #102040EF, -2px -2px 3px #FFFFFF22;
  65. --button-shadow: 3px 3px 8px #102040AA, -3px -3px 8px #FFFFFF11;
  66. --inner-shadow: inset 3px 3px 5px #10204088, inset -3px -3px 5px #FFF2;
  67. --inner-little-shadow: inset 2px 2px 3px #102040AA, inset -2px -2px 3px #FFF1;
  68. --header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;
  69. transition: var(--trans);
  70. }
  71. .dark {
  72. --background: var(--blue);
  73. --text: var(--white-ish);
  74. --deep: #102040;
  75. --link: var(--primary);
  76. --primary: var(--light-blue);
  77. --secondary: var(--red);
  78. --internal-link: var(--primary);
  79. --grey: var(--dark-grey);
  80. --other-grey: var(--light-grey);
  81. --shadow: 5px 5px 20px #102040BB, -5px -5px 20px #FFFFFF11;
  82. --little-shadow: 2px 2px 3px #102040EF, -2px -2px 3px #FFFFFF22;
  83. --button-shadow: 3px 3px 8px #102040AA, -3px -3px 8px #FFFFFF11;
  84. --inner-shadow: inset 3px 3px 5px #10204088, inset -3px -3px 5px #FFF2;
  85. --inner-little-shadow: inset 2px 2px 3px #102040AA, inset -2px -2px 3px #FFF1;
  86. --header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;
  87. transition: var(--trans);
  88. }
  89. /* LIGHT THEME */
  90. body {
  91. --background: var(--white-ish);
  92. --text: var(--blue);
  93. --deep: white;
  94. --link: var(--primary);
  95. --primary: var(--red);
  96. --secondary: #457B9D;
  97. --internal-link: var(--primary);
  98. --grey: var(--light-grey);
  99. --other-grey: var(--dark-grey);
  100. --shadow: 5px 5px 20px #10204055, -5px -5px 20px #FFFFFFEF;
  101. --little-shadow: 2px 2px 3px #10204055, -2px -2px 3px #FFF6;
  102. --button-shadow: 3px 3px 8px #10204055, -3px -3px 8px #FFF6;
  103. --inner-shadow: inset 3px 3px 5px #10204055, inset -3px -3px 5px #FFF3;
  104. --inner-little-shadow: inset 2px 2px 3px #10204022, inset -2px -2px 3px #FFF3;
  105. --header-shadow: 5px 5px 15px #10204033, -5px -5px 15px #FFFF;
  106. --text-shadow: 0px 0px 0px var(--link), 1px 1px 1px var(--grey);
  107. --title-text-shadow: -3px -3px 0px var(--text), -3px -2px 1px var(--grey), -2px -3px 1px var(--grey), -2px -2px 0px var(--grey), -1px -1px 0px var(--grey), 0px 0px 0px var(--grey);
  108. transition: var(--trans);
  109. }
  110. body {
  111. background: var(--background);
  112. color: var(--text);
  113. font: var(--regular) Inter, -apple-system, Helvetica, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  114. margin: 0;
  115. overflow-wrap: break-word;
  116. hyphens: auto;
  117. }
  118. * {
  119. transition: var(--trans), transform var(--quicktrans);
  120. }
  121. *,
  122. ::before,
  123. ::after {
  124. box-sizing: inherit;
  125. }
  126. .row::before,
  127. .row::after {
  128. display: table;
  129. content: " ";
  130. clear: both;
  131. }
  132. .one,
  133. .one-third,
  134. .two-thirds,
  135. .one-fourth,
  136. .half,
  137. .two-fifths,
  138. .four-fifths,
  139. .one-fifth {
  140. width: 100%;
  141. }
  142. mark {
  143. background: var(--primary);
  144. color: var(--background);
  145. font-weight: 500;
  146. padding: 0 4px;
  147. border-radius: var(--radius-s)
  148. }
  149. ::selection {
  150. color: var(--background);
  151. background: var(--primary);
  152. }
  153. .top,
  154. .bottom {
  155. right: 3vw;
  156. }
  157. .bottom {
  158. transform: rotate(.5turn);
  159. box-shadow: none !important;
  160. }
  161. .theme-toggle {
  162. right: calc(3% + 4rem);
  163. }
  164. .tool {
  165. position: fixed;
  166. bottom: var(--bigger);
  167. z-index: 9;
  168. &.button {
  169. padding: .3rem;
  170. }
  171. }
  172. a {
  173. text-decoration: none;
  174. color: var(--link);
  175. &:hover,
  176. &:focus,
  177. &:active {
  178. .title {
  179. text-shadow: var(--title-text-shadow-hover);
  180. color: var(--text);
  181. }
  182. }
  183. .box {
  184. &:hover {
  185. box-shadow: var(--inner-shadow);
  186. }
  187. }
  188. }
  189. p,
  190. li,
  191. article li,
  192. .toc {
  193. a {
  194. font-weight: 500;
  195. transition: var(--quicktrans);
  196. &:hover,
  197. &:focus {
  198. text-shadow: var(--text-shadow);
  199. color: transparent !important;
  200. }
  201. &:active {
  202. text-shadow: none;
  203. color: var(--link) !important;
  204. }
  205. &[href*="mailto" i] {
  206. &::before {
  207. content: " ✉️ ";
  208. }
  209. }
  210. &[href^="/stampa" i],
  211. &[href^="/press" i] {
  212. &::before {
  213. content: "📰 ";
  214. }
  215. }
  216. &[href*="/about" i],
  217. &[href="/info" i],
  218. &[href*="tommi.space" i] {
  219. &::before {
  220. content: "🙋🏻‍♂️ ";
  221. }
  222. }
  223. &[href*="development" i] {
  224. &::before {
  225. content: "💻 ";
  226. }
  227. }
  228. &[href*="link" i],
  229. &[href*="resources" i] {
  230. &::before {
  231. content: "📚 ";
  232. /* content: "🔗 "; */
  233. }
  234. }
  235. &[href*="/path" i],
  236. &[href*="/percorso" i] {
  237. &::before {
  238. content: "🧭 ";
  239. }
  240. }
  241. &[href*="/why" i],
  242. &[href*="/perch%C3%A9" i],
  243. &[href*="/perche" i] {
  244. &::after {
  245. content: "❓";
  246. }
  247. }
  248. &[href*="l10n" i] {
  249. &::before {
  250. content: "🌎 ";
  251. }
  252. }
  253. &[href*="learn" i] {
  254. &::before {
  255. content: "📖 ";
  256. }
  257. }
  258. &[href*="/solution" i],
  259. &[href*="/soluz" i] {
  260. &::before {
  261. content: "💡 ";
  262. }
  263. }
  264. &[href*="/quick" i],
  265. &[href*="/veloce" i] {
  266. &::before {
  267. content: "⏰ ";
  268. }
  269. }
  270. &[href*="/watch" i],
  271. &[href*="/guarda" i] {
  272. &::before {
  273. content: "🍿 ";
  274. }
  275. }
  276. &[href*="/note" i],
  277. &[href="/roadmap" i] {
  278. &::before {
  279. content: "📝 ";
  280. }
  281. }
  282. &[href*="/listen" i],
  283. &[href*="/ascolta" i] {
  284. &::before {
  285. content: "🎧 ";
  286. }
  287. }
  288. &[href="/delete" i],
  289. &[href="/quit" i] {
  290. &::before {
  291. content: "❌ ";
  292. }
  293. }
  294. &[href^="/contributors" i],
  295. &[href^="/it/cont" i],
  296. &[href="/partecipanti" i] {
  297. &::before {
  298. content: "🧑🏽‍💻 ";
  299. }
  300. }
  301. &[href*="liberapay" i],
  302. &[href*="/contribute" i],
  303. &[href*="/contribuisci" i] {
  304. &::before {
  305. content: "🎁 ";
  306. }
  307. }
  308. &[href*="keys.openpgp.org" i] {
  309. &::before {
  310. content: "🔑 ";
  311. }
  312. }
  313. &[href="/share" i],
  314. &[href="/condividi" i] {
  315. &::before {
  316. content: "📢 ";
  317. }
  318. }
  319. &[href^="/ob" i],
  320. &[href*="/faq" i] {
  321. &::before {
  322. content: "🤔 ";
  323. }
  324. }
  325. &[href="/ma" i],
  326. &[href="/but" i] {
  327. &::before {
  328. content: "🤨 ";
  329. }
  330. }
  331. }
  332. }
  333. .flex {
  334. display: flex;
  335. flex-wrap: wrap;
  336. align-items: center;
  337. justify-content: center;
  338. }
  339. .vertical {
  340. flex-direction: column;
  341. height: 100%;
  342. }
  343. a,
  344. button,
  345. .button,
  346. .aa-suggestion,
  347. .embed-container {
  348. cursor: url(/logos/red-cursor-hover.svg) 16 16, pointer;
  349. }
  350. /* private or invalid links */
  351. .invalid-link {
  352. opacity: .5;
  353. cursor: not-allowed;
  354. .invalid-link-brackets {
  355. opacity: .3;
  356. }
  357. }
  358. li {
  359. margin-bottom: var(--small);
  360. line-height: var(--regular-more-em);
  361. li {
  362. margin-bottom: 0;
  363. list-style-type: "– ";
  364. li {
  365. list-style-type: "+ ";
  366. }
  367. }
  368. }
  369. .task-list-item {
  370. list-style: none;
  371. }
  372. .task-list-item-checkbox {
  373. position: relative;
  374. right: var(--regular-less);
  375. width: var(--regular);
  376. height: var(--regular);
  377. }
  378. .post {
  379. & > p:first-of-type::first-letter {
  380. initial-letter: 4;
  381. -webkit-initial-letter: 4;
  382. }
  383. .embed-container {
  384. border-radius: var(--radius-l);
  385. box-shadow: var(--shadow);
  386. }
  387. }
  388. hr {
  389. color: transparent;
  390. border-top: 7px dotted var(--grey);
  391. }
  392. .line {
  393. width: 20%;
  394. height: var(--small);
  395. margin: 0 auto;
  396. border-radius: var(--radius-s);
  397. box-shadow: var(--little-shadow);
  398. }
  399. .background {
  400. background: var(--background) !important;
  401. color: var(--text) !important;
  402. }
  403. .page-header {
  404. h1 {
  405. font-size: var(--mastodon);
  406. margin: var(--regular-less);
  407. text-shadow: var(--header-shadow);
  408. }
  409. p {
  410. text-align: center;
  411. padding: 0 10%;
  412. }
  413. }
  414. .toc {
  415. margin: 0 10% var(--regular);
  416. li {
  417. margin: 0;
  418. li {
  419. a {
  420. opacity: .8;
  421. }
  422. li a {
  423. opacity: .8;
  424. }
  425. }
  426. }
  427. }
  428. pre,
  429. code {
  430. font: 400 1.1em 'Ubuntu Mono', 'Roboto Mono', 'Fira Code', mono, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  431. line-height: 1.2em;
  432. }
  433. pre {
  434. overflow-x: scroll;
  435. margin: var(--bigger) 0;
  436. padding: var(--regular-more);
  437. border-radius: var(--radius-m);
  438. box-shadow: var(--inner-shadow);
  439. background: var(--black-ish);
  440. code {
  441. box-shadow: unset;
  442. }
  443. }
  444. code {
  445. padding: 2px 9px;
  446. box-shadow: var(--inner-little-shadow);
  447. border-radius: var(--radius-s);
  448. }
  449. .cite {
  450. text-align: right;
  451. &::before {
  452. content: '~ ';
  453. }
  454. }
  455. blockquote {
  456. margin: 1vw 4vw;
  457. padding: 0;
  458. p {
  459. font-size: .8em;
  460. line-height: 1.5em
  461. }
  462. }
  463. td,
  464. th,
  465. tr {
  466. border: solid 1px var(--grey);
  467. }
  468. th {
  469. padding: var(--small) var(--regular-less);
  470. /* making the header sticky */
  471. position: sticky;
  472. top: 0;
  473. background: var(--background);
  474. }
  475. td {
  476. font-size: .8em;
  477. padding: var(--tiny) var(--small);
  478. }
  479. .table {
  480. max-height: 90vh;
  481. overflow: scroll;
  482. margin: var(--height) 2vw;
  483. border: 3px solid var(--grey);
  484. border-radius: var(--radius-l);
  485. box-shadow: var(--shadow);
  486. }
  487. table {
  488. border-collapse: collapse;
  489. }
  490. .landing {
  491. background: var(--primary);
  492. h1 {
  493. color: var(--background);
  494. font-weight: 800;
  495. margin-bottom: 0;
  496. position: relative;
  497. bottom: var(--regular);
  498. }
  499. .button {
  500. color: var(--primary);
  501. background: var(--background);
  502. margin: var(--tiny) var(--regular-less);
  503. }
  504. }
  505. .menu {
  506. display: flex;
  507. }
  508. @media only screen and (min-width: 950px) {
  509. .one {
  510. width: 70%;
  511. margin-left: 15%;
  512. }
  513. .half {
  514. width: 50%;
  515. }
  516. .one-third {
  517. width: calc(100% / 3);
  518. }
  519. .one-fourth {
  520. width: 25%;
  521. }
  522. .two-thirds {
  523. width: calc(100% / 3 * 2);
  524. }
  525. .one-fifth {
  526. width: 20%;
  527. }
  528. .two-fifths {
  529. width: 40%;
  530. }
  531. .four-fifths {
  532. width: 80%;
  533. text-align: left;
  534. }
  535. .three-fourths {
  536. width: 75%;
  537. }
  538. .column {
  539. float: left;
  540. }
  541. .line {
  542. margin: auto;
  543. width: 50%;
  544. }
  545. .mobile {
  546. display: none;
  547. }
  548. .box.post-preview img {
  549. max-height: 24vh;
  550. width: auto;
  551. }
  552. }
  553. img {
  554. max-width: 100%;
  555. height: auto;
  556. display: block;
  557. border-radius: var(--radius-l);
  558. }
  559. figure {
  560. margin: var(--height) auto;
  561. img {
  562. max-height: 90vh;
  563. border: solid 1px black;
  564. box-shadow: var(--shadow);
  565. margin: 0 auto;
  566. }
  567. }
  568. figcaption {
  569. font: var(--regular) "EB Garamond", Garamond, "Simoncini Garamond", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  570. line-height: var(--regular);
  571. margin-top: var(--regular-less);
  572. color: var(--other-grey);
  573. text-align: center;
  574. }
  575. .center {
  576. text-align: center;
  577. }
  578. .right,
  579. .date {
  580. text-align: right;
  581. }
  582. p {
  583. line-height: 1.75em;
  584. }
  585. strong,
  586. b {
  587. font-weight: 800;
  588. }
  589. /* make underline text dashed instead of solid */
  590. /*u {
  591. text-decoration: none;
  592. border-bottom: dashed 2px var(--text);
  593. } */
  594. article {
  595. font-size: var(--regular-more);
  596. padding: var(--twice) 10% var(--mastodon);
  597. }
  598. time {
  599. font-weight: 300;
  600. }
  601. h1, h2, h3, h4, h5 {
  602. text-transform: uppercase;
  603. &:hover {
  604. .anchor {
  605. opacity: 1;
  606. }
  607. }
  608. .anchor {
  609. opacity: 0;
  610. }
  611. }
  612. .title {
  613. font-weight: 800;
  614. letter-spacing: .1em;
  615. font-size: var(--twice);
  616. color: transparent;
  617. margin: var(--regular) auto;
  618. text-shadow: var(--title-text-shadow);
  619. text-align: center;
  620. transition: var(--quicktrans);
  621. }
  622. h1 {
  623. color: var(--text);
  624. text-align: center;
  625. font-size: var(--height);
  626. text-decoration: none;
  627. }
  628. h2 {
  629. font-size: var(--bigger);
  630. .anchor {
  631. &::after {
  632. content: '#';
  633. }
  634. }
  635. }
  636. h3 {
  637. .anchor {
  638. &::after {
  639. content: '##';
  640. }
  641. }
  642. }
  643. .box {
  644. max-width: 100%;
  645. color: var(--text);
  646. padding: var(--big);
  647. margin-top: var(--bigger);
  648. margin-bottom: var(--bigger);
  649. border-radius: var(--radius-l);
  650. box-shadow: var(--shadow);
  651. overflow: scroll;
  652. &.post-preview {
  653. margin-top: var(--regular-less);
  654. margin-bottom: var(--regular-less);
  655. max-height: unset;
  656. padding: var(--small);
  657. .date {
  658. margin: 0 var(--regular);
  659. }
  660. .button {
  661. transform: scale(.7);
  662. }
  663. }
  664. h2,
  665. h3 {
  666. text-align: center;
  667. }
  668. h3,
  669. h4 {
  670. margin: 0;
  671. }
  672. }
  673. .box,
  674. .stuff {
  675. p {
  676. margin: var(--regular) 10%;
  677. }
  678. }
  679. .stuff {
  680. padding: 4vw 2vw;
  681. margin: var(--height) 2vw;
  682. border-radius: var(--radius-l);
  683. box-shadow: var(--shadow);
  684. .column {
  685. padding: 0 2vw;
  686. }
  687. }
  688. .stuff-logo {
  689. width: auto;
  690. min-width: 50%;
  691. max-width: 100%;
  692. max-height: 10rem;
  693. border-radius: 0;
  694. }
  695. .last-modified {
  696. margin: 0 auto var(--twice);
  697. font-size: var(--regular-less);
  698. opacity: .8;
  699. text-align: center;
  700. }
  701. footer {
  702. margin: 2vw;
  703. overflow: hidden;
  704. width: 96%;
  705. padding: 2vw;
  706. border-radius: var(--radius-l);
  707. box-shadow: var(--shadow);
  708. * {
  709. text-align: center;
  710. }
  711. img {
  712. border-radius: 0;
  713. margin: auto;
  714. }
  715. & > .row {
  716. justify-content: space-between;
  717. }
  718. time {
  719. font-family: 'Ubuntu Mono', 'Roboto Mono', 'Fira Code', mono, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  720. }
  721. .time {
  722. line-height: 1.1em;
  723. }
  724. }
  725. @media only screen and (max-width: 950px) {
  726. .page-header h1 {
  727. font-size: var(--height);
  728. }
  729. .box {
  730. margin: var(--bigger) 3%;
  731. }
  732. .stuff-logo {
  733. margin-top: var(--bigger)
  734. }
  735. .margin {
  736. margin: 0 10%;
  737. }
  738. article {
  739. padding: var(--twice) 7% var(--mastodon);
  740. }
  741. }
  742. audio {
  743. width: 100%;
  744. box-shadow: var(--shadow);
  745. border-radius: var(--radius-m);
  746. }
  747. .controlBar {
  748. background: none !important;
  749. }
  750. svg.button,
  751. img.button {
  752. height: var(--height);
  753. width: auto;
  754. padding: 0;
  755. margin: var(--tiny);
  756. background: var(--primary);
  757. }
  758. button,
  759. .button {
  760. display: inline-block;
  761. padding: var(--small) var(--regular);
  762. font-size: var(--bigger);
  763. font-weight: 700;
  764. text-transform: uppercase;
  765. border-radius: var(--radius-m);
  766. box-shadow: var(--button-shadow);
  767. text-align: center;
  768. hyphens: none;
  769. &:hover,
  770. &:focus {
  771. box-shadow: none;
  772. }
  773. &:active {
  774. box-shadow: var(--inner-shadow);
  775. }
  776. }
  777. .written {
  778. background: var(--primary);
  779. color: var(--background);
  780. margin: var(--big);
  781. }
  782. .smaller {
  783. padding: var(--tiny) var(--regular-less);
  784. margin: var(--small);
  785. font-size: var(--big);
  786. border-radius: var(--radius-s);
  787. }
  788. .sharing {
  789. .button {
  790. margin-right: var(--small);
  791. padding: .4rem;
  792. }
  793. }
  794. /* FOOTER */
  795. #license {
  796. font-size: .8em;
  797. font-weight: 200;
  798. }
  799. .embed-container {
  800. --video--width: 1920;
  801. --video--height: 1080;
  802. position: relative;
  803. padding-bottom: calc(var(--video--height) / var(--video--width) * 100%);
  804. overflow: hidden;
  805. max-width: 100%;
  806. background: transparent;
  807. iframe,
  808. object,
  809. embed {
  810. position: absolute;
  811. top: 0;
  812. left: 0;
  813. width: 100%;
  814. height: 100%;
  815. }
  816. }
  817. .green {
  818. background: var(--green);
  819. color: var(--black-ish) !important;
  820. border-color: var(--green) !important;
  821. }
  822. .red {
  823. background: var(--red);
  824. color: white !important;
  825. border-color: var(--red) !important;
  826. a {
  827. color: var(--light-blue);
  828. }
  829. }
  830. .blue {
  831. background: var(--light-blue);
  832. color: var(--blue) !important;
  833. border-color: var(--light-blue) !important;
  834. a {
  835. color: var(--red);
  836. }
  837. }
  838. .purple {
  839. background: var(--purple);
  840. color: var(--white-ish) !important;
  841. border-color: var(--purple) !important;
  842. a {
  843. color: var(--light-blue);
  844. }
  845. }
  846. .yellow {
  847. background: var(--yellow);
  848. color: var(--black-ish) !important;
  849. border-color: var(--yellow) !important;
  850. a {
  851. color: var(--red);
  852. }
  853. }
  854. .razzmatazz {
  855. background: var(--razzmatazz);
  856. color: white !important;
  857. border-color: var(--razzmatazz) !important;
  858. }
  859. .grey {
  860. background: var(--grey);
  861. border-color: var(--grey) !important;
  862. }
  863. .border {
  864. background: transparent;
  865. color: var(--text);
  866. border: 3px solid var(--text);
  867. }