body {
    font-size: 22px;
}

div {
    margin: 10px 10px 10px 0;
}

.quote {
    box-shadow: 3px 2px 3px rgba(128, 128, 128, .5);
    border: 1px solid blue;
    padding: 3px;
    margin: 10px;
    margin-bottom: 25px;
    border-radius: 20px;
}

.bg-lightskyblue {
    background-color: lightskyblue;
}

.bg-lightblue {
    background-color: lightblue;
}

.bg-greenyellow {
    background-color: greenyellow;
}

.separator {
    width: calc(100% - 10px);
    height: 2px;
    color: blue;
    border: 1px solid black;
    left: 5px;
}

.video-block {
    margin: 40px 20px;
    border: 1px solid blue;
    padding: 20px 10px;
    border-radius: 20px;
}

.ital {
    font-style: italic;
}

div.button-adv {
    width: 100%;
    margin: 20px;
    padding: 20px;
    border: 1px solid blue;
    border-radius: 20px;
    background-color: gold;
    box-shadow: 3px 5px 14px 9px white;
    display: inline-block;
    font-weight: bold;
}

div.button-action {
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
    padding: 20px 30px;
    background-color: orange;
    border-radius: 20px;
    width: fit-content;
    font-style: italic;
    font-weight: bold;
    font-size: xx-large;
    box-shadow: 3px 5px 14px 6px blueviolet;
}

div.button-action a {
    text-decoration: unset;
}

@media screen and (max-width: 699px) {
    body.basics {
        width: 100%;
    }

    div.button-adv {
        width: calc(100% - 80px);
    }
}

@media screen and (min-width: 700px) {
    body.basics {
        margin: 0 auto;
        width: 70%;
    }

    div.button-adv {
        width: 38%;
    }
}

@media screen and (min-width: 1100px){
    body.basics {
        width: 1200px;
        margin: 0 auto;
    }

    div.button-adv {
        width: 25%;
    }
}