body {
    margin:0;
    background-color:#000;
    color:#fff;
    font-family: "Segoe UI",Arial,sans-serif;
}
.broing {
    position:absolute;
    z-index:1;
    filter:opacity(80%);
    overflow:hidden;
}
.b2 {
    width:200px; height:200px;
}
#uc1 {
top:-51px;
left:-574px;
}
div {
    position:relative;
}
div a {
    color:#fff;
    text-decoration:none;
    padding:12px;
}
div img {
    overflow:hidden;
}
#main {
    height:calc(100vh - 80px);
    overflow:hidden;
    margin:40px;
}
#main div {
    z-index:2;
}
.notlayout {
    max-width:1000px;
    margin:auto;
}
.tit {
    font-size:40px;
    padding:12px;
}
.burton {
    flex-wrap:wrap;
    display:flex;

    flex-direction:row;
}
.cobleg {
    border-width:2px;
    border-color:#fff;
    border-top-style: outset;
    border-left-style: outset;
    display: flex;
    justify-content: space-between;
}
.burton a {
    width:150px;
    flex-grow: 1;
    animation: fg 1s infinite linear;background-size: 200% 200%;
    margin:4px;
    padding:8px;
    font-size:20px;
    border-radius:8px;
    background-color:rgba(0, 0, 0, 0.33);
}
@keyframes fg {0% {background-position: 0% 0%;}50%{background-position: -100% -100%;}100%{background-position: -200% -200%;}}
#chsg {
animation: 	dog 15s linear infinite;
transform-style: preserve-3d;
}
@keyframes dog {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    12.5% { transform: rotateY(360deg) rotateX(45deg); }
    25% { transform: rotateY(720deg) rotateX(90deg); }
    37.5% { transform: rotateY(1080deg) rotateX(135deg); }
    50% { transform: rotateY(1440deg) rotateX(180deg); }
    62.5% { transform: rotateY(1800deg) rotateX(225deg); }
    75% { transform: rotateY(2160deg) rotateX(270deg); }
    87.5% { transform: rotateY(2520deg) rotateX(315deg); }
    100% { transform: rotateY(2880deg) rotateX(360deg); }
}
#chs2 {
animation: 	cat 15s linear infinite;
transform-style: preserve-3d;
}
@keyframes cat {
    0% { transform: rotateY(90deg) rotateX(0deg); }
    12.5% { transform: rotateY(450deg) rotateX(45deg); }
    25% { transform: rotateY(810deg) rotateX(90deg); }
    37.5% { transform: rotateY(1170deg) rotateX(135deg); }
    50% { transform: rotateY(1530deg) rotateX(180deg); }
    62.5% { transform: rotateY(1890deg) rotateX(225deg); }
    75% { transform: rotateY(2250deg) rotateX(270deg); }
    87.5% { transform: rotateY(2610deg) rotateX(315deg); }
    100% { transform: rotateY(2970deg) rotateX(360deg); }
}
/* fuck off im not using variables*/
.blu {
    background-image:linear-gradient(rgba(0, 0, 255, 0),rgb(0, 0, 255),rgba(0, 0, 255, 0));
}
.regd {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#e60012,rgba(0, 0, 0, 0));
}
.yello {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#fefb00,rgba(0, 0, 0, 0));
}
.geen {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#107c10,rgba(0, 0, 0, 0));
}
.glorple {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#5865f2,rgba(0, 0, 0, 0));
}
.pretty {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#ff00ff),rgba(0, 0, 0, 0);
}
.almost-blu {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#0085ff,rgba(0, 0, 0, 0));
}
.wyte {
    background-image:linear-gradient(rgba(0, 0, 0, 0),#9e9e9e,rgba(0, 0, 0, 0));
}