header {
    background-color: rgba(12, 12, 12, 0.5);
    position: fixed;
    width: 100%;
    height: 6%;
    display: table;
    z-index: 1;
}

header svg {
    width: 40%;
}

.cls-1 {
    fill: none;
}

header .cls-2 {
    fill: #fffdfd;
}

header .cls-3 {
    fill: #fff;
}

header .cls-5 {
    fill: #fff;
}

.cls-3 {
    fill-rule: evenodd;
}

.cls-4 {
    clip-path: url(#clip-path);
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.link a {
    display: inline-block;
    color: whitesmoke;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    font-family: Roboto;
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: x-large;
}

.telegram:hover {
    fill: rgb(41, 165, 202);
    transition: 0.6s;
    filter: drop-shadow(0 0 10px rgb(41, 165, 202));
}

.telegram {
    transition: 0.6s;
}

.youtube {
    transition: 0.6s;
}

.youtube:hover {
    fill: rgb(255, 0, 0);
    transition: 0.6s;
    filter: drop-shadow(0 0 10px rgb(255, 50, 50));
}

.vk {
    transition: 0.6s;
}

.vk:hover {
    fill: rgb(25, 68, 114);
    transition: 0.6s;
    filter: drop-shadow(0 0 10px rgb(25, 68, 114));
}

.link a:after {
    background-color: whitesmoke;
    display: block;
    content: "";
    height: 3px;
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    text-shadow: 1px 1px 1px gray;
}

.link a:hover:after,
.link a:focus:after {
    width: 100%;
}

.link a:hover {
    color: whitesmoke;
    text-shadow: 1px 1px 1px gray;
}

.link {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

body {
    overflow-x: hidden;
}

footer {
    height: 10vh;
    background-color: rgb(53, 52, 52);
    width: 100%;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 2%;
    padding-right: 0%;
}

footer a {
    color: rgb(53, 52, 52);
}

footer a:hover {
    color: rgb(53, 52, 52);
}
p{
    text-shadow: 1px 1px 1px gray;
}