:root {
    --main-font-family: 'Nunito Sans', sans-serif;
    --width-of-extension: 300px;
    --main-bg-color:  linear-gradient(90deg, #ff4580 0%, #ff4d64 100%);
    --white-text-color:  white;
    --main-font-size: 16px;
    --main-padding: 16px;
    --main-border-radius: 5px;
    --main-text-color: rgba(64, 81, 102, 0.96);
}
body {
    margin: 0;
    font-family: var(--main-font-family);
    color: var(--main-text-color);
}
header {
    background: var(--main-bg-color);
    width: 100%;
    height: 200px;
    color: var(--white-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    z-index: 100;
    top: -130px;
}
.header-inner {
    height: 70px;
    position: sticky;
    top: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0;
}
@media (max-width: 1299px) { 
    main,
    footer {
        max-width: 700px;
        width: calc(100% - var(--width-of-extension));
        padding: var(--main-padding);
    }
}
@media (min-width: 1300px) { 
    main,
    footer {
        max-width: 700px;
        width: calc(100% - 2 * var(--width-of-extension));
        margin: auto;
        padding: var(--main-padding);
    }
}
section {
    width: 100%;
}
section > h2 {
    color: #444;
}
section > input, section > textarea {
    color: var(--main-text-color);
}
input.title, textarea.raw_html {
    width: calc(100% - 12px);
    min-height: 40px;
    border: 1px solid #cccccc;
    outline: 0;
    border-radius: var(--main-border-radius);
    font-size: var(--main-font-size);
    padding: 0px 5px;
}
.primary-button {
    background: var(--main-bg-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-radius: var(--main-border-radius);
    color: var(--white-text-color);
    font-size: var(--main-font-size);
    cursor: pointer;
    padding: var(--main-padding);
}
iframe {
    width: 100%;
    height: 100%;
}