header {
  text-align: center;
  padding: 30px;
  font-family: "Pridi", serif; }
  @media (min-width: 600px) and (max-width: 1024px) {
    header {
      padding: 15px; } }
  @media (min-width: 200px) and (max-width: 600px) {
    header {
      padding: 5px; } }
  header h1 {
    line-height: 1px;
    font-size: 100px;
    font-weight: 900px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      header h1 {
        font-size: 50px; } }
    @media (min-width: 200px) and (max-width: 600px) {
      header h1 {
        font-size: 30px; } }

header h3 {
  font-size: 50px;
  font-weight: 900px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    header h3 {
      font-size: 40px; } }
  @media (min-width: 200px) and (max-width: 600px) {
    header h3 {
      font-size: 25px; } }

.howToUse h4 {
  font-family: "Pridi", serif;
  font-size: 35px; }

.howToUse p {
  font-family: "Roboto", sans-serif; }

.pleaseNote {
  text-align: center;
  padding-bottom: 45px; }
  .pleaseNote h3 {
    line-height: 1px;
    font-family: "Pridi", serif;
    font-size: 55px; }

.pleaseNote p {
  font-family: "Roboto", sans-serif; }

.footer .button {
  background-color: black;
  font-family: "Roboto", sans-serif;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer; }
  @media (min-width: 200px) and (max-width: 600px) {
    .footer .button {
      padding: 10px 20px; } }

.footer {
  width: 100%;
  padding: 50px;
  position: relative;
  left: -5%;
  text-align: center;
  font-size: 18px; }

.proPic {
  width: 18%; }

.hireMe h1 {
  font-size: 65px; }
.hireMe h2 {
  font-size: 35px; }
.hireMe p {
  font-family: "Roboto", sans-serif;
  text-align: center; }

