/* Import fronts */
@font-face {
   font-family: "Material Symbols Rounded";
   font-style: normal;
   font-weight: 100 700;
   src: url(MaterialSymbolsRounded.woff2);
}

/* theme colors */
:root {
   --primary: hsl(160 50% 40% / 0.8);
   --on-primary: hsl(0 0% 100%);
   --primary-container: hsl(160 50% 50% / 0.3);
   --on-primary-container: hsl(160 50% 20%);
   --secondary: hsl(200 50% 40% / 0.8);
   --on-secondary: hsl(0 0% 100%);
   --background: hsl(0 0% 95%);
   --on-background: hsl(0 0% 5%);
   --surface: hsl(0 0% 90%);
   --on-surface: hsl(0 0% 15%);
   --surface-variant: hsl(0 0% 80%);
   --on-surface-variant: hsl(0 0% 5%);
   --glass: hsl(0 0% 100% / 0.5);
   --dark-glass: hsl(0 0% 0% / 0.5);
   --outline: hsl(0 0% 85%);
}

/* material design symbols */
/* https://fonts.google.com/icons */
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
.material-symbols {
   font-family: "Material Symbols Rounded";
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
   transition-property: font-variation-settings;
   transition-duration: 0.3s;
}

.material-symbols.fill {
   font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
}

/*** default style ***/
* {
   user-select: none;
   box-sizing: border-box;
   font-family: sans-serif;
   -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar{
   display: none;
   appearance: none;
}

img{
   display: inline-block;
   max-width: 100%;
   border-radius: 16px;
}

/*** layouts ***/

/* body */
body {
   background: var(--background);
   color: var(--on-background);
   margin: 0;
   padding: 0;
   width: 100vw;
   min-height: 100vh;
   display: grid;
   grid-template-rows: 60px 82px auto 70px;
   grid-template-columns: 1fr;
   grid-template-areas:
      "header"
      "aside"
      "main"
      "footer";
}

/* header */
header {
   grid-area: "header";
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0px 16px;
   box-shadow: 0 0 30px #0002;
   position: sticky;
   top: 0;
   z-index: 5;
   backdrop-filter: blur(20px);
}

header h1 {
   font-size: 24px;
   font-weight: 700;
}

/* FAB */
#FAB1{
   background: var(--primary);
   color: var(--on-primary);
   right: 36px;
   bottom: 36px;
   width: 70px;
   height: 70px;
} 
#FAB2{
   background: var(--secondary);
   color: var(--on-secondary);
   right: 46px;
   bottom: 114px;
   width: 50px;
   height: 50px;
} 

#FAB1,#FAB2{
   position: fixed;
   border: none;
   outline: none;
   border-radius: 20px;
   font-size: 28px;
   backdrop-filter: blur(20px);
   z-index: 5;
   transition: 0.3s;
   font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 48;
}

#FAB1:active,
#FAB2:active {
   scale: 0.9;
   font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 48;
}

/* aside */
aside {
   grid-area: "aside";
   overflow: auto;
   padding: 16px;
   position: sticky;
   top: 60px;
   z-index: 5;
}

aside span {
   display: none;
}

aside ul {
   background: var(--primary-container);
   color: var(--on-primary-container);
   overflow: auto hidden;
   height: 50px;
   border-radius: 24px;
   display: flex;
   justify-content: flex-start;
   align-items: stretch;
   gap: 8px;
   white-space: pre;
   list-style-type: none;
   margin: 0;
   padding: 8px;
   backdrop-filter: blur(20px);
}

aside ul li {
   background: var(--glass);
   color: var(--on-background);
   margin: 0;
   padding: 0 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 400;
   transition: 0.3s;
   cursor: pointer;
   border-radius: 24px;
}

aside ul li.selected {
   background: var(--background);
   color: var(--on-background);
}

aside ul li:hover {
   color: var(--primary);
   font-weight: 700;
}

aside ul li:active {
   scale: 0.9;
}

/* main */
main {
   grid-area: "main";
   padding: 0 26px 132px 26px;
}

main .posts {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   gap: 8px;
}

.posts>div {
   background: var(--surface);
   color: var(--on-surface);
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
}

.posts>div>.header {
   border-bottom: 2px solid var(--outline);
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 8px;
   gap: 16px;
}

.posts>div>.header .avatar {
   background: var(--background);
   color: var(--on-background);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   border-radius: 20px;
}

.posts>div>.header .name {
   font-size: 16px;
   font-weight: 700;
}

.posts>div>.body {
   padding: 16px;
}

.posts>div>.footer {
   display: flex;
   justify-content: right;
   align-items: center;
   padding: 4px;
   gap: 4px;
}

.posts>div>.footer>span {
   width: 30px;
   height: 30px;
   font-size: 20px;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0.8;
   transition: 0.3s;
}

.posts>div>.footer>span:hover {
   opacity: 1;
   font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
}

