/* ================================================== */
/* ================== Global Items ================== */
/* ================================================== */

/* #region */

/* Cormorant; Philosopher; Alegreya; Almendra; IM Fell English */


:root
{
    --primary-background:   rgb(20, 7, 22);
    --primary-header:       rgb(72, 228, 98);
    --primary-transparent:  rgba(0, 0, 0, 0);

    --element-outline:      rgb(171, 100, 238);
    --element-selected:     rgb(214, 171, 255);
    --element-background:   rgb(4, 12, 5);

    --text-hover:           rgb(211, 163, 255);
}

body
{
    max-width: 1400px;
    margin: 0 auto;
    background-color: var(--primary-background);
}

p, label, h1, h2, h3
{
    color: white;
    font-family: Almendra;
}

h1
{
    font-size: 2.8rem;
}

button
{
    font-family: Alegreya;
}

/* #endregion */

/* ================================================== */
/* ================== Header Items ================== */
/* ================================================== */

/* #region */

header
{
    display: flex;
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, var(--primary-header), var(--primary-transparent));
    height: 160px;
    align-items: center;
}

nav 
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
}

nav ul 
{
    display: flex;
    list-style: none;
    gap: 60px;
}

.header-item
{
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    text-decoration: none;
    font-size: 2rem;
    font-family: IM Fell English;
}

.logo
{
    font-size: 2.4rem;
    transition: color 0.5s;
}

.logo:hover
{
    color: var(--text-hover);
    transition: color 0.3s;
}

.nav-link
{
    border-radius: 6px;
    height: 48px;
    transition: color 0.5s;
}

.nav-link:hover
{
    color: var(--text-hover);
    transition: color 0.3s;
}

/* #endregion */


/* ================================================== */
/* ================== Product Page ================== */
/* ================================================== */

/* #region */

.product-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 120px;
}

.product-container:nth-child(even) .product-description-container
{
    flex-direction: row-reverse;
}

.product-description-container
{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 80px;
}

.product-image
{
    cursor: pointer;
    height: 650px;
}

.product-description
{
    font-family: Almendra;
    font-size: 1.6rem;
}

.button-container
{
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-top: 50px;
}

.product-button
{
    width: 220px;
    height: 70px;
    font-size: 2rem;
}

/* #endregion */


/* ================================================== */
/* ================== Product Page ================== */
/* ================================================== */

/* #region */

#contact-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-section
{
    width: 600px;
    margin-bottom: 60px;
}

form
{
    display: flex;
    flex-direction: column;
}

input, textarea
{
    font-family: Cormorant;
    background-color: var(--element-background);
    border: 4px solid var(--element-outline);
    outline: none;
    color: white;
    border-radius: 12px;
    margin: 6px 0px;
}

input:focus, textarea:focus
{
    border-color: var(--element-selected);
}

input
{
    font-size: 1.2rem;
    height: 46px;
    padding: 0px 6px;
}

textarea
{
    font-size: 1rem;
    padding: 6px;
}

.submit-button
{
    display: block;
    align-self: center;
    width: 180px;
    height: 54px;
    font-size: 1.8rem;
    margin: 6px 0px;
}

/* #endregion */