body {
    font-size: 18px;
  font-family: "Inter", sans-serif;
    color: #555;
    padding: 0;
    margin: 0;
  }

  
  .home-header {
    background-color: #8A00EC;
    color: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  

  .home-header h1 {
    font-size: 80px;
    color: #fff;
    margin-bottom: 5px;
    margin-top: 0px;
  }
  
  .home-header p {
    font-size: 24px;
  }
  
  
  .home-header strong {
    color: #fff;
  }
  
  .nav {
    text-align: right;
  }
  
  .nav a {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
    text-decoration: none;
  }
  
    .site-section {
    padding-top: 30px;
padding-bottom: 40px;
    width: 1000px;
display: block;
clear: both;
    margin: 0 auto;
  }

.home-section {
    width: 1000px;
    margin: 0 auto;
}




  h1 {
    font-size: 50px;
    clear: both;
    color: #fff;
    margin-bottom: 5px;
    margin-top: 0px;
  }
  
  h2 {
    color: #111;
    font-size: 40px;
    margin-top: 15px;
    margin-bottom: 30px;
      font-weight: 400;
  }
  
  
  h4 {
    font-size: 32px;
    margin: 0px;
      margin-bottom: 20px;
     color: #111;
      font-weight: 400;
  }


  
  p  {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  

  
  .section {
    width: 1000px;
    margin: 0 auto;
    clear: both;
    display: block;
    padding-top: 100px;
  }

.first-section {
    padding-top: 50px !important;
}

.section p, .section ul {
    max-width: 660px;
    line-height: 1.5;
}
 
  .panel {
    float: left;
    width: 418px;
    height: 198px;
    background-color: gray;
    padding: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 40px;
    font-size: 18px;
  }
  
  .panel h3 {
    margin-bottom: 0px;
    margin-top: 25px;
    font-size: 24px;
  }
  
  .panel p {
    padding-bottom: 20px;
    max-width: 400px
  }
  
  .panel a {
text-decoration: none;
color: inherit;
    
  }
  
  .button {
       color: #222 !important;
      background-color: #fff;
border: 1px solid #222;
    text-decoration: none;
    padding-top: 10px;
      padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50px;
  display: block;
      width: 140px;
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
      
  }
  
  .button:hover {
   background-color: #8A00EC !important;
   border-color: #8A00EC !important;
color: #fff !important;
  }
  
 
    .pink-header {
  }

.pink-header h1 {
color: #8A00EC;
margin-bottom: 32px;
}





  
  .panel-tournaments .button {
    background-color: #F31D64;
    border: 1px solid #F31D64;
  }
  
      .panel-hub {
    background-image: url(images/hub-bg.jpg);
  }
  
       .hub-header {
    background-color: #0095EF;
   color: white;
  }
  
      .panel-hub h3 {
    color: #A224AD;
  }
  
  .panel-hub .button {
    background-color: #A224AD;
    border: 1px solid #A224AD;
  }
  
        .panel-sprint {
    background-image: url(images/sprint-bg.jpg);
  }
  
      .panel-sprint h3 {
    color: #6A38B3;
  }
  
     .sprint-header {
    background-color: #6A38B3;
   color: white;
  }
  
  .panel-sprint .button {
    background-color: #6A38B3;
    border: 1px solid #6A38B3;
  }
  
   .xtra-header {
    background-color: #3C50B1;
   color: white;
  }
  
  
    .panel-xtra {
    background-image: url(images/xtra-bg.jpg);
  }
  
  .panel-xtra h3 {
    color: #3C50B1;
  }
  
  .panel-xtra .button {
    background-color: #3C50B1;
    border: 1px solid #3C50B1;
  }
  
    .panel-archive {
    background-image: url(images/archive-bg.jpg);
  }
  
  .panel-archive h3 {
    color: #0095EF;
  }
  
       .archive-header {
    background-color: #0095EF;
   color: white;
  }
  
  .panel-archive .button {
    background-color: #0095EF;
    border: 1px solid #0095EF;
  }
  
  


  .explanation {
    float: left;
    width: 280px;
      margin-right: 60px;
  }

  
  .example {
    float: left;
    width: 660px;
    display: block;

  }

.border {
    width: 658px !important;
    border: 1px solid #dedede;
}

  .example-mobile {
    float: left;
    width: 208px;
Border: 1px solid #dedede;
    display: block;
      margin-top: 15px;
  }
  
  .mobile-margin {
    margin-right: 15px;
  }
  
  .example-full {
    width: 100%;
    margin-top: 30px;
   
  }

.border1 {
       border: 1px solid #dedede;
}

.border2 {
       border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}


.shadow {

         box-shadow: 0px 1px 3px #999999;
}




  .margin-bottom {
    margin-bottom: 40px;
  }
  
  
  .footer {
   clear: both;
   text-align: center;
   padding-top: 80px;
   padding-bottom: 40px;
  }
  
  .footer a {
   text-decoration: none;
   color: #333;
  }
  
  .footer a:hover {
   color: #8A00EC;
  }
  
  .page-header {
   background-color: #8A00EC;
   padding-top: 15px;
   padding-bottom: 15px;
  }
  
  .page-header a {
   display: block;
   width: 1000px;
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   font-size: 18px;
   margin: 0 auto;
  }
  
  .me {
   width: 300px;
   float: left;
   margin-right: 40px;
   box-shadow: 0px 1px 3px #999999;
  }
   
   
@media only screen and (max-width: 1000px), only screen and (max-device-width: 1000px) {
 
    .home-section {
        width: 700px;
    }   
    .explanation h4 {
        padding-top: 0px;
    }    
   .margin-right {
      margin-right: 0;
   }
   
 .site-section {
   width: 700px;
 }
    

.challenge, .details {
    width: auto;
    clear: both;
    float: none;
    margin: 0px;
}

 
 .home-header {
   padding-top: 40px;
   padding-bottom: 40px;
 }
 
 .page-header a {
   width: 700px;
   
 }
    
 
 
 .panel {
   width: 620px;
   background-size: 100%;
 }
 
 .section {
   width: 700px;
 }
 
 .explanation {
   width: 700px;
   display: block;
   padding-top: 0px;
   padding-bottom: 20px;
 }
 
    .example {
        width: 700px;
        float: none;
    }
    


.border {
    width: 698px !important;
    border: 1px solid #dedede;
}
    
    
 .example-mobile {
   width: 221px;
 }
   
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
   
   
 .site-section {
   width: 280px;

 }
 
    .home-section {
        width: 280px;
    }
    
 .home-header {
   padding-top: 20px;
   padding-bottom: 20px;
 }



 
 .home-header h1, h1 {
   font-size: 36px;
 }
 
 .home-header p, .site-section p, .intro p {
   font-size: 16px;
 }
 
 .home-header a {
   display: none;
 }
 
 .site-section, .first-section {
   padding-top: 30px !important;
 }
 
 



 h2 {
   padding-top: 0px;
   padding-bottom: 0px;
   font-size: 24px;
   margin-bottom: 20px;
 }
 
 .page-header a {
   width: 280px;
   font-size: 14px;
   
 }
 
 
 .panel {
   width: 240px;
   background-size: 100%;
   margin-bottom: 20px;
   padding: 20px;
 }
 
 .panel p {
   font-size: 14px !important;
 }
 
 .panel h3 {
   font-size: 18px;
margin-top: 20px;
 }
 
 .button {
   font-size: 12px;
 }
 
 .section {
   width: 280px;
   padding-top: 50px;
 }
    
    .first-section {
        padding-top: 25px !important;
    }
 
 .explanation {
   width: 280px;
   display: block;
   padding-top: 0px;
   padding-bottom: 20px;
   font-size: 14px;
 }
    

 
 .section p, .section ul {
   font-size: 14px;
 }
 
 .example {
   width: 280px;
 }
    
    
 .example-mobile{
   width: 81px;
     margin-top: 0px;
 }
    
     .example-full{
float: none;
 }
 

    
.border {
   width: 278px !important;
     float: none;
     margin-top: 15px;
 }

 h4 {
   font-size: 22px;
 }
 
 .me {
   margin-bottom: 20px;
 }
   
}