:root {
    --fontColor:#ffffff;
    --fontColorLink:#FFEB00;
    --backAction:#3B0380;
    --borderAction:#2D0064;
    --backSection:#250052;
    --backRazdel:#5E08C4;
    --backBody:#3B037F;
}

body,html {
    padding: 0px;
    margin: 0px;
}

body {
    background-color: var(--backBody);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


header,main,footer{
    margin-bottom: 10px;
    color: var(--fontColor);
    padding: 10px;
    background: var(--backRazdel);
}

a {
    color: var(--fontColorLink);
}

.all {
    top: 0px;
    left: 0px;
    position: fixed;
    display: none;
    background-color: #000000aa;
    width: 100vw;
    height: 100vh;
}

.all[active="true"] {
    display: block;
    z-index: 100;
}



.popup {
    padding: 3px;
    position: fixed;
    width: 75vmin;
    height: 75vmin;
    border-radius: 2.5%;
    z-index: 100;
    background-color: var(--backRazdel);
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

p {
    text-align: center;
}