.posts>div>.footer>span:active {
   background: var(--background);
   opacity: 1;
   scale: 0.9;
}

main .comments {
   margin-top: 16px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   gap: 8px;
}

main .comments>div {
   background: var(--background);
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
}

main .comments>div>.header {
   border-bottom: 2px solid var(--surface);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
}

main .comments>div>.header .name {
   font-size: 14px;
   font-weight: 700;
}

main .comments>div>.header .tools {
   display: flex;
   justify-content: right;
   align-items: center;
   gap: 4px;
}

main .comments>div>.header .tools>span {
   width: 30px;
   height: 30px;
   font-size: 20px;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0.8;
   transition: 0.3s;
}

main .comments>div>.header .tools>span:hover {
   opacity: 1;
   font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
}

main .comments>div>.header .tools>span:active {
   background: var(--surface);
   opacity: 1;
   scale: 0.9;
}

main .comments>div>.body {
   padding: 16px;
}

/* footer */
footer {
   background: var(--surface-variant);
   color: var(--on-surface-variant);
   grid-area: footer;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
}

/* dialogs */
#backdrop {
   background: var(--dark-glass);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   visibility: hidden;
   z-index: 9;
   opacity: 0;
   backdrop-filter: blur(20px);
   transition: 0.3s;
}

#backdrop.show {
   opacity: 1;
   visibility: visible;
}

.dialog{
   background: var(--surface);
   color: var(--on-surface);
   position: fixed;
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   scale: 0.8;
   z-index: 10;
   width: 80%;
   max-width: 400px;
   border-radius: 24px;
   visibility: hidden;
   opacity: 0;
   transition: 0.3s;
}

.dialog.show {
   visibility: visible;
   scale: 1;
   opacity: 1;
}

.dialog .header {
   border-bottom: 2px solid var(--outline);
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60px;
   font-weight: 700;
   font-size: 20px;
}

.dialog .body {
   max-height: 300px;
   overflow: hidden auto;
   padding: 16px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   gap: 8px;
}

.dialog .body > div {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
}

.dialog .body > div:nth-last-child(1){
   flex-wrap: wrap;
}

.dialog .footer {
   border-top: 2px solid var(--outline);
   display: flex;
   justify-content: right;
   align-items: center;
   padding: 16px;
   gap: 8px;
}

.dialog .footer button {
   background: var(--surface-variant);
   color: var(--on-surface-variant);
   border: none;
   padding: 8px 16px;
   border-radius: 24px;
   font-weight: 700;
   font-size: 16px;
}

.dialog .footer button[type="submit"]{
   background: var(--primary);
   color: var(--on-primary);
}

/*** component ***/
input, textarea, select{
   border: 2px solid var(--outline);
   background: var(--background);
   color: var(--on-background);
   width: 100%;
   border-radius: 16px;
   padding: 8px 16px;
   vertical-align: middle;
   font-weight: 400;
   font-size: 14px;
   outline: none;
   resize: none;
   cursor: pointer;
   transition: 0.3s;
}

input:focus, textarea:focus{
   border: 2px solid var(--primary);
   background: var(--surface);
   color: var(--on-surface);
}

/*** responsive ***/
@media screen and (min-width: 450px) {
   /* body */
   body {
      grid-template-rows: 70px auto 70px;
      grid-template-columns: 250px auto;
      grid-template-areas:
         "header header"
         "aside main"
         "footer footer";
   }
   
   /* header */
   header {
      grid-area: header;
      justify-content: left;
      z-index: 6;
   }
   
   /* FAB 2 */
   #FAB2 {
      right: 112px;
      bottom: 42px;
      width: 60px;
      height: 60px;
   }
   
   /* aside */
   aside {
      grid-area: aside;
      padding: 0 0 24px 24px;
      position: fixed;
      left: 0;
      top: 70px;
      overflow: auto;
      width: 250px;
      height: calc(100vh - 70px - 70px);
   }
   
   aside span {
      background: var(--background);
      border-bottom: 4px solid var(--primary);
      display: block;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      padding: 16px;
      margin-bottom: 24px 0 16px 0;
      position: sticky;
      top: 0;
      z-index: 5;
   }
   
   aside ul {
      background: none;
      flex-direction: column;
      width: 100%;
      height: auto;
      white-space: unset;
   }
   
   aside ul li {
      background: var(--surface);
      color: var(--on-surface);
      height: 36px;
      border-radius: 8px;
   }
   
   aside ul li.selected {
      background: var(--primary);
      color: var(--on-primary);
      height: 36px;
   }
   
   aside ul li:nth-child(1){
      border-radius: 24px 24px 8px 8px ;
   }
   aside ul li:nth-last-child(1){
      border-radius: 8px 8px 24px 24px;
   }
   
   /* main */
   main {
      grid-area: main;
      padding: 24px;
   }
   
   /* footer */
   footer {
      grid-area: footer;
   }
}

/*** animation ***/