.linkedin {
  width: 2%;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.github {
  width: 2%;
  display: block;
  margin-left: auto;
  margin-right: auto; }

h5 {
  font-family: "Pridi", serif;
  position: relative;
  left: 2.5%;
  font-size: 20px;
  text-align: center; }
  @media (min-width: 600px) and (max-width: 1024px) {
    h5 {
      left: 1.5%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    h5 {
      left: 1%;
      font-size: 15px; } }

h5:nth-of-type(6) {
  left: 28%; }
  @media (min-width: 600px) and (max-width: 1024px) {
    h5:nth-of-type(6) {
      left: 20%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    h5:nth-of-type(6) {
      left: 1%; } }

@media (min-width: 200px) and (max-width: 600px) {
  h5:nth-of-type(5) {
    left: 20%; } }

.profileCard1 {
  position: relative;
  left: 25%;
  transition: all .25s linear;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  width: 50%;
  padding-bottom: 10px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard1 {
      left: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .profileCard1 {
      left: 25.5%; } }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard1 {
      width: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .profileCard1 {
      width: 50%;
      padding-bottom: 5px; } }
  .profileCard1 img {
    width: 100%; }

.profileCard1:hover {
  box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8); }

.profileCard1 h1 {
  text-align: left;
  font-family: "Pridi", serif;
  line-height: 2px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard1 h1 {
      font-size: 22.5px; } }

.profileCard1 h4 {
  text-align: left;
  font-family: "Pridi", serif; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard1 h4 {
      font-size: 12.5px; } }

.profileCard1 .textcontainer {
  padding: 2px 16px;
  text-align: left; }
  .profileCard1 .textcontainer h4 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 19px;
    line-height: 1px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .profileCard1 .textcontainer h4 {
        font-size: 15px; } }

.profileCard1 .textcontainer h6 {
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  line-height: 1px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard1 .textcontainer h6 {
      font-size: 11px;
      line-height: 0.5px; } }

.profileCard1 .textcontainer {
  padding: 2px 16px;
  text-align: left; }
  .profileCard1 .textcontainer p {
    padding-top: -10px;
    font-family: "Roboto", sans-serif;
    border-bottom: 1px solid darkgrey;
    padding-bottom: 20px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .profileCard1 .textcontainer p {
        font-size: 13.5px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  .actionItems {
    line-height: 0.5px; } }
.actionItems .button {
  background-color: black;
  font-family: "Roboto", sans-serif;
  color: white;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .actionItems .button {
      padding: 5px 6px;
      font-size: 9.5px;
      margin: 2px 1px; } }

.profileCard2 {
  position: relative;
  left: 25%;
  transition: all .25s linear;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  width: 50%;
  padding-bottom: 10px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard2 {
      left: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .profileCard2 {
      left: 26.5%; } }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard2 {
      width: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .profileCard2 {
      width: 50%; } }
  .profileCard2 img {
    width: 100%; }

.profileCard2:hover {
  box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8); }

.profileCard2 h1 {
  text-align: center;
  font-family: "Pridi", serif;
  line-height: 2px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard2 h1 {
      font-size: 22.5px; } }

.profileCard2 h4 {
  text-align: center;
  font-family: "Pridi", serif; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard2 h4 {
      font-size: 12.5px; } }

.profileCard2 .textcontainer {
  padding: 2px 16px;
  text-align: center; }
  .profileCard2 .textcontainer h4 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 19px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .profileCard2 .textcontainer h4 {
        font-size: 15px;
        line-height: 1px; } }

.profileCard2 .textcontainer {
  padding: 2px 16px;
  text-align: center; }
  .profileCard2 .textcontainer p {
    padding-top: -10px;
    font-family: "Roboto", sans-serif;
    border-bottom: 1px solid darkgrey;
    padding-bottom: 20px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .profileCard2 .textcontainer p {
        font-size: 13.5px; } }

.profileCard2 .textcontainer .button {
  background-color: black;
  font-family: "Roboto", sans-serif;
  color: white;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard2 .textcontainer .button {
      padding: 5px 6px;
      font-size: 9.5px;
      margin: 2px 1px; } }

.profileCard3 {
  position: relative;
  left: 25%;
  transition: all .25s linear;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  width: 50%;
  padding-bottom: 10px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard3 {
      left: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .profileCard3 {
      left: 25.5%; } }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard3 {
      width: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .profileCard3 {
      width: 50%;
      padding-bottom: 5px; } }
  .profileCard3 img {
    width: 100%; }

.profileCard3:hover {
  box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8); }

.profileCard3 h1 {
  text-align: right;
  font-family: "Pridi", serif;
  line-height: 2px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard3 h1 {
      font-size: 22.5px; } }

.profileCard3 h4 {
  text-align: right;
  font-family: "Pridi", serif; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard3 h4 {
      font-size: 12.5px; } }

.profileCard3 .textcontainer {
  padding: 2px 16px;
  text-align: right; }
  .profileCard3 .textcontainer h4 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 19px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .profileCard3 .textcontainer h4 {
        font-size: 15px;
        line-height: 1px; } }

.profileCard3 .textcontainer {
  padding: 2px 16px;
  text-align: right; }
  .profileCard3 .textcontainer p {
    padding-top: -10px;
    font-family: "Roboto", sans-serif;
    border-bottom: 1px solid darkgrey;
    padding-bottom: 20px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .profileCard3 .textcontainer p {
        font-size: 13.5px; } }

.profileCard3 .textcontainer .button {
  background-color: black;
  font-family: "Roboto", sans-serif;
  color: white;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .profileCard3 .textcontainer .button {
      padding: 5px 6px;
      font-size: 9.5px;
      margin: 2px 1px; } }

.dropDownCard {
  position: relative;
  left: 25%;
  transition: all .25s linear;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  width: 50%;
  padding-bottom: 10px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .dropDownCard {
      left: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .dropDownCard {
      left: 25.5%; } }
  @media (min-width: 600px) and (max-width: 1024px) {
    .dropDownCard {
      width: 35%; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .dropDownCard {
      width: 50%;
      padding-bottom: 5px; } }
  .dropDownCard img {
    width: 100%; }

.dropDownCard img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }

.dropDownCard h4 {
  padding: 10px;
  font-size: 20px;
  font-weight: 900;
  font-family: "Roboto", sans-serif; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .dropDownCard h4 {
      font-size: 15px;
      line-height: 1px; } }

.dropDownCard .collapsible-content {
  padding: 10px; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .dropDownCard .collapsible-content {
      padding: 5px; } }
  .dropDownCard .collapsible-content p {
    font-family: "Roboto", sans-serif; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .dropDownCard .collapsible-content p {
        font-size: 12px; } }

.dropDownCard .collapsible-content .button {
  background-color: black;
  font-family: "Roboto", sans-serif;
  color: white;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .dropDownCard .collapsible-content .button {
      padding: 5px 6px;
      font-size: 9.5px;
      margin: 2px 1px; } }

.dropDownCard .lbl-toggle {
  text-align: left;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  line-height: 40px; }

input[type='checkbox'] {
  display: none; }

.collapsible-content {
  display: none; }

.toggle:checked ~ .collapsible-content {
  display: block; }

.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out; }

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px); }

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.imageCard1 {
  position: relative;
  left: 20%;
  width: 50%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all .25s linear;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4); }
  @media (min-width: 200px) and (max-width: 600px) {
    .imageCard1 {
      left: 15%; } }
  @media (min-width: 600px) and (max-width: 1024px) {
    .imageCard1 {
      left: 26%; } }

@media (min-width: 200px) and (max-width: 600px) {
  .imageCard1 {
    width: 80%; } }

.imageCard1:hover {
  box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8); }

.imageCard1 img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%; }

.imageCard1 .textcontainer {
  padding: 2px 16px;
  text-align: left; }
  .imageCard1 .textcontainer h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 18.5px;
    line-height: 1px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .imageCard1 .textcontainer h1 {
        font-size: 15px;
        line-height: 0.5px; } }
    @media (min-width: 200px) and (max-width: 600px) {
      .imageCard1 .textcontainer h1 {
        font-size: 15px; } }

