/*==================================================
  GOOGLE FONTS
==================================================*/

:root {

    /*==============================
      COLORS
    ==============================*/

    --primary: #B8865B;
    --primary-dark: #8C6239;
    --secondary: #EAC9A8;

    --white: #ffffff;
    --off-white: #FFF8F4;
    --paper: #FFFDFB;

    --text: #4E4035;
    --text-light: #8B7B6E;

    --border: rgba(184, 134, 91, 0.18);

    --shadow: 0 15px 40px rgba(0,0,0,.08);

    --glass: rgba(255,255,255,.55);

    --radius: 22px;

    /*==============================
      FONTS
    ==============================*/

    --font-title: "Great Vibes", cursive;
    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Poppins", sans-serif;

    /*==============================
      SPACING
    ==============================*/

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-xxl: 90px;

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

    --container: 420px;

}


/*==================================================
RESET
==================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:var(--font-body);

    background:var(--off-white);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

    min-height:100vh; 
     max-width: 420px;
    margin: auto;

}


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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(255,235,220,.75),
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(255,220,190,.45),
        transparent 35%),

        linear-gradient(
            to bottom,
            #fffdfb,
            #fff7f2
        );

    z-index:-3;

}


body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:

        radial-gradient(
            rgba(184,134,91,.03) 1px,
            transparent 1px
        );

    background-size:18px 18px;

    opacity:.5;

    z-index:-2;

}


/*==================================================
IMAGES
==================================================*/

img{

    width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

    border:none;

    outline:none;

    cursor:pointer;

}


/*==================================================
LISTS
==================================================*/

ul{

    list-style:none;

}


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

main{

    width:100%;

    max-width:var(--container);

    margin:auto;

    position:relative;

    background:transparent;

}


/*==================================================
SECTIONS
==================================================*/

section{

    position:relative;

    padding:90px 25px;

}


/*==================================================
TYPOGRAPHY
==================================================*/

h1{

    font-family:var(--font-title);

    font-size:clamp(3rem,8vw,4.7rem);

    color:var(--primary);

    line-height:1.1;

}


h2{

    font-family:var(--font-heading);

    font-size:clamp(2rem,5vw,3rem);

    font-weight:600;

    margin-top:10px;

    color:var(--text);

}


h3{

    font-family:var(--font-heading);

    font-size:1.5rem;

    font-weight:600;

}


p{

    color:var(--text-light);

    font-size:15px;

}


small{

    display:block;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--primary);

    font-size:12px;

}


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

.section-title{

    text-align:center;

    margin-bottom:55px;

}

.section-title p{

    max-width:320px;

    margin:15px auto 0;

}


/*==================================================
COMMON CARD
==================================================*/

.card{

    background:var(--glass);

    backdrop-filter:blur(16px);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/*==================================================
COMMON BUTTON
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 32px;

    border-radius:100px;

    transition:.35s;

    font-weight:500;

}


.btn-primary{

    background:var(--primary);

    color:#fff;

}


.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}


.btn-outline{

    border:1px solid var(--primary);

    color:var(--primary);

    background:#fff;

}


.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


/*==================================================
INPUTS
==================================================*/

input,
textarea,
select{

    width:100%;

    padding:15px 18px;

    margin-bottom:18px;

    border-radius:14px;

    border:1px solid var(--border);

    background:#fff;

    font-family:inherit;

    color:var(--text);

    outline:none;

    transition:.3s;

}


input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(184,134,91,.12);

}


/*==================================================
UTILITIES
==================================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f6eee7;

}


/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/* Animation Ready States */

#website{
    display: none;
}

#website.active{
    display: block;
    animation: fadeIn .8s ease;
}
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

#loader.hidden{
    opacity:0;
    visibility:hidden;
}

#intro.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.envelope.opened .envelope-flap{
    transform:rotateX(180deg);
}

.music-button.playing{
    color:#fff;
}

.curtain.left::after {
    content: "";
    position: absolute;
  
    background-image: url(../images/left-ams.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
}

.curtain.right::after{
     content: "";
    position: absolute;
  
    background-image: url(../images/right-arv.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    right: 0;
    left:auto;
    top: 0;
}
}