* {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

body {
    /* background-color: rgb(200, 100, 100); */
    background-image: linear-gradient(0deg,       rgba(187, 70, 54, 0.6) 0% 25%, rgba(255, 204, 204, 0.6) 25% 75%, rgba(187, 70, 54, 0.6) 75% 100%),       linear-gradient(90deg,         rgba(187, 70, 54, 0.6) 0% 25%, rgba(255, 204, 204, 0.6) 25% 75%, rgba(187, 70, 54, 0.6) 75% 100%         );
    background-size: 101px 101px,101px 101px;

}

#ball {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 20rem;
    width: 20rem;
    transform: translate(-50%, -50%);
    background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 47%, rgba(228,228,228,1) 52%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);
    color: rgb(150, 50, 50);
    text-align: center;
    line-height: 20rem;
    border-radius: 50%;
    font-family:'Courier New', Courier, monospace;
    font-weight: bolder;
    font-size: 2rem;
    transition: all 100ms ease-in-out;
    box-shadow: -1px -1px 20px 7px rgba(0,0,0,0.26);
    -webkit-box-shadow: -1px -1px 20px 7px rgba(0,0,0,0.26);
    -moz-box-shadow: -1px -1px 20px 7px rgba(0,0,0,0.26);
}

#ball:hover {
    transform: translate(-50%, -50%) scale(1.1);
    cursor: pointer;
}