@font-face {
    font-family: "FreekyTypewriter";
    font-style: normal;
    font-weight: 400;
    src: local("FreekyTypewriter"),
      url("FreekyTypewriter-fixed.woff") format("woff");
  }
  @import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap");

  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
    color: white;
    box-sizing: border-box;
  }

  body {
    background-image: url("images/tile.jpg");
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    font-family: "FreekyTypewriter", sans-serif;
  }

  #heading {
    position: relative;
    z-index: 10;
    background-image: url("images/bg.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .cont {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  h1 {
    font-family: "FreekyTypewriter", sans-serif;
    font-size: 4rem;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 1), 0px 3px 7px rgba(0, 0, 0, 1),
      3px -5px 11px rgba(129, 20, 20, 1);
    width: 100%;
    text-align: center;
  }
  h2 {
    font-family: "FreekyTypewriter", sans-serif;
    font-size: 2.5rem;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 1), 0px 3px 7px rgba(0, 0, 0, 1),
      3px -5px 11px rgba(129, 20, 20, 1);
    text-align: center;
  }

  h3 {
    font-size: 2rem;
  }

  #strike {
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }
  #strike::after {
    position: absolute;
    top: calc(50% - 0.05em);
    left: 0;
    width: 100%;
    content: "";
    display: block;
    border-top: 7px solid black;
    transform: translateX(-100%);
    transition: transform 2s ease-in-out;
  }

  #strike.strikethrough::after {
    transform: translateX(0);
  }

  a.button, a.button:link, a.button:visited {
    font-family: "FreekyTypewriter", sans-serif;
    font-size: 2rem;
    padding: 5px 50px;
    background-color: black;
    color: white;
    /* border:4px solid transparent;      */
    text-decoration: none;
  }

  a.button:hover, a.button:focus, a.button:active {
    background-color: rgba(129, 20, 20, 0.9);
    /* border: 4px solid black; */
  }
  .card-container {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-content: stretch;
    flex-wrap: wrap;
    padding-bottom: 4rem;        
  }
  .card {
    width: 28%;
    min-width: 300px;
    padding: 1rem;
    text-align: center;
  }

  .main-text {
    font-family: "Cutive Mono", monospace;        
    margin: 0 auto;
    background-image: url("images/text-bg.jpg");
    background-size: 100% 100%;
    max-width: 1200px;
    font-size: 0.75rem;
    padding: 2rem;
  }

  .icon-container {
    font-size: 2rem; 
    width: 100%; 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: space-evenly;  
    padding-top: 3rem;
    padding-bottom: 3rem;  
  }

i {
    padding:1rem;
}
a i, a i:link, a i:visited, .main-text a, .main-text a:link, .main-text a:visited {
    color: white;
}

a i:hover, a i:active, a i:focus, a i:focus-within, a i:focus-visible {
    color: gray;
}

@media screen and (max-width: 480px) {
    
    #heading {
        background-size: auto 100vh;
        background-position: top;
    }
    
    .icon-container {
        font-size: 1rem;
    }

    h1 {
        font-size: 2.75rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }
    i {
        padding:0.75rem;
    }
  }