                                                                       
     body, html {
  width: 100%;
  height: 100%;
  margin: 10px;
}                                                                        
    
       
    body  {
  background-image: url('about/plaid.jpg');


  background-repeat: repeat;
  background-position:center; 
  height: 100%;
  margin: 0;  
  background-attachment: fixed;
  background-size: 100% 100%;
  justify-content:center;
 
  }       
  
  body img {
    
   width: 50%;
    
  }
  
  h1 {
    
    font-family : 'Silkscreen';
   
  
  }
  
    p {
      font-family:'Arial';}
    
    .everythingtop{
      
    display:flex;
    flex-direction:row;
      text-align: center;
      font-size: 20px;
   
    width:70%;
    border-radius:30px;
      margin: auto;
      padding:10px;
      justify-content:center;
   border:2px solid white;
    background-color: rgba(0, 0, 0, 0.7);
     border-style: dashed;
     margin-bottom:10px;
     
     
      }
      
      .everythingtop img:hover{
          transform: rotate(5deg); 
      }
    

    
    .generalleft {
      
      
      
      display: flex;
      flex-direction: column;
      
      text-align: center;
   
     
     justify-content:center;
  
    
      
    }
    
  
  .generalright {
      
       display: flex;
      flex-direction: row;
      
      text-align: center;
   
   
     justify-content:center;
  
  
    }
    
    
    

     .generalleft div{
       
      
       display:flex;
      
     }
  
   
     
    
  .desc {
    
 
  display:flex;
   flex-direction: column;
   font-family:'Chelsea Market';
    font-size:15px;
 text-align:left;
    color:black;
width:70%;
margin:auto;

  }
  


 .pick{
      
    display:flex;
    flex-direction:row;
      text-align: center;
      font-size: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    width:65%;
      margin: auto;
     padding:1%;
     
   border:2px solid white;
     border-style: dashed;
     margin-bottom:10px;
      margin-top:10px;
     border-radius:30px;
     
      }
      
      .pickmenu{
        
        min-width:20%;
        max-width:20%;
        
       background-color:transparent;
 
    
       
    
        
      }
      
      .pickmenu button:hover {
        
        cursor:pointer;
         transform: rotate(5deg); 
      }
      
      .pickmenu button{
        
        text-align:center;
        justify-content:center;
        padding:5px;
         background-color:#f1f6d9;
        color:black;
        border-radius:30px;
        display:flex;
        flex-direction:column;
       margin: 4px;
         width:100%;
         font-family:'Chelsea Market';
    font-size:18px;
         
      }
      
      
  

.border {
  
  width: 60%;
  height:100px;
  border-radius:20px;
  background: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(0deg, transparent 50%, transparent 50%), linear-gradient(0deg, transparent 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 200px;
  }
}


 
#titl {
  
   background-image: url('about/box1.png');
    background-size: 100% 100%;
      background-repeat: no-repeat;
  
  
}
 
#box1 {
  
  background-image: url('about/box1.png');
    background-size: 100% 100%;
      background-repeat: no-repeat;
  
}

#box2 {
  
 background-image: url('about/box2.png');
    background-size: 100% 100%;
      background-repeat: no-repeat; 
      margin-top:10px;
      padding-left:20px;
 
}





#memes {
  
  width:80%;
  margin:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
 
}

#memes img{
  
  width:200px;
  height:200px;
  margin:5px;
}

#picktitle {
  display:flex;
 flex-direction:column;

 margin:auto;
    
        background-color:#f1f6d9;
        color:black;
       
     
 
 
 
}

#picktitle p{
  
  
  font-size:30px;color:black;margin:auto;text-align:center;
  
}

          .tabcontent {
        
     
         font-family:'Chelsea Market';
    font-size:15px;
        
        min-width:96%;
         text-align:center;
        justify-content:center;
        padding:5px;
         margin:15px;
         border-radius:15px;
          border:1px solid cyan;
          background-color:#f1f6d9;
          
   display:none;
   overflow:hidden;
     
      }




#paleo p{
  
  font-family:'Chelsea Market';
 
  
} 

.column {
   flex-direction:row;
  flex:50%;
 justify-content:center;
 text-align:center;
 padding:5px;
 margin:0px;
}
.column img{
  
width:90%;
 border-radius:17px;
}


#hobb {
  
  background-color: #f1f6d9;
  flex-direction:column;
   font-family:'Chelsea Market';
}

#hobb p {
  font-family:'Chelsea Market'; 
}

#hob {
   background-color: #f1f6d9;
}


#musi {
  flex-direction:column;
  font-family:'Arial';
   background-color:#f1f6d9;
   border:2px solid orange;
}

#musi p{
  font-family:'Arial';

}

.applied-mask {
  mask-image: url("https://mpekamitzio.neocities.org/about/cdtrans.png");
  mask-size: 300px 300px;
  mask-repeat:no-repeat;
}
.mask-source {
  background: url("https://mpekamitzio.neocities.org/about/cdtrans.png");
  background-size: 300px 300px;
}


.cd {
  
 width: 300px;
background-image:url('about/cdoutline.png');
background-size:100% 100%;
background-repeat:no-repeat;
 filter: drop-shadow(2px 2px 2px black);
 margin:auto;
  margin-top:20px;
}

.cd img{
 width:300px;
  
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.rotating {
    display: inline-block;
    animation: rotate 10s linear infinite;
}

.wall {
  
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding:5px;
  justify-content:center;
  
}

.wall img{
  
 border:2px solid black; 
 width:20%;
 height:200px;
 margin:3px;
}



  
  #creat a{
 font-family:'Arial';
  }
