@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import "/styles/color-chemes.css";

html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    background-color: var(--color-background);

    font-family: "Open Sans", sans-serif;
    color: var(--color-foreground);
}

body {
    display: grid;
    grid-template-areas: "header" "main" "footer";
    grid-template-rows: 60px auto 100px;
}

.header {
    grid-area: header;
}

main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

.wel {
    padding: 10px 10px 0 10px;
    height: 200px;
    background-color: #ffffff13;
    display: flex;
    align-items: center;
}

@keyframes typing {
  0.0000%, 27.3488% { content: ""; }
  1.1395%, 26.2093% { content: "X"; }
  2.2791%, 25.0698% { content: "XI"; }
  3.4186%, 23.9302% { content: "XIN"; }
  4.5581%, 22.7907% { content: "XIN "; }
  5.6977%, 21.6512% { content: "XIN C"; }
  6.8372%, 20.5116% { content: "XIN CH"; }
  7.9767%, 19.3721% { content: "XIN CHÀ"; }
  9.1163%, 18.2326% { content: "XIN CHÀO"; }
  10.2558%, 17.0930% { content: "XIN CHÀO"; }

  30.7674%, 51.2791% { content: ""; }
  31.9070%, 50.1395% { content: "C"; }
  33.0465%, 49.0000% { content: "CẢ"; }
  34.1860%, 47.8605% { content: "CẢM"; }
  35.3256%, 46.7209% { content: "CẢM "; }
  36.4651%, 45.5814% { content: "CẢM Ơ"; }
  37.6047%, 44.4419% { content: "CẢM ƠN"; }

  54.6977% { content: ""; }
  55.8372% { content: "T"; }
  56.9767% { content: "TH"; }
  58.1163% { content: "THÂ"; }
  59.2558% { content: "THÂN"; }
  60.3953% { content: "THÂN "; }
  61.5349% { content: "THÂN Á"; }
  62.6744% { content: "THÂN ÁI"; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter-eff {
    font-size: 4rem;
  --caret: currentcolor;
}

.typewriter-eff::before {
  content: "";
  animation: typing 14s 1;
  content: "THÂN ÁI";
}

.typewriter-eff::after {
  content: "";
  border-right: 1ch solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.msg {
    padding: 15px 10px;
    background-color: #ffae0056;
}

.msg.caution {
    background-color: #e01a1356;
}

.nav-show {
    padding: 10px 10px;
    background-color: #ffffff1e;
}