*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #222; /*незабвай про коми*/}

header, footer{
    width: 100%;
    height: 80px;
    text-align: center;
    background: #000000;
    color: #fff;
    line-height: 80px;
    float: left;

}
header{
    border-bottom: 4px solid gray;
    margin-bottom: 52px;
    z-index: 2;
    position: relative;
}

.nav{
    list-style: none;
    display: block;
    width: 50%;
    margin-left: 25%;
    float: left;
    text-align: center;
    margin-bottom: 50%;    
}
.nav li:hover{
    color: red;
    background: #333;
    border-radius: 50px;
    cursor: pointer;
}
.nav li{
    display: inline;
    background: #fff;
    border: 1px solid gray;
    padding: 0 20px;
}
.nav li:not(:last-of-type){
    margin-right: 20px;
}

main {
    width: 40%;
    margin-left: 10%;
    background: #ffffff;
    padding: 20px 2.5%;
    float: left;
}
aside{
    width: 20hv;
    background: #fffffffc;
    padding: 20px 2.5%;
    /* border: 1px solid silver; */
    float: left;
    position: relative;
    /* top: -50px; */
    z-index: 1;
}
    
#add-sp{
    background: red;
    color:  white;
    text-align: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 100px;
    left: 75px;
    cursor: pointer;
}

#add-sp:hover{
    background: rgb(0, 255, 76);
}

footer{
    border-top: 4px solid gray;
    margin-top: 50%;
}