@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&display=swap');

:root{

    scroll-behavior: smooth;
    color: var(--mainColor-B);

    --color-gray-0: #ffffff;
    --color-gray-100: #FEFEFE;
    --color-gray-200: #E8E8E8;
    --color-gray-900: #1C1C1C;

    --color-green-a: #21796B;
    --color-green-c: #46BAAF;
    --color-green-e: #0E332D;
    --color-green-d: #9AD2C9;
    --color-green-f: #D4FAF4;

    --ui-layer-1-default: var(--color-gray-100);
  
}


*, *::before, *::after { box-sizing: border-box; border: none; }
  
ul[class], ol[class] { padding: 0; list-style: none; } 
  
body, h1, h2, h3, h4, h5, h6, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; font-family: 'DM Sans', sans-serif; }
  
img{ max-width: 100%; display: block; }

body {
    background-color: var(--ui-layer-1-default);
    min-width: 500px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color-heading);
}

h1 {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-green-a);
    margin-bottom: 16px;
}

h2 {
    margin-bottom: 16px;
    font-size: 26px;
    font-weight: 500;
    color: var(--color-green-a);
}

h3 {
    font-size: 22px;
    font-weight: 500;
    max-width: 80ch;
    margin-bottom: 40px;
    color: var(--color-green-e);
}

p {
    font-size: 18px;
    color: var(--color-green-e);
    line-height: 32px;
    margin-bottom: 22px;
}
  
ul{
    margin: 0; padding: 0;
    text-indent: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;font-optical-sizing: auto;
    padding: 18px 26px;
    font-size: 16px; line-height: 16px; cursor: pointer; letter-spacing: 0.5px;
    border-radius: 40px;
    color: #FEFEFE;
    box-shadow: var(--shadow-z-1);
    background-color: var(--color-green-a);
    margin-bottom: 28px;
    width: fit-content;
}

button.main {
    background-color: var(--color-green-a);
}


button.alt {
    background-color: var(--color-green-f);
    color: var(--color-green-a);
    border: 1px solid var(--color-green-a);
}

button:hover {
    filter: brightness(0.9);
}


form {
    & .form-box {
        background-color: var(--ui-layer-2-default);
        border: 1px solid var(--border-color);
        padding: 24px;
        border-radius: 8px;
        margin-bottom: 24px;
        width: 480px;
        box-shadow: var(--shadow-z-1);
    }

    & label {
        color: #969696;
        font-size: 16px;
        font-weight: 500;
        display: block;
        margin-bottom: 8px;
    }

    & input, select {
        padding: 32px;
        border-radius: 10px;
        border: 1px solid #C0C0C0;
        margin-bottom: 40px;
        width: 100%;
        font-size: 16px;
        font-family: "DM Sans", sans-serif;
        background-color: #F5F5F5;
    }

    & textarea {
        padding: 32px;
        border-radius: 10px;
        border: 1px solid #C0C0C0;
        margin-bottom: 40px;
        width: 100%;
        font-size: 16px;
        font-family: "DM Sans", sans-serif;
        background-color: #F5F5F5;
    }


    & input::placeholder, textarea::placeholder {
        color: #8D8D8D;
        font-family: "DM Sans", sans-serif;
    }
}

section {
    padding: 0px 60px 40px;
    width: 100%;
    margin: 0 auto;
}

.double-col {
    width: 100%;
    display: grid;
    gap: 32px;
    margin-bottom: 60px;
}

.triple-col {
    width: 100%;
    gap: 32px;
    display: grid;
    margin-bottom: 60px;
}

.title-button {
    display: grid;
}

.theme {
	font-size: 16px;
    text-transform: uppercase;
	font-weight: 700;
	color: var(--color-green-D);
    padding: 0 16px;
	margin-bottom: 16px;
    background-color: #0CFF4D;
    width: fit-content;
    border-radius: 8px;
}

    

.date {
	font-size: 16px;
	color: #666;
	margin-bottom: 16px;
}

@media(min-width: 1114px){

    h1 {
        font-size: 60px;
        margin-bottom: 16px;
    }

    h2 {
        margin-bottom: 16px;
        font-size: 32px;
    }

    p {
        font-size: 20px;
    }

    .title-button {
        grid-template-columns: max-content auto;
        justify-content: space-between;
        align-items: end;
    }

    .double-col {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        margin-bottom: 60px;
    }

    .triple-col {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 22px;
        margin-bottom: 60px;
    }


    section {
        padding: 64px 120px;
        max-width: 1600px;
    }

}