.imageCard1 .textcontainer h3 {
  font-size: 17px;
  font-weight: 400;
  font-family: "Roboto", sans-serif; }
  @media (min-width: 600px) and (max-width: 1024px) {
    .imageCard1 .textcontainer h3 {
      font-size: 15px; } }
  @media (min-width: 200px) and (max-width: 600px) {
    .imageCard1 .textcontainer h3 {
      font-size: 13px; } }

.iconCard {
  position: relative;
  left: 35%;
  border-radius: 4px;
  width: 30%;
  padding: 20px;
  background-color: #ffffff R255 G255 B255;
  transition: all .25s linear;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4); }
  @media (min-width: 200px) and (max-width: 600px) {
    .iconCard {
      left: 30%; } }
  @media (min-width: 600px) and (max-width: 1024px) {
    .iconCard {
      left: 39.5%; } }
  .iconCard img {
    border-radius: 50%;
    border: solid 2px black;
    width: 100%;
    height: 150px; }
    @media (min-width: 600px) and (max-width: 1024px) {
      .iconCard img {
        height: 200px; } }
  @media (min-width: 600px) and (max-width: 1024px) and (min-width: 200px) and (max-width: 600px) {
    .iconCard img {
      height: 180px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  .iconCard {
    width: 20%; } }
  @media (min-width: 600px) and (max-width: 1024px) and (min-width: 200px) and (max-width: 600px) {
    .iconCard {
      width: 50%; } }

.iconCard:hover {
  box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8); }

.iconCard .text h4 {
  font-family: "Roboto", sans-serif;
  text-align: center; }

.iconCard .text p {
  text-align: center;
  font-family: "Roboto", sans-serif; }

#editor1 {
  display: space-around;
  position: relative;
  height: 400px;
  width: 500px;
  right: -150px; }
  @media (min-width: 200px) and (max-width: 600px) {
    #editor1 {
      height: 300px;
      width: 420px;
      right: -5px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  #editor1 {
    right: -255px; } }

#editor2 {
  display: space-around;
  position: relative;
  height: 310px;
  width: 500px;
  right: -150px; }
  @media (min-width: 200px) and (max-width: 600px) {
    #editor2 {
      height: 310px;
      width: 420px;
      right: -5px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  #editor2 {
    right: -255px; } }

#editor3 {
  display: space-around;
  position: relative;
  height: 325px;
  width: 525px;
  right: -150px; }
  @media (min-width: 200px) and (max-width: 600px) {
    #editor3 {
      height: 320px;
      width: 420px;
      right: -5px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  #editor3 {
    right: -255px; } }

#editor4 {
  display: space-around;
  position: relative;
  height: 455px;
  width: 600px;
  right: -80px; }
  @media (min-width: 200px) and (max-width: 600px) {
    #editor4 {
      height: 300px;
      width: 400px;
      right: -25px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  #editor4 {
    right: -205px; } }

#editor5 {
  display: space-around;
  position: relative;
  height: 225px;
  width: 595px;
  right: -70px; }
  @media (min-width: 200px) and (max-width: 600px) {
    #editor5 {
      height: 300px;
      width: 400px;
      right: -15px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  #editor5 {
    right: -185px;
    height: 245px; } }

#editor6 {
  display: space-around;
  position: relative;
  height: 225px;
  width: 595px;
  right: -100px; }
  @media (min-width: 200px) and (max-width: 600px) {
    #editor6 {
      height: 300px;
      width: 400px;
      right: -25px; } }

@media (min-width: 600px) and (max-width: 1024px) {
  #editor6 {
    right: -200px;
    height: 250px; } }

.pair1 {
  display: flex;
  padding: 25px; }
  @media (min-width: 200px) and (max-width: 600px) {
    .pair1 {
      flex-direction: column; } }

@media (min-width: 600px) and (max-width: 1024px) {
  .pair1 {
    flex-direction: column; } }

.container1 {
  display: flex, column;
  border: solid black; }

.container2 {
  display: flex, column;
  border: solid black; }

.pair2 {
  display: flex;
  padding: 25px; }
  @media (min-width: 200px) and (max-width: 600px) {
    .pair2 {
      flex-direction: column; } }

@media (min-width: 600px) and (max-width: 1024px) {
  .pair2 {
    flex-direction: column; } }

.container3 {
  display: flex, column;
  border: solid black; }

.container4 {
  display: flex, column;
  border: solid black; }

.pair3 {
  display: flex;
  padding: 25px; }
  @media (min-width: 200px) and (max-width: 600px) {
    .pair3 {
      flex-direction: column; } }

@media (min-width: 600px) and (max-width: 1024px) {
  .pair3 {
    flex-direction: column; } }

.container5 {
  display: flex, column;
  border: solid black; }

.container6 {
  display: flex, column;
  border: solid black; }

/*# sourceMappingURL=cards.css.map */