/* ==========================================================
   Birthday Website
   Layout CSS
   Author : Huy + ChatGPT
   ========================================================== */

/* ==========================================================
   ROOT LAYOUT
   ========================================================== */

body{

    position: relative;

    width: 100%;

    min-height: 100vh;

}

/* ==========================================================
   MAIN
   ========================================================== */

main{

    position: relative;

    width: 100%;

}

/* ==========================================================
   SECTION
   ========================================================== */

section{

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width: min(1200px, calc(100% - 64px));

    margin-inline: auto;

}

/* ==========================================================
   CONTENT
   ========================================================== */

.content{

    position: relative;

    z-index: var(--z-content);

}

/* ==========================================================
   ROW
   ========================================================== */

.row{

    display: flex;

    flex-direction: row;

    align-items: center;

}

/* ==========================================================
   COLUMN
   ========================================================== */

.column{

    display: flex;

    flex-direction: column;

}

/* ==========================================================
   CENTER
   ========================================================== */

.center{

    display: flex;

    justify-content: center;

    align-items: center;

}

/* ==========================================================
   SPACE BETWEEN
   ========================================================== */

.between{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

/* ==========================================================
   FULL SIZE
   ========================================================== */

.full{

    width: 100%;

    height: 100%;

}

/* ==========================================================
   FULL VIEWPORT
   ========================================================== */

.full-screen{

    width: 100vw;

    height: 100vh;

}

/* ==========================================================
   OVERLAY
   ========================================================== */

.overlay{

    position: absolute;

    inset: 0;

    z-index: var(--z-overlay);

}

/* ==========================================================
   BACKGROUND
   ========================================================== */

.background{

    position: absolute;

    inset: 0;

    z-index: var(--z-background);

}

/* ==========================================================
   ABSOLUTE CENTER
   ========================================================== */

.absolute-center{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

/* ==========================================================
   STACK
   ========================================================== */

.stack-xs{

    display: flex;

    flex-direction: column;

    gap: var(--space-2);

}

.stack-sm{

    display: flex;

    flex-direction: column;

    gap: var(--space-4);

}

.stack-md{

    display: flex;

    flex-direction: column;

    gap: var(--space-6);

}

.stack-lg{

    display: flex;

    flex-direction: column;

    gap: var(--space-8);

}

/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display: grid;

}

.grid-2{

    display: grid;

    grid-template-columns: repeat(2,1fr);

}

.grid-3{

    display: grid;

    grid-template-columns: repeat(3,1fr);

}

.grid-4{

    display: grid;

    grid-template-columns: repeat(4,1fr);

}

/* ==========================================================
   FLEX GROW
   ========================================================== */

.flex-1{

    flex:1;

}

/* ==========================================================
   POSITION
   ========================================================== */

.relative{

    position: relative;

}

.absolute{

    position: absolute;

}

/* ==========================================================
   OVERFLOW
   ========================================================== */

.overflow-hidden{

    overflow:hidden;

}

/* ==========================================================
   Z-INDEX
   ========================================================== */

.z-base{

    z-index:var(--z-base);

}

.z-content{

    z-index:var(--z-content);

}

.z-overlay{

    z-index:var(--z-overlay);

}