popup.css

body {
    margin: 0px;
}

.container {
    width: 280px;
    /*background: rgb(122,55,55);
    background: linear-gradient(0deg, rgba(122,55,55,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);*/
    background-color: #0f0f0f;
    height: 300px;
}

.Sortby {
    position: absolute;
    border-radius: 8px;
    background-color: #2b2b2b;
    text-decoration: none;
    font-size: 17px;
    left: 30%;
    top:7%;
    padding: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: white; 
    text-align: center;
}

.returnsort{
    position: absolute;
    text-decoration: none;
    font-size: 30px;
    top: 20%;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    color: white; 
    text-align: center;
}

.github {
    position: absolute;
    border-radius: 4px;
    background-color: #2b2b2b;
    text-decoration: none;
    font-size: 17px;
    left: 17%;
    top:50%;
    padding: 5px 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: white; 
    text-align: center;
    transition: 0.5s ease-in-out;
}

.donate {
    position: absolute;
    border-radius: 4px;
    background-color: #2b2b2b;
    text-decoration: none;
    font-size: 17px;
    left: 52%;
    top:50%;
    padding: 5px 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: white; 
    text-align: center;
    transition: 0.5s ease-in-out;
}

.github:hover{
    background-color: red;
}

.donate:hover{
    background-color: red;
}

.version {
    position: absolute;
    color: antiquewhite;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    left: 43%;
    top: 63%;
}

#settings {
    position:absolute; 
    left:88%; 
    top: 88%; 
    width: 30px;
    transition: 0.3s ease-in-out;
}

#settings:hover {
    transform: rotate(-1rad);
}

.div-settings{
    position: absolute;
    font-weight: 400;
    top: 10%;
    left: 22%;
    font-size: 15px;
    color: white;
}

.set-color {
    padding-top: 10px;
}