@import url('https://fonts.googleapis.com/css?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root{
  --shdw:0 4px 6px rgba(0,0,0,.1);
  --shdw2:0 0 5px var(--social-bg);
  --card-bg:#ff6624;
  --social-bg:rgb(68 160 68 / 76%);
  --text-color:#178117;
}
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src:url(../fonts/mi.woff2) format('woff2'); }
.material-icons,.mi,mi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: inherit; display: inline-block; line-height: inherit; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; color: inherit; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; vertical-align: middle; }
*{box-sizing: border-box;}
html { display: table; width: 100%; height: 100%; font-family: "Rubik", sans-serif; font-optical-sizing: auto; }
body { display: table-cell; text-align: center; vertical-align: top;padding: 10px; color: var(--text-color);}
body { background-image: url(/lib/imgs/bg-green.svg); background-size: 700px; }
p{ text-align: center; text-align: center; }
a{text-decoration: none;color:inherit; }
img{width:100%;}
picture>img{object-fit: cover;}
[logo] { display: inline-block; box-shadow: var(--shdw); border-radius: 10px; padding: 15px;max-width: 250px; width: 75%; background: var(--card-bg); aspect-ratio: 1.9 / 1; align-items: center; display: flex; margin: 20px auto 5px; }
social { display: flex; justify-content: center; gap: 0; align-items: center;margin: auto;}
social a { font-size: 22px; display: inline-block; padding: 7px; }
btn,[btn],.btn { font-size: 20px; display: inline-block; padding: 10px; box-shadow: var(--shdw); border-radius: 8px; line-height: 1;transition: all 0.2s ease;background: var(--card-bg); }
btn:hover,[btn]:hover,.btn:hover { box-shadow: var(--shdw2);}
list { display: flex;flex-direction: column;justify-content: center; gap: 15px; align-items: center;    margin: auto; }
list>* { width: 100%;display: flex !important; justify-content: start; gap: 8px;align-items: center; }
list>*>i,list>*>mi { float: right;font-size: 150%; }
.wrap{width: 800px;max-width: 90vw;margin: auto;}
h1,h2,h3{margin: 5px;}
h1{font-size: 25px;}
h2{font-size: 20px;}
h3{font-size: 18px;}
about{display: block;margin: 5px 0 15px;}

/** CUSTOM **/
social{display: inline-flex;padding: 0 10px;}
social,btn,[btn],.btn{background: var(--social-bg); border-radius: 11px; color: #fff; backdrop-filter: blur(1px); box-shadow: 1px 1px 3px var(--social-bg);}
cr{display: block;padding: 15px;margin: 20px auto;font-size: 13px;}