@import url(https://fonts.googleapis.com/css?family=Fira+Sans:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Fira+Code:300,regular,500,600,700);
@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Thai:100,200,300,regular,500,600,700);

@import url('/src/css/colors/catppuccin.css');
@import url('/src/css/parts/toggler.css');

@import url('/src/css/ascii.css');

@import url('/src/css/parts/data/user.css');
@import url('/src/css/parts/data/education.css');
@import url('/src/css/parts/data/skills.css');
@import url('/src/css/parts/data/works.css');
@import url('/src/css/parts/data/contact.css');

@import url('/src/css/parts/player.css');

* {
  font-family: 'Fira Sans', 'IBM Plex Sans Thai', sans-serif;
  
  transition: all .3s;
}

body {
  background-color: var(--ctp-base);
  color: var(--ctp-text);
  margin: 0;
}

.main-container {
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.backdrop, .container {
  width: 100%;
  height: 100dvh;
}

.backdrop {
  background: linear-gradient(to right bottom, transparent, var(--ctp-base));
  backdrop-filter: blur(.45rem);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;

  html[data-theme="latte"] & {
    background: linear-gradient(to right bottom, transparent, var(--ctp-subtext1));
  }
}

.container {
  min-height: 100dvh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;

  overflow-y: auto;
  scroll-behavior: smooth;
  /* padding: 2rem 0; */

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  .inner-container {
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
}

.hidden {
  display: none !important;
}

.hide {
  opacity: 0;
}

.protect {
  width: 100%;
  height: 100dvh;

  position: fixed;
  z-index: 999;
}

.card {
  background: var(--ctp-base);
  padding: .5rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  p {
    width: 100%;
    margin: 0;
    
    &.floor {
      text-align: left;
    }

    &.value {
      text-align: right;
      font-weight: bold;
      font-size: 20px;
    }
  }
}

.skip-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1001;

  padding: 0.5rem 1.25rem;
  background-color: var(--ctp-surface0);
  color: var(--ctp-text);
  border: 1px solid var(--ctp-surface1);
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.skip-btn:hover {
  background-color: var(--ctp-surface1);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

.skip-btn:active {
  transform: scale(0.95);
}

#footer {
  width: 100%;
  padding: 1.5rem 0;
  text-align: center;

  margin-top: 2rem;

  background: rgba(var(--ctp-crust-rgb), 0.4);
  color: var(--ctp-text);

  a {
    text-decoration: none;
    color: var(--ctp-text);

    &:hover {
      opacity: .6;
      color: var(--ctp-blue);
    }
  }
}