:root {
    /* *============ ПЕРЕМЕННЫЕ ЦВЕТА body ============ */
    --color-font-body: #990000;
    --color-background-body: #deffe8;
    /* *============================================== */
}

/*! global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 10px;
    font-family: 'Montserrat', serif;
    /* color: #1f373d; */
    color: var(--color-font-body);
    background-color: var(--color-background-body);

}

a {
    text-decoration: none;
    color: #1f373d;
    /* color: var(--color-font-body); */
}

/* header */
header {
    width: 1024px;
    max-width: 100%;
    margin: 10px auto;
    padding: 35px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: 4px double red;
}

h1 {
    flex-grow: 1;
    font-weight: 600;
    font-size: 25px;
    color: rgb(142, 77, 65);
    outline: 1px dashed blue;
}

/* .logo {
    color: rgb(5, 162, 0);
} */

/* nav-menu */
nav {
    /* width: 65%; */
    flex-grow: 3;
    outline: 1px dashed blue;
}

.nav_menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav_menu a,
.join_block {
    font-size: 13px;
    font-weight: 400;
}

/* join_block */
.join_block {
    flex-grow: 1;
    text-align: right;
    outline: 1px dashed blue;
}

.join {
    padding: 0 20px;
    border: none;
    color: var(--color-font-body);
    background: none;
    transition: opacity .3s;
}

.started {
    padding: 14px 25px 13px;
    border: none;
    border-radius: 6px;
    color: var(--color-font-body);
    background: #ffcc01;
    transition: opacity .3s;
}

.join:hover,
.started:hover {
    opacity: 0.7;
    cursor: pointer;
}

/*! КНОПКА (inline-block/flex) */
/*? container-button */
.container-button {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */

    margin: 10px auto;
    padding: 20px;
    width: 70%;
    outline: 4px double teal;
}

.main-text {
    padding: 10px;
    margin-bottom: 10px;

    /* display: inline; */
    /* display: inline-block; */
    /* display: block; */

    background-color: rgb(255, 251, 203);
    outline: 1px solid green;
}

.main-button {
    /* width: 100%; */
    padding: 10px;
    
    /* display: inline; */
    /* display: inline-block; */
    /* display: block; */

    /* align-self: stretch; */
    /* align-self: flex-start; */
    /* align-self: center; */
    /* align-self: flex-end; */
    
    background-color: aqua;
    outline: 1px solid red;
}