@font-face {
    font-family: "Craftwork Grotest";
    src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: "Craftwork Grotest";
    src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: "Craftwork Grotest";
    src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: "Craftwork Grotest";
    src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: "Abel";
    src: url('../fonts/Abel/Abel-Regular.ttf');
    font-weight: 400;
}

:root {
    /* Colors */
    --radial: radial-gradient(261.43% 263.03% at 124% -28.000000000000004%,rgb(15, 88, 129),rgb(30, 164, 156) 36.979%,rgb(118, 206, 117) 66.667%,rgb(236, 243, 159) 91.146%);
    --accent-1: radial-gradient(142.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%);
    --accent-2: radial-gradient(2700.48% 141.42% at 100% 0%,rgb(122, 217, 231),rgb(126, 231, 225) 25%,rgb(181, 228, 180) 80%,rgb(215, 238, 170) 100%);
    --accent-3: linear-gradient(6deg, rgb(244, 66, 66) 7.584%,rgb(86, 158, 240) 72.371%);
    --linear: linear-gradient(-7.39deg, rgb(244, 241, 240) 23.643%,rgba(244, 241, 240, 0.3) 59.827%);
    --btn-bg: radial-gradient(100% 174.56% at 100% 0%, #7AD9E7 0%, #7EE7E1 25%, #B5E4B4 80%, #D7EEAA 100%);


    --main_white: #FFFFFF;
    --creme-white: #F4F1F0;
    --grey-f5: #F5F5F5;
    --main_black: #121212;
    --grey-black: #121212;
    --bg-light-grey: #F5F5F5;
    --interface_title: #333333;
    --interface_hover: #666666;
    --orange_80: #FFDF99;
    --green_90: #D9FFCC;
    --green-dark: #76CE75;
    --violet_90: #E7CAFF;
    --blue_90: #CCE2FF;
    --background: #F4F1F0;
    --placeholder: #999999;
    /* Fonts */
    --font-craftwork: 'Craftwork Grotest', serif;
    --font-abel: 'Abel', serif;
}

body {
    background: var(--radial);
    font-family: var(--font-craftwork);
    font-weight: 500;
}

.container {
    max-width: 1232px;
    margin: 0 auto;

    @media (max-width: 1264px) {
        max-width: calc(100% - 32px);
    }
}

.form-inp {
    height: 48px;
    width: 100%;
    border: 1px solid var(--placeholder);
    border-radius: 20px;
    background: var(--main_white);
    padding: 0 16px;
    color: var(--main_black);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    font-family: var(--font-craftwork);
}

.form-inp::placeholder {
    color: var(--placeholder);
}

.form-inp:hover,
.form-inp:focus {
    border-color: var(--main_black);
}

.form-textarea {
    height: 96px;
    width: 100%;
    resize: none;
    background: var(--main_white);
    border: 1px solid var(--placeholder);
    padding: 12px 16px;
    border-radius: 20px;
    color: var(--main_black);
    font-size: 20px;
    line-height: 24px;
    font-family: var(--font-craftwork);
}

.form-textarea::placeholder {
    color: var(--placeholder);
}

.form-textarea:hover,
.form-textarea:focus {
    border-color: var(--main_black);
}