siesta-lite/examples/react-google-fonts-space/src/Components/Header/Header.css

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

.Header .App__header {
  top: 25px;
  position: fixed;
  left: 0;
  transition: all .3s ease-out; }

.Header .App__Logo {
  color: #000;
  text-decoration: none;
  width: 160px;
  height: 40px;
  display: flex; }
  .Header .App__Logo span {
    display: inline-block;
    width: 50%;
    padding: 20px 8px;
    line-height: 1px;
    font-size: 22px; }
  .Header .App__Logo .App__Logo--First {
    text-align: right;
    background: #FFDE00;
    font-family: 'Oswald', sans-serif;
    font-weight: 700; }
  .Header .App__Logo .App__Logo--Last {
    text-align: left;
    background: #000;
    color: #fff;
    font-family: 'Marck Script', cursive; }
  .Header .App__Logo:hover .App__Logo--First {
    background: #000;
    color: #fff; }
  .Header .App__Logo:hover .App__Logo--Last {
    background: #FFDE00;
    color: #000; }

.Header .App__SocialIcons {
  margin-top: 30px;
  margin-left: 20px; }
  .Header .App__SocialIcons .App__SocialIcons__Link {
    display: inline-block;
    margin-right: 10px;
    background: #FFDE00;
    font-size: 30px;
    padding: 5px 8px;
    transition: background .3s ease-out;
    color: #000; }
    .Header .App__SocialIcons .App__SocialIcons__Link:hover {
      background: #000;
      color: #fff; }