*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: rgb(64,40,32);
  --white: #ffffff;
  --bg: rgb(249,249,249);
}

html {
  scroll-behavior: smooth;
}

@media (min-width: 1440px) {
  html {
    zoom: 1.5;
  }
}

@media (min-width: 2560px) {
  html {
    zoom: 1.7;
  }
}

@media (min-width: 3860px) {
  html {
    zoom: 2.5;
  }
}

body {
  background: var(--bg);
  font-family: 'Cormorant Infant','Cactus Classical Serif';
}
.main {
  margin-right: auto; 
  font-size: 60px;
}
.table {
  position:fixed;
  top:0px;
  height:100px;
  width: 100%;
  background-color: rgb(249,249,249);
  display: flex;
  align-items:center;
  padding: 20px 50px;
  z-index: 2000;
  box-sizing: border-box;
  border-bottom: 2px solid #333348;
}
.table img{
  height: 130px;
  width: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  object-fit: cover;
  z-index: 1000;
}

/* 右側群組 */
.nav-items {
    display: flex; 
}

.nav-items .intro,
.nav-items .activity,
.nav-items .member,
.nav-items .lesson {
    justify-content: flex-end;
    font-size:18px;
}
.table a{
    color: rgb(66, 45, 38);
    text-decoration:none;
    
    padding:10px 30px;
    transition: background-color 0.2s;
}

.table a:hover {
  transform: scale(1.3);
}

.chat {
    padding: 120px 20px 60px;
    text-align: center;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:40px;
}

.picture img {
    width: 400px;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box, border-box;
    background-image: linear-gradient(
        white,
        white
    ),
    linear-gradient(
        45deg,
        rgb(238, 209, 165, 1),
        rgb(217, 175, 83, 1),
        rgb(174, 134, 113, 1),
        rgb(106, 63, 50),
        rgb(66, 45, 45, 1)
    );
}


.contact {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(240, 240, 240, 0.9);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    z-index: 1000;
}

.contact a {
    color: rgb(66, 45, 38);
    text-decoration: none;
    font-size: 16px;
    padding: 5px 10px;
    transition: color 0.3s;
}

.contact a:hover {
    color: rgb(217, 175, 83);
}


.chat-message {
    display:flex;
    position: relative;
    font-size: 20px;
    line-height:2;
    width:fit-content;
    gap:50px;
    margin-bottom: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

.from-user {
    padding: 20px;
    background-color: rgb(248, 223, 219);
    justify-content: flex-end;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-left: auto; 
    margin-right:30px;
    position: relative; 
    z-index: 1;
    text-align: start;
}

.from-other {
    padding: 20px;
    background-color: rgb(207, 231, 231);
    justify-content: flex-start;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    text-align:start;
}
/* 尖角 */
.from-user::after, .from-other::after {
    z-index: -1;
}

.from-user::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 180px solid transparent;
    border-top: 70px solid rgb(248, 223, 219);
    top: 10%;
    right: -40px;
}


.from-other::after {
    border-top: 100px solid rgb(207, 231, 231);
    top: 20%;
    left: -40px;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 180px solid transparent;
}

.cat {
    flex-shrink:0;
    display:flex;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color:rgb(248,248,248); 
    justify-content:center;
    align-items: center;
    overflow: hidden; 
    border:3px solid rgb(220, 220, 220);
  }
  .cat img {
    object-fit: cover;
    height: 150%;
    width: 150%;

  }
  .read-receipt {
    font-size: 14px;
    color: gray;
    position: absolute;
    bottom: 0px; 
    left: -40px; 
    font-family: Arial, Helvetica, sans-serif;
}
.hidden {
  opacity: 0;
  transform: translateY(100px);
  will-change: transform, opacity;
}

.slide-in {
  animation: slideInUp 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  80% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}