html, body {
    height: 100%;
}

body {
    margin: 0;

    background: linear-gradient(-45deg, #BBD2C5, #a0dbd7, #536976);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

@media screen and (max-width: 852px) {
    body {
        font-size: 14px;
    }

    .center {
        padding: 20px;
    }
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}



.seller {

    font-family: monospace;

    color: #444;



    cursor: text;

}



.holder {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;

}



.center {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.textiboi {

	text-align: center;

	color: #444;

	font-family: monospace;

}



.textiboi:hover {

	color: white;

}

	



.header {

    text-align: center;

    color: #444;

    font-family: monospace;

}



.header a {

    text-decoration: none;

}



.hoverr:hover a 

{

	color: white;

}



.header:hover {

    text-align: center;

    color: white;

    font-family: monospace;

}



.container:hover .seller {

    color: white;

}



.container:hover a {

    color: white;

}



.a {

    text-align: center;

    color: white;

    font-family: monospace;

}



.header:hover a {

    text-align: center;

    color: white;

    font-family: monospace;

}



.icon {

    color: #444;

}



.icon i {

    font-size: 80px;

}



.container {

    text-align: center;

    margin: 5px 20px;



    float: left;

}



a {

    color: #444;

}



.container:hover .icon {

    color: var(--icon-color);

    font-size: 20px;

}



.container:hover .seller {

    color: white;

}



.container:hover a {

    color: white;

}