:root {
    --left-width: 12%;
    --left-min-width: 250px;
    --right-width: 88%;
    --margin-left-right: 30px;
    --real-width: 40%;
    --real-padding: 20px;
    --real-border-width: 3px;
    --real-border-radius: 5px;
    --real-bg-color: #f9f9f9;
    --container-width: 600px;
    --container-height: 400px;
    --container-margin-top: 100px;
    --container-padding: 30px;
    --container-border-radius: 8px;
    --container-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.container-compont {
    display: flex;
    width: 100%;
    height: 100%;
}

.container-compont-left {
    width: var(--left-width);
    min-width: var(--left-min-width);
    height: 100%;
    float: left;
}

.container-compont-right {
    width: var(--right-width);
    height: 100%;
    float: right;
    margin-left: var(--margin-left-right);
    margin-right: var(--margin-left-right);
}

.real {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--real-width);
    transform: translate(-50%, -50%);
    padding: var(--real-padding);
    border: var(--real-border-width) solid #ccc;
    border-radius: var(--real-border-radius);
    background-color: var(--real-bg-color);
}

.real h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.real a {
    color: blue;
    text-decoration: none;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--container-width);
    height: var(--container-height);
    margin: 0 auto;
    margin-top: var(--container-margin-top);
    background-color: #fff;
    padding: var(--container-padding);
    border-radius: var(--container-border-radius);
    box-shadow: var(--container-box-shadow);
}