@import 'https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.ttf';
@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

html {
  box-sizing : border-box;
}

*,
*:before,
*:after {
  box-sizing : border-box;
  box-sizing : inherit;
  margin     : 0;
  padding    : 0;
}

html,
body {
  width      : 100vw;
  height     : 100vh;
}

body {
  background      : url(https://pbs.twimg.com/media/Fa2tqtBakAEEutB?format=jpg&name=4096x4096) no-repeat center center fixed;
  background-size : cover;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
  font-family     : 'Open Sans Condensed', sans-serif;
  font-size       : 16px;
  color           : #87CEFA;
  line-height     : 1.8rem;
}

main {
  position        : relative;
  height          : 70vh;
  width           : 70vh;
}

  .content {
    position        : absolute;
    background      : linear-gradient(
                      to bottom,
                      #ffffff 0%,
                      #ffffff00 100%
                    );
    border-radius   : 100%;
    border          : #43545c 1px solid;
    height          : 70vh;
    width           : 70vh;
    transform-style : preserve-3d;
    transition      : all 500ms ease;
  }

    .rotate {
      transform     : rotateY(180deg);
    }

  .frontFace {
    position            : absolute;
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    width               : 100%;
    height              : 100%;
    backface-visibility : hidden;
    text-align          : center;
  }

    .frontFace h1 {
      line-height : 2.5rem;
      animation   : blinker 1s linear infinite;
    }

    @keyframes blinker {
      50% {
        opacity: 0;
      }
    }

  .backFace {
    position            : absolute;
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    width               : 100%;
    height              : 100%;
    backface-visibility : hidden;
    transform           : rotateY(180deg);
    text-align          : center;
  }

    .backFace i {
      font-size       : 5rem;
      margin-bottom   : 1rem;
    }

    .backFace h1 {
      font-size       : 2.2rem;
    }

    .backFace h2 {
      font-size       : 2.2rem;
      margin          : 1rem;
    }

    .backFace small {
      font-size       : 1.2rem;
      padding         : 0.4rem 1.5rem;
      margin          : 0.2rem;
      cursor          : pointer;
      border-top      : #43545c 1px solid;
      border-bottom   : #43545c 1px solid;
      border-radius   : 10px;
    }
      .backFace small:hover {
        background-color  : #43545c;
        color             : #ffffff;
      }

      .backFace small span {
        font-size      : 1.5rem;
        vertical-align : top;
      }

    .backFace h4 {
      font-size     : 0.9rem;
      font-weight   : normal;
    }

      .backFace h4 strong {
        font-style  : italic;
      }

footer {
  font-size     : 1rem;
  text-align    : center;
  padding-top   : 1rem;
}

  .love {
    color           : #d33333;
    font-size       : 1.3rem;
    vertical-align  : middle;
  }

  footer a:link,
  footer a:visited {
    text-decoration : none;
    border-radius   : 100px;
    color           : #87CEFA;
  }

  footer a:hover {
    font-weight     : bold;
  }


@media ( max-height : 350px ){
  body {
    line-height   : 1rem;
  }
    .frontFace h1 {
      font-size   : 0.8rem;
      line-height : 2.5rem;
    }

    .backFace i {
      font-size       : 2rem;
      margin-bottom   : 0.3rem;
    }

    .backFace h1, .backFace h2 {
      font-size       : 1rem;
      margin          : 0.2rem;
    }

    .backFace small {
      font-size       : 0.5rem;
      font-weight     : bold;
      padding         : 0.2rem 0.5rem;
      margin          : 0 0 0.2rem 0;
    }
      .backFace small:hover {
        background-color  : #43545c;
        color             : #ffffff;
      }

      .backFace small span {
        font-size         : 0.7rem;
      }
      
    .backFace h4 {
      font-size   : 0.4rem;
    }

  footer {
    font-size     : 0.5rem;
    padding-top   : 0.5rem;
  }
}