.clear:after {
    content: " ";
    display: table;
    clear: both;
  }
  
  .clear {
      zoom: 1;	
  }
  
  body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;	
  }
  
  
  header {
      background-color:rgb(93,43,78); 
      background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
      padding-bottom: 30px;

  }
  
  header h1 {
      font-size: 5em;	
      color: white;
      font-weight: bold;
      padding-top: 30px;
      clear: both;
      padding-left: 10px;
      font-family: 'Lobster';
      text-shadow: 0 1px 15px rgba(0, 0, 0, 0.349); 
  }
  
  nav {
      background-color: rgb(25,25,25);
      /* border: 1px solid rgba(255,255,255,.5);	 */
      border-left: none;
      border-right: none;
      box-shadow: 0 1px 40px rgba(0, 0, 0, 0.493);
  }
  nav ul {
      padding: 0;
      margin: 0;	
  }
  nav li {
      float: left;
      padding: 0;
      margin: 0;
      list-style: none;	
  }
  nav a {
      float: left;
      font-size: .8em;	
      color: white;
      font-weight: normal;
      text-decoration: none;
      padding: 10px;
      /* border-right: 1px dashed rgba(255,255,255,.75); */
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
  }
  nav li:last-of-type a {
      border-right: none;	
  }
  nav a:hover {
      background-color: #AC32E4;
  }
  aside h2 {
      font-size: 1.3em;
      margin-top: 10px;	
  }
  aside h3 {
      font-size: 1.1em;
      margin-top: 15px;
  }
  aside p, aside li {
      font-size: .75em;
      margin-top: 10px;	
  }
  .main h2 {
      font-size: 2em;
      margin-top: 10px;	
  }
  .main h3 {
      font-size: 1.5em;
      margin-top: 20px;	
  }
  .main p {
      margin-bottom: 15px;	
  }
  footer {
      margin-top: 15px;
      font-size: .8em;	
      padding: 10px 10px 30px 10px;
      background-color: rgba(0, 0, 0, 0.801);
      color: rgb(204,204,204);
  }
  footer a {
      color: white;	
  }
  /* add tutorial styles below here */
 
nav ul,header h1,footer p,
.contentWrapper{
    max-width: 1200px;
    margin: 0 auto;
}

*{
    box-sizing: border-box;
}
.sidebar1{
    float: left;
    width: 25%;
    padding: 0 20px 0 10px;
}

.sidebar2{
    float: left;
    width: 20%;
    padding: 0 20px 0 20px;
}

.main{
    float: right;
    width: 75%;
    padding: 0 20px;
    border-left: 1px solid #AC32E4;
    border-right: 1px solid #630EF8;
    
}

.columnWrapper {
    float: left;
    width: 80%;
}


footer{
    clear: both;
}



img {
    max-width: 100%;
}
img.half {
    max-width: 100%;
}
img.left {
      float: left;
      margin: 10px 0;
}
img.right {
      float: right;
      margin: 10px 0;
}

@media (min-width:481px) and (max-width:768px){
    .sidebar2{
        float:none;
        width: auto;
        clear: both;
        padding-top: 10px;
        border-top: 1px solid #AC32E4;
    }

    .columnWrapper{
        width: auto;
    }
    .main{
        border-right: none;
    }
}

@media (max-width:480px) {
    .columnWrapper,.main,.sidebar1,.sidebar2{
        float: none;
        width: auto;
    }
    .main{
        border: none;
    }
    .sidebar1,.sidebar2{
        border-top: 1px solid #AC32E4;
        margin: 0;
        padding: 25px inherit;
        background-color: rgba(172, 50, 228, 0.082);
    }
    .sidebar2::after,
    .sidebar1::after{
        content: " ";
        clear: both;
        display:table;
    }

    footer{
        margin-top: 0;
    }

    header h1{
        font-size: 4em;
    }
}