@import url('https://fonts.googleapis.com/css?family=Krona+One|Odibee+Sans&display=swap');

body {
  padding: 20px;
}

    .page-wrapper {
      margin-top: 200px;
    }


    .intro {
      background: lightgrey;
      position: fixed;
      top: 30px;
      bottom: 20px;
      left: 20px;
      width: 55%;
      z-index: -1;
    }

    .intro::before {
      content: "";
      background: darkkhaki;
      position: absolute;
      top: 10px;
      bottom: -10px;
      right: -10px;
      left: -10px;
      z-index: -1;
      clip-path: polygon(4% 18%, 95% 0, 78% 100%, 25% 100%);
    }
    .main {
      background: lightgrey;
      margin-left: 60%;
      margin-top: 10px;
    }

    .sidebar {
      background: darkkhaki;
      margin-left: 60%;
    }

    .wrapper u li {
      font-family: 'Krona One';
      padding: 5px;
    }


h1 {
  /* display: inline; */
  color: darkcyan;
  font-family: 'Krona One';
  text-align: center;
  font-size: 60px;
  position: relative;
  top: -10px;
  left: 100px;
  width: 800px;
}

h2 {
  font-family: arial;
  font-size: 30px;
  color: darkcyan;
  margin-left: 10px;
  margin-top: -30px;
}

 h3 {
   font-family: arial;
   font-size: 20px;
   color: darkcyan;
   padding-left: 5px;
   background-image: url(retro-large.jpg)
 }


 p {
   font-family: 'Krona One';
   font-size: 14px;
   color: white;
   /* padding-left: 10px; */
   margin: 15px;
 }


ul li {
  color: white;
  /* background: peru; */
  list-style: none;
  font-family: 'Krona One;'
}

a {
  color: peru;
  font-family: 'Krona One';
  font-size: 12px;
}


              @media (max-width:847px) {

                    .intro {
                      width: 50%;
                    }

                    .main {
                      margin-left: 55%;
                    }

                    .sidebar {
                      margin-left: 55%;
                    }

                h1 {
                  color: white;
                  font-size: 35px;
                  width: 300px;
                  text-align: left;
                  left: 0px;
                  padding: 8px;
                  margin-bottom: 30px;
                }

                h2 {
                  font-size: 20px;
                  margin-top: 40px;
                }

                h3 {
                  font-size: 15px;
                }

                p {
                  font-size: 9px;
                }

                a {
                  font-size: 9px;
                }
                }


                      @media (max-width:375px) {

                              .page-wrapper {
                                margin-top: 800px;
                              }

                              .banner {
                                font-size: 15px;
                                width: 15px;
                                height: 15px;
                                margin-top: 0px;
                                margin-bottom: 0px;
                              }

                              .summary {
                                font-size: 10px;
                                margin-top: 0;
                                margin-bottom: 10px;
                                padding-right: 5em;
                              }

                              .preamble {
                                padding-right: 2em;
                              }

                              .intro {
                                background: lightgrey;
                                width: 100%;
                                height: 20%;
                                margin: 5px;
                                padding-right: 2em;
                              }

                              .intro::before {
                                content: "";
                                background: darkkhaki;
                                position: absolute;
                                top: 10px;
                                bottom: -10px;
                                right: -10px;
                                left: -10px;
                                z-index: -1;
                                clip-path: polygon(4% 18%, 95% 0, 78% 100%, 25% 100%);
                              }

                              .main {
                                margin: 0;
                              }

                              .wrapper {
                                display: grid;
                                width: 100%;
                              }

                              .sidebar {
                                width: 100%;
                                margin: 1px;
                              }

                      header {
                        margin-left: 15px;
                        font-size: 15px;
                      }

                      p {
                        color: darkcyan;
                        font-family: 'Krona One';
                        font-size: 10px;
                        padding: 5px;
                      }

                      h1 {
                        color: white;
                        font-family: 'Krona One';
                        text-align: center;
                        font-size: 38px;
                        top: -5px;
                        left: 15px;
                        width: 300px;
                        margin-bottom: 100px;
                        margin-top: 40px;
                        padding-right: 2em;
                      }

                      h2 {
                        margin-top: -95px;
                        color: darkcyan;
                      }

  /* .design-collection {
    grid-template-columns: 1 / 2;
    grid-template-rows: 1 / 4;
    width: 50%;
  }
  .design-archives {
    grid-template-columns: 2 / 4;
    grid-template-rows: 1 / 2;
  }

  .preamble {
    margin-top: 0;
    width: 300px;
  } */
}