/*********** Colours etc. ***********/
:root {
    --main-green: #4DA167;
    --bg-grey: #F4F4F4;
    --bg-grey-darker: #D2D2D2;
    --text-dark: #000;
    --code-color: #E83E8C;
    --text-light: #7A8691;

    --grey-400: #BDBDBD;
    --grey-800: #424242;

    --footer-bg: #1F2937;
    --footer-text: #9CA3AF;
  
    --navbar-height: 64px;
    --blog-card-height: 20rem;
  }
  
/*********** Fonts ***********/
/* ==========================================================================
   NunitoSans Font Face Definitions
   ========================================================================== */

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* ==========================================================================
   Poppins Font Face Definitions
   ========================================================================== */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

  /*********** Defaults ***********/
  html, body {
    font-size: 16px;
    font-style: normal;
    color: var(--text-dark);
    min-height: 100vh;
    height: 100%;
    margin: 0;
  }
  
  a {
    transition: color 0.2s ease-in-out;
  }
  
  a:hover {
    text-decoration: none !important;
  }
  
  div h2 {
    font-weight: 700;
    text-align: center;
    margin-top: 2rem;
  }
  
  code {
    color: var(--code-color) !important;
  }
  
  form label {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  form input[type="text"],
  form input[type="textarea"],
  form input[type="search"],
  form input[type="email"],
  form input[type="password"],
  form textarea {
    background-color: var(--bg-grey);
    border: 1px solid var(--bg-grey-darker) !important;
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
  }
  
  form input[type="checkbox"] {
    accent-color: var(--main-green);
  }
  
  form h2 {
    font-size: 1.75rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
  }
  
  textarea {
    background-color: var(--bg-grey);
    margin: .5rem;
    border: 1px solid var(--bg-grey-darker) !important;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 1rem;
  }
  
  
  
  form input[type="submit"],
  form button.btn-oval {
    background-color: transparent;
    border: 3px solid var(--main-green);
    border-radius: 50px;
    color: var(--main-green);
    cursor: pointer;
    font-weight: 600;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
  }
  
  input:hover, textarea:hover {
    transition: all 0.1s ease-in-out;
    outline: 1px dashed var(--main-green);
  }
  
  input:focus, textarea:focus {
    transition: all 0.1s ease-in-out;
    outline: 2px solid var(--main-green);
  }
  
  
  /**********************************/
  /*********** Containers ***********/
  /**********************************/
  
  /*********** Navbar ***********/
  .navbar {
    height: var(--navbar-height);
    vertical-align: top;
    display: inline-block;
    background: white;
    z-index: 1;
  }
  
  .navbar-brand {
    color: var(--main-green);
    margin-left: .5rem;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
  }
  
  .navbar-brand:hover {
    color: var(--main-green);
    filter: brightness(0.75);
  }
  
  .navbar-brand img {
    margin-right: .5rem;
  }

  /* Hiding the navbar-brand text 'Greenpants' on small screens */
  /* .navbar-brand-name {
    display: none;
  }

  @media (min-width: 768px) {
    .navbar-brand-name {
      display: inline;
    }
  } */
  
  .nav-item {
    margin-right: .5rem;
  }
  
  .nav-link {
    color: #000;
  }
  
  .nav-link:hover {
    color: var(--main-green);
  }
  
  .nav-labs:hover {
    color: var(--code-color);
  }
  
  .navbar-fill {
    height: var(--navbar-height);
  }
  
  
  /************** Banner **************/
  .banner-container {
    width: 100%;
    padding-top: 0;
    background: white;
    border-bottom: 1px solid var(--bg-grey-darker);
  }
  
  .banner a {
    color: var(--main-green);
    transition: all 0.15s ease-in-out;
  }
  
  .banner a:hover {
    color: var(--main-green);
    filter: brightness(0.8);
    transition: all 0.15s ease-in-out;
  }
  
  .banner {
    max-width: 80%;
    text-align: center;
  }
  
  .banner h2 {
    margin: 0;
    font-weight: 400;
  }
  
  .banner .blog-name {
    color: var(--main-green);
    font-weight: 700;
  }
  
  .banner-divider {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: xx-small;
  }
  
  .banner-divider hr {
    width: 40%;
    border: 1px solid black;
  }
  
  .banner-slogan {
    margin-top: .5rem;
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 200;
  }
  
  .banner-slogan p {
    margin: 0;
  }

  
  /*********** Blog entries ***********/

.blog-heading h2 {
  color: var(--text-dark);
  margin: 0;
  padding: 1.5rem 0;
  background-color: var(--bg-grey);
  text-align: left !important;

  @media (min-width: 1024px) {
    margin-left: 1.5rem !important;
  }

}

.blog-heading h2 .tag {
  /* See JS as well */
  text-transform: capitalize;
}

.blog-container {
  background: var(--bg-grey);
  padding: 1rem .5rem !important;
}

.blog-entries {
  width: 100%;
}


.blog-entry {
  padding: 0 !important;
  margin: 1rem 0.25rem;
  background: white;
  color: var(--text-dark);
  text-decoration: none;
  /* border: 2px solid transparent; */
  border-radius: 8px;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-in-out;

  @media (min-width: 768px) {
    margin: 1rem 1rem;
  }
}
  

.blog-entry:hover {
  transform: translateY(-6px);
  color: var(--text-dark);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 
    0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
  
  .blog-entry-text {
    margin: 1.5rem;
    font-size: 16px;
  }

  @media (max-width: 767px) {
    .blog-entry-text {
      margin: 1.5rem 1rem;
    }
  }
  
  .blog-entry-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  
  .blog-entry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  .blog-entry-title {
    color: black;
    margin: 0;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
  }
  
  .blog-entry-date {
    margin-top: .5rem;
    text-align: left;
    font-size: 14px;
  }
  
  .blog-entry-excerpt {
    font-size: 16px;
    text-align: left;
    margin-bottom: 1.5rem;
  }
  
  /* .blog-entry-btn {
    margin-bottom: .75rem;
    text-align: center;
    font-size: 1.2rem;
  } */

  .blog-entry-readmore {
    margin-bottom: 1rem;
    text-align: left;
    color: var(--main-green);
    font-weight: 600;
  }
  
  .pagination {
    background-color: var(--bg-grey);
    justify-content: center;
    align-items: center;
    padding: 1rem 0 2rem 0;
    font-size: 1.25rem;
    font-weight: 300;
  }
  
  .pagination a {
    padding: 0 .5rem;
    text-decoration: none;
    align-items: center;
    font-weight: 700;
    color: var(--main-green);
    transition: all 0.15s ease-in-out;
  }
  
  .pagination a:hover {
    color: var(--main-green);
    filter: brightness(0.8);
    transition: all 0.15s ease-in-out;
  }
  
  .blog-entry .btn-oval {
    font-size: 1.2rem;
    margin-top: 0rem;
    padding: 0 .75rem;
    border: 2px solid var(--main-green);
  }
  
  /******* Single (post) *********/
  
  .blog-post-container {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg-grey);
  }
  
  .blog-post {
    /* justify-content: center; */
    text-align: left;
    margin: .5rem .5rem 2rem;
    padding: 0 !important;
    background: white;
    border-radius: 8px;
    max-width: 800px !important;
    box-shadow: 
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 
      0 2px 4px -1px rgba(0, 0, 0, 0.06);

    
    h1 {
      font-size: 42px !important;
      font-weight: 700;
      padding-bottom: 1rem;
    }

    h2 {
      text-align: left;
      font-size: 32px !important;
      font-weight: 400 !important;
      padding-bottom: .5rem;
    }

    h3 {
      text-align: left;
      font-size: 28px !important;
      font-weight: 400 !important;
    }

    h4 {
      text-align: left;
      font-size: 24px !important;
      font-weight: 400 !important;
    }

    h5 {
      text-align: left;
      font-size: 22px !important;
      font-weight: 400 !important;
    }

    h6 {
      /* Used exclusively for center quotes */
      text-align: center;
      color: #777 !important;
      font-size: 20px !important;
      font-weight: 400 !important;
    }

    p {
      font-size: 18px;
      padding: 0.25rem 0 0;
    }

    hr {
      margin: 3rem 0 4rem;
      
    }

    blockquote {
      font-size: 18px;
      color: #777;
      border-left: 5px solid #777;
      padding-left: 10px;
    }

    iframe {
      display: block;
      margin: 2rem auto;
      left: 50%;
      width: 100%;
      height: 400px;
    }
  }
  
  .blog-post-contents {
    padding: 0rem 2rem;
  }

  @media (max-width: 767px) {
    .blog-post-contents {
      padding: 0 1rem;
    }
  }
  
  .blog-post-contents a {
    word-wrap: break-word
  }
  
  .blog-post li {
    font-size: 18px;
    padding: 0 0 0.75rem !important;
  }
  
  .blog-post-img {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .blog-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
  
  /* Adjustments for Mobile */
  @media (max-width: 767px) {
    .blog-post-img {
      height: 20rem;
    }
  }
  
  /* Blog image for Desktop */
  @media (min-width: 768px) {
    .blog-post-img {
      height: 26rem;
    }
  }
  
  .blog-post img {
    text-align: center !important;
    align-items: center;
    justify-content: center !important;
    border-radius: 8px;
  }
  
  .blog-post-date {
    font-size: .8rem !important;
    text-align: left !important;
  }

  .tags {
    padding: 0 16px;
    margin-bottom: 2rem;
  }

  .blog-post-tag {
    /* IMPORTANT: all tags MUST be lowercase for Django's filtering to work! */
    text-transform: capitalize;

    font-size: 12px;
    margin-right: 6px;
    margin-bottom: 6px !important;
    padding: 2px 10px;
    border: 2px solid var(--main-green);
    border-radius: 50px;
    color: var(--main-green);
    background-color: transparent;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
    outline: none;
  }

  .blog-post-tag:hover {
    background-color: var(--main-green);
    color: white;
  }
  
  .blog-post-tag:hover:active {
    box-shadow: none;
  }

  .blog-post-text {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    /* Specifically images that appear inside the blog post */
    img.full-width {
      max-height: 400px;
      margin: 0.75rem 0;
      max-width: 100%;
      object-fit: cover;
    }

    img.left {
      float: left !important;
      margin: 0.75rem;
      margin-left: 0;
      max-width: 50%;
      max-height: 400px;
      object-fit: cover;
    }

    img.right {
      float: right !important;
      margin: 0.75rem;
      margin-right: 0;
      max-width: 50%;
      max-height: 400px;
      object-fit: cover;
    }
  }

  .blog-post-pagination {
    padding: 1rem 0 4rem;
  }
  
  .blog-post-text a {
    color: var(--main-green);
    transition: all 0.15s ease-in-out;
    font-weight: 600;
  }
  
  .blog-post-text a:hover {
    color: var(--main-green);
    filter: brightness(0.8);
    transition: all 0.15s ease-in-out;
  }
  
  .blog-post-admin p {
    text-align: center;
  }
  
  .blog-post-text li {
    padding: .25rem 0;
  }
  
  .blog-comments {
    padding: 0 1rem;
  }
  
  .blog-comments input {
    margin: 0 !important;
  }
  
  .blog-comments a {
    color: var(--main-green);
    transition: all 0.15s ease-in-out;
  }
  
  .blog-comments a:hover {
    color: var(--main-green);
    filter: brightness(0.8);
    transition: all 0.15s ease-in-out;
  }
  
  
  /************ Footer ************/
  
  .footer {
    padding-top: 2rem;
    padding-bottom: 1rem;
    background-color: var(--footer-bg);
    border-top: 1px solid var(--footer-text);

    p {
      color: #9CA3AF;
      margin-bottom: 0.5rem;
    }

    a {
      color: #9CA3AF;
    }
    
    a:hover {
      color: #9CA3AF;
      text-decoration: underline !important;
    }

    li {
      color: #9CA3AF;
    }

    h5 {
      color: white;
      font-weight: 600;
      margin: .75rem 0;
    }

    hr {
      margin-top: 2rem;
      margin-bottom: 2rem;
      background-color: #9CA3AF;
      width: 90%;
    }
  }

  .footer-col {
    padding: 1rem 2rem !important;

    @media (min-width: 1200px) {
      padding: 1rem 6rem !important;
    }
  }

  .footer-social {
    font-size: 28px;
    /* padding-right: 4px; */
    transition: all 0.15s ease-in-out;
  }

  .footer-social:hover {
    color: var(--main-green) !important;
  }
  
  .footer a {
    /* color: white; */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
  }
  
  .footer a:hover {
    /* color: white; */
    transition: all 0.2s ease-in-out;
  }
  
  .footer-links a {
    margin: .25rem;
    text-decoration: underline;
  }
  
  .footer a img {
    transition: all 0.15s ease-in-out;
  }
  
  .footer a:hover img {
    filter: brightness(0.9);
    transition: all 0.15s ease-in-out;
  }
  
  .footer-text .logo {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
  }
  
  
  .footer-text-small {
    color: var(--footer-text);
    margin-top: 1rem;
    font-size: 1rem;
  }
  
  /***********************************/
  /*********** Components  ***********/
  /***********************************/
  
  /*********** Fancy green button ***********/
  .btn-oval {
    display: inline-block;
    padding: 5px 10px;
    border: 3px solid var(--main-green);
    border-radius: 50px;
    color: var(--main-green);
    background-color: transparent;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
    outline: none;
  }
  
  .btn-oval:hover {
    background-color: var(--main-green);
    color: white;
  }
  
  .btn-oval:hover:active {
    box-shadow: none;
  }
  
  /*********** Inverted green button ***********/
  .btn-oval-invert, .btn-oval-invert:focus {
    display: inline-block;
    padding: 5px 10px;
    border: 3px solid white;
    border-radius: 50px;
    color: white;
    background-color: transparent;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
    outline: none;
  }
  
  .btn-oval-invert:hover {
    background-color: white;
    color: var(--main-green);
  }
  
  .btn-oval-invert:hover:active {
    box-shadow: none;
  }
  
  /*********** Pink Button ***********/
  .btn-oval-labs, .btn-oval-labs:focus {
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid var(--code-color);
    border-radius: 50px;
    color: var(--code-color);
    background-color: transparent;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
    outline: none;
  }
  
  .btn-oval-labs:hover {
    background-color: var(--code-color);
    color: white;
  }
  
  .btn-oval-labs:hover:active {
    box-shadow: none;
  }
  
  .btn-oval-cv {
    margin-left: 1rem;
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid var(--main-green);
    border-radius: 50px;
    color: var(--main-green);
    background-color: transparent;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
  }
  
  .btn-oval-cv:hover {
    background-color: var(--main-green);
    color: white;
  }
  
  .btn-oval-cv:hover:active {
    box-shadow: none;
  }
  
  button:disabled,
  button[disabled] {
    border-color: #999;
    background-color: #CCC;
    color: #666;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25) !important;
  }
  
  button:disabled:hover,
  button[disabled]:hover {
    border-color: #999;
    background-color: #CCC;
    color: #666;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25) !important;
  }
  
  button:disabled:active,
  button[disabled]:active {
    border-color: #999;
    background-color: #CCC;
    color: #666;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25) !important;
  }
  
  /*********** Text decorations ***********/
  .green {
    color: var(--main-green);
  }
  
  .bold {
    font-weight: 700;
  }
  
  /*********** Animations ***********/
  .bounce {
    -moz-animation: bounce 5s infinite;
    -webkit-animation: bounce 5s infinite;
    animation: bounce 5s infinite;
  }
  
  @keyframes bounce {
    0% {transform: translateY(0);}
    5% {transform: translateY(-.8rem);}
    8% {transform: translateY(0);}
    11% {transform: translateY(-.3rem);}
    14% {transform: translateY(0);}
    100% {transform: translateY(0);}
  }
  
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }
  
  .shake {
    animation: shake 0.4s;
  }
  
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-.25rem);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(.25rem);
    }
  }