@charset "utf-8";
/* CSS Document */
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {

}

:root {
  --clr-primary: hsl(202, 100%, 85.2%);
  --clr-accent: hsl(202, 100%, 78%);
  --clr-heading: #000;
  /* Reverted to a lighter button background for visibility */
  --clr-button-bg: hsl(202, 100%, 50%);
  --clr-button-icon: #fff;
}

body {

  font-family: "Noto Sans", sans-serif;




}

svg {
  display: block;
  width: 24px;
  height: 24px;
}

.card {
  height: 25rem;
  border-radius: 0.625rem;
  padding: 0.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.card .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-radius: 0.625rem;
  padding: 1rem;
  background-color: var(--clr-primary);
  line-height: 2.8;
  position: relative;
}

.card-content {
  flex: 1;
}

.card-body h1 {
  /* Set color back to black */
  color: var(--clr-heading);
}

.card-body p {
  /* Set color back to black */
  color: #000;
}

.card-tags-group {
  position: absolute;
  bottom: 1.5rem;
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.tag {
  display: inline-block;
  font-size: 0.856rem;
  border-radius: 1.2rem;
  background: var(--clr-accent);
  padding: 0.225rem 0.5rem;
  /* Set color back to black */
  color: #000;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.card-footer h2 {
  /* Set color back to black */
  color: var(--clr-heading);
}

.button {
  width: 50px;
  height: 50px;
  background: var(--clr-button-bg);
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
}

.button svg {
  flex-shrink: 0;
  fill: var(--clr-button-icon);
}




/* Basic styling for the body to center the buttons */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 100vh;
    gap: 20px; /* Adds space between buttons */
    background-color: #f0f2f5;
}

/* A universal style for all buttons for basic setup */
button {
    padding: 15px 25px;
    border: none;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Button One: Simple Solid Color with Shadow */
.button-one {
    background-color: #4CAF50; /* Green */
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.button-one:hover {
    background-color: #45a049;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Button Two: Gradient with Rounded Corners */
.button-two {
    background-image: linear-gradient(to right, #f5567b, #fd866c);
    color: white;
    border-radius: 30px;
}
.button-two:hover {
    transform: translateY(-2px); /* Lifts the button up slightly */
}

/* Button Three: Outlined with Border Animation */
.button-three {
    background-color: transparent;
    color: #007BFF;
    border: 2px solid #007BFF;
    border-radius: 8px;
}
.button-three:hover {
    background-color: #007BFF;
    color: white;
}

/* Button Four: 3D Effect Button */
.button-four {
    background-color: #f79521;
    color: white;
    border-bottom: 5px solid #d87e1a;
    border-radius: 10px;
}
.button-four:active { /* When the button is clicked */
    transform: translateY(3px);
    border-bottom-width: 2px;
}

/* Button Five: Neumorphic (Soft UI) Design */
.button-five {
    background-color: #e0e5ec;
    color: #555;
    border-radius: 50px;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
}
.button-five:hover {
    box-shadow: inset 4px 4px 8px rgb(163,177,198,0.6), inset -4px -4px 8px rgba(255,255,255, 0.5);
}

/* Button Six: Glowing Effect */
.button-six {
    background-color: #1a1a1a;
    color: #00bcd4;
    border-radius: 5px;
    box-shadow: 0 0 5px #00bcd4, 0 0 25px #00bcd4;
}
.button-six:hover {
    box-shadow: 0 0 5px #00bcd4, 0 0 25px #00bcd4, 0 0 50px #00bcd4, 0 0 100px #00bcd4;
}

/* Button Seven: Dashed Border Button */
.button-seven {
    background-color: white;
    color: #6c757d;
    border: 2px dashed #6c757d;
}
.button-seven:hover {
    background-color: #6c757d;
    color: white;
}

/* Button Eight: Pill-shaped with Icon (conceptual) */
.button-eight {
    background-color: #28a745;
    color: white;
    border-radius: 50em; /* Creates a pill shape */
    padding: 12px 30px;
}
.button-eight:hover {
    background-color: #218838;
}

/* Button Nine: Skewed Button */
.button-nine {
    background-color: #dc3545;
    color: white;
    transform: skew(-15deg); /* Skews the button */
}
.button-nine:hover {
    transform: skew(0deg); /* Unskews on hover */
}

/* Button Ten: Underline Effect from Left */
.button-ten {
    background: none;
    color: #343a40;
    position: relative;
    padding-bottom: 20px; /* Space for the underline */
}
.button-ten::before {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 10px;
    left: 0;
    background-color: #343a40;
    transition: width 0.3s ease;
}
.button-ten:hover::before {
    width: 100%; /* Line animates to full width on hover */
}


<!--เมนู-->
.containter {
  width: 260;
  height: 100%;


}

.dialogue {
  border-color: #e80cc3;
  background-color:rgba(249,225,248,1.00);
  border-radius: 0 0 15px 15px;
  border-style: solid;
  padding: 5px;
}

.top-panel {
  background-color: #e80cc3;
  height: 55px;
  border-radius: 15px 15px 0 0;
  color: white;
  padding: 10px 0px 0px 9px;
   font-size: 20px;
}

button {

}


</style>