child css not overriding parents and i dont know why

scaredtoobig.jsx

 const EmojiGlamor = glamorous.div(
  {
    position: 'absolute',
    backgroundColor: 'red',
    borderRadius: "20px",
    marginTop: '-20px',
    marginLeft: '10px',
    marginRight: '10px'
  },
  ({size})=>({
    fontSize: size
  }),
  ({shape})=>({
    width: shape,
    height: shape*1.2
  }),
  ({offsetleft})=>({
    left: offsetleft
  }),
  ({offsettop})=>({
    top: offsettop
  }),
  ({font})=>({
    fontSize: font
  })
);

const EmojiScared = glamorous.div(
  {
    position: 'absolute',
  },
  ({font})=>({
    fontSize: font
  })
)
 
 
 <Motion style={{fontspring: spring(mobxStore.tornadoplaceholdervisible ? 50 : 0),
               scaredfontspring: spring(mobxStore.tornadoplaceholdervisible ? 20:0)}}
                onRest={()=>this.tornadoplaceholderfinished()}
               >
                  {style =>
                    (
                      <div>
                        <EmojiGlamor
                         size={`${style.fontspring}px`}
                         offsetleft={`${100-0.5*style.fontspring}px`}
                         offsettop={`${100-0.5*style.fontspring}px`}
                         shape={`${style.fontspring}px`}
                        >
                          omg why would you do that?
                          <EmojiScared
                            size={`${style.scaredfontspring}px`}
                          >
                          	&#x1F628;
                          </EmojiScared>
                        </EmojiGlamor>
                      </div>
                    )
                  }
                </Motion>