body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    
	h3 {
		margin: 1px;
	}
	
	.main p {
	    width: 50%;
	}
	
	.container p {
	    margin: 1px;
	}
	
	.container ul {
	    margin: 1px;
	}
	
	/* text colors */
    .pasuparetxt {
    color: #33DDAA;
    }

   .filterElements {

      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 20px;
      width: 75%;
      margin: 2px;
      padding-left: 5px;
      padding-right: 5px;
      display: none;
   }
   
   .guriguri {
        
        border-style: solid;
        border-color: #01DFA5;
        border-width: 5px;
   }
   .mygo {
        
        border-style: solid;
        border-color: #3388BB;
        border-width: 5px;
   }
   .avemujica {
        
        border-style: solid;
        border-color: #3f022c;
        border-width: 5px;
   }
   .pasupare {
        
        border-style: solid;
        border-color: #33DDAA;
        border-width: 5px;
   }
   .hhw {
        
        border-style: solid;
        border-color: #FFDD00;
        border-width: 5px;
   }
   .afterglow {
        
        border-style: solid;
        border-color: #E53344;
        border-width: 5px;
   }
   .morfonica {
        
        border-style: solid;
        border-color: #33AAFF;
        border-width: 5px;
   }
   .ras {
        
        border-style: solid;
        border-color: #22CCCC;
        border-width: 5px;
   }
   .roselia {
        
        border-style: solid;
        border-color: #3344AA;
        border-width: 5px;
   }
   .popipa {
        
        border-style: solid;
        border-color: #FF3377;
        border-width: 5px;
   }
   
   .show {
      display: block;
   }
   .container {
      margin-top: 20px;
   }
   .btn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #d6e5ec;
      cursor: pointer;
   }
   .btn:hover {
      background-color: rgb(157, 209, 211);
   }
   .btn.active {
      background-color: rgb(34, 95, 228);
      color: white;
	  font-weight: bold;
   }
   
   .popnbtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #FFDDEE;
      cursor: pointer;
   }
   .popnbtn:hover {
      background-color: #faa6d0;
   }
   .popnbtn.active {
      background-color: #FF3377;
      color: white;
	  font-weight: bold;
   }
   
   .rosebtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #DDDDFF;
      cursor: pointer;
   }
   .rosebtn:hover {
      background-color: #a1a1ee;
   }
   .rosebtn.active {
      background-color: #3344AA;
      color: white;
	  font-weight: bold;
   }
   
   .morfbtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #95d3ff;
      cursor: pointer;
   }
   .morfbtn:hover {
      background-color: #6aabd9;
   }
   .morfbtn.active {
      background-color: #33AAFF;
      color: white;
	  font-weight: bold;
   }
   
   .rasbtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #85fcf9;
      cursor: pointer;
   }
   .rasbtn:hover {
      background-color: #b68afc;
   }
   .rasbtn.active {
      background-color: #22CCCC;
      color: white;
	  font-weight: bold;
   }
   
   .afbtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #FFDDDD;
      cursor: pointer;
   }
   .afbtn:hover {
      background-color: #f99a9a;
   }
   .afbtn.active {
      background-color: #E53344;
      color: white;
	  font-weight: bold;
   }
   
   .pasubtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #DDFFEE;
      cursor: pointer;
   }
   .pasubtn:hover {
      background-color: #95f0c2;
   }
   .pasubtn.active {
      background-color: #33DDAA;
      color: white;
	  font-weight: bold;
   }
   
   .hhwbtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #FFFFDD;
      cursor: pointer;
   }
   .hhwbtn:hover {
      background-color: #e4e48c;
   }
   .hhwbtn.active {
      background-color: #FFDD00;
      color: #898989;
	  font-weight: bold;
   }
   
   .mygobtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #7cceff;
      cursor: pointer;
   }
   .mygobtn:hover {
      background-color: #58b4eb;
   }
   .mygobtn.active {
      background-color: #3388BB;
      color: white;
	  font-weight: bold;
   }
   
   .avebtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #d4489c;
      cursor: pointer;
   }
   .avebtn:hover {
      background-color: #922e6a;
   }
   .avebtn.active {
      background-color: #3f022c;
      color: white;
	  font-weight: bold;
   }
   
   .guribtn {
      border: none;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      outline: none;
      padding: 12px 16px;
      background-color: #97ccbe;
      cursor: pointer;
   }
   .guribtn:hover {
      background-color: #6edfc2;
   }
   .guribtn.active {
      background-color: #01DFA5;
      color: white;
	  font-weight: bold;
   }