:root,*{
  --accent-d: 100, 0, 0;
  --accent-l: 255, 255, 255;
  --accent-bg:rgb(var(--accent-d));
  --accent-fg:rgb(var(--accent-l));
  --accent-bg-light:rgba(var(--accent-d), 0.1);
  /* --max-size-w:375px;
  --max-size-h:calc(100vh - 3rem); */
}

/* body{font-family:Geist,system-ui;font-size:14px;color:#666666;display:grid;place-content:center;place-items:center;height:100vh;user-select:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);} */
body{margin:auto}
.container{transform:translateX(4rem);opacity:0;transition:all 0.3s ease-in-out;font-size:14px;overflow:auto;scroll-behavior:smooth;}
.in{animation: in 0.3s ease-in-out forwards;overflow:hidden }
@keyframes in { from{transform:translateX(4rem);opacity:0} to{transform:translateX(0);opacity:1} }
a{text-decoration:none;color:inherit;
  & .pen{pointer-events:none}
  & svg {pointer-events:none;}
  &.link { color: rgb(var(--accent-d)) }
}
/* @keyframes out { from{transform:translateX(0);opacity:1;} to{transform:translateX(4rem);opacity:0;} } */

/* .out{animation: out 0.3s ease-in-out forwards } */
/* @keyframes in { from{opacity:0;scale:0} to{opacity:1;scale:1} }
@keyframes out { from{opacity:1;scale:1} to{opacity:0;scale:0} } */

/* button,.button{display:inline-block;font-family:inherit;padding:0.5rem 1rem;border:transparent;background:var(--accent-bg);color:var(--accent-fg);border-radius:9999px;cursor:pointer;width:auto !important}
button:hover,.button:hover{opacity:0.75;transition:300ms linear;text-decoration:none;} */
.accent{background:var(--accent-bg) !important;color:var(--accent-fg) !important;}
.secondary{background:var(--accent-bg-light) !important;color:var(--accent-bg) !important;}
.header{display:flex;justify-content:flex-start;align-items:center;gap:1rem;
  & h3{font-weight:bold;text-transform:uppercase;}
  & h5{font-weight:bold;text-transform:uppercase;font-size:1.05rem;letter-spacing:0.1px;}
}
.back{display:flex;align-items:center;justify-content:center;border-radius:50%;min-width:32px;min-height:32px;padding:8px;color:var(--accent-fg)}
/* .col2{display:flex;justify-content: space-between;align-items:center;width:100%;text-align:center;border-bottom:1px solid rgba(var(--accent-d), 0.05);padding-block:0.5rem;} */

.title{background:rgb(var(--accent-d));color:var(--accent-fg);border-radius:9999px;padding:0.4rem 1.5rem;font-size:0.85rem;position:relative;z-index:1;filter: opacity(0.7);}
.title::before{position:absolute;content:"";width:200vw;height:1px;left:-100vw;top:50%;background:rgba(var(--accent-d),0.25);border-radius:50%;transform:translateY(-50%);z-index:-1;}

.teachers{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));width:100%;gap:2rem;}
.teacher{display:flex;flex-direction:column;align-items:center;
  & img{width:5rem;height:5rem;border-radius:50%;margin-bottom:0.25rem;border:3px solid rgba(var(--accent-d), 0.05);padding:1px;cursor:pointer}
  & b{color:var(--accent-bg)}
}

.menus{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));width:max-content;gap:1rem;width:100%}
.menu{display:flex;flex-direction:column;align-items:center;background:rgba(var(--accent-d), 0.05);border-radius:1rem;padding:1rem;width:100%;transition:300ms ease-in-out;
  & img{width:5rem;height:5rem;border-radius:50%;margin-bottom:0.25rem;border:3px solid rgba(var(--accent-d), 0.05);padding:1px;cursor:pointer}
  & ion-icon{ min-width:2.5rem;min-height:2.5rem;opacity:0.75;}
  & small{color:var(--accent-bg);margin-top: 0.5rem}
  &:hover{background:rgba(var(--accent-d), 0.15);
    & ion-icon{opacity:1;transform:scale(1.1);transition:300ms ease-in-out}
  }
}

small {opacity:0.7}