body {
     width:100%;
     max-width:800px;
     margin:0 auto;
     font-family:sans-serif;
     background:#222;
     color:white;
   }
   
   .container {
     width:100%;
     max-width:800px;
     margin:0 auto;
   }
   
   .head {
    width:100%;
    max-width:300px;
    margin:0 auto;
    margin-top:20px;
    border:0px solid white;
   }.head h2{
     font-weight:400;
     font-size:px;
   }
   
   .main{
    width:100%;
    max-width:300px;
    margin:0 auto;
    border-radius:15px;
    background:#424242;
    border-top:2px solid silver;
    border-bottom:2px solid silver;
    padding-bottom:30px;
    margin-bottom:30px;
   }
   
   .main .user {
    width:100%;
    max-width:250px;
    margin:0 auto;
    background:#222;
    padding:10px;
    border-radius:0px 0px 10px 10px;
   }.main .user h4{
    margin-top:0;
   }.main .user p{
     font-size:12px;
     margin:0;
     padding:0;
   }.main .user p button{
     border:1px solid grey;
     background:silver;
     color:white;
     cursor:pointer;
   }.main .user p b{
     color:grey;
   }
   
   
   .main .temp {
     width:100%;
     max-width:250px;
     margin:0 auto;
     background:#222;
     padding:10px;
     border-radius:10px;
     margin-top:20px;
   }.main .temp h4{
    margin-top:0;
   }.main .temp form{
    background:linear-gradient(to right, #424242, #616161,#212121);
    padding:10px;
    border-radius:5px;
    border-right:2px solid silver;
    border-left:0px solid silver;
   }.main .temp form button{
    padding:5px;
    background:grey;
    color:white;
    border-radius:10px;
    border:1px solid white;
    margin-bottom:10px;
   }
   
   
   .main .link {
    width:100%;
    max-width:250px;
    margin:0 auto;
    background:#222;
    padding:10px;
    border-radius:10px;
    margin-top:20px;
   }.main .link h4{
     margin-top:0;
   }.main .link div{
    width:100%;
    max-width:110px;    
    border:0px solid silver;
    margin-bottom:0px;
    font-size:10px;
    display:flex;
    justify-content:space-between;
   }.main .link div a{    
    color:royalblue;
    text-decoration:none;
    font-weight:bold;
    margin-top:12px;
   }.main .link div form{
     width:px;
     display:flex;
     border:0px solid red;
   }.main .link div form button{
     background:none;
     border:0px;
   }
   
   
   
   
   .main .activity {
   width:100%;
   max-width:250px;
   margin:0 auto;
   background:#222;
   padding:10px;
   border-radius:10px;
   margin-top:20px;
   }.main .activity h4{
   margin-top:0;
   }.main .activity table{
   width:100%;
   max-width:250px;    
   border:0px solid silver;
   margin-bottom:0px;
   overflow:hidden;
   font-size:6px;
   }.main .activity table tbody{
    border:01px solid white;
   }.main .activity table tbody tr{
    border:01px solid white;
   }.main .activity table tbody tr td form button{
     font-size:5px;
     font-weight:bold;
     background:red;
     border:0px;
     color:white;
   }
   
   
 .main .upload {
 width:100%;
 max-width:250px;
 margin:0 auto;
 background:#222;
 padding:10px;
 border-radius:10px;
 margin-top:20px;
 }.main .upload h4{
 margin-top:0;
 }.main .upload form{
 border-radius:3px;
 border:0px solid white;
 padding:10px;
 }.main .upload form button{
 width:100px;
 margin-top:5px;
 background:chocolate;
 color:white;
 font-weight:bold;
 border-radius:4px;
 border:0px;
 padding:10px;
 }.main .upload code {
 background:grey;
 color:black;
 margin-bottom:10px;
 display:block;
 padding:10px;
 font-size:12px;
 border-radius:5px;
 }.main .upload p{
 font-size:10px;
 text-align:center;
 }
 
 
 footer{
 width:100%;
 max-width:300px;
 margin:0 auto;
 border-radius:15px 15px 0px 0px;
 background:#424242;
 border-top:2px solid silver;
 padding-bottom:10px;
 }footer p{
 width:100%;
 max-width:250px;
 margin:0 auto;
 margin-top:10px;
 font-size:13px;
 }footer .l{
 width:100%;
 max-width:200px;
 margin:0 auto;
 border:0px solid white;
 display:flex;
 justify-content:space-around;
 margin-top:20px;
 display:none;
 }footer .l a{
 display:block;
 }footer .l a button{
 background:none;
 border:0px;
 }
 
 


























/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */
/* media screens */

@media (min-width:700px) {
  body {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    font-family:sans-serif;
    background:#222;
    /* background:green; */
    color:white;
  }
  
  .container {
    width:100%;
    max-width:1000px;
    margin:0 auto;
  }
  
  .head {
   width:100%;
   max-width:500px;
   margin:0 auto;
   margin-top:20px;
   border:0px solid white;
  }.head h2{
    font-weight:400;
    font-size:px;
  }
  
  .main{
   width:100%;
   max-width:500px;
   margin:0 auto;
   border-radius:15px;
   background:#424242;
   border-top:2px solid silver;
   border-bottom:2px solid silver;
   padding-bottom:30px;
   margin-bottom:30px;
  }
  
  .main .user {
   width:100%;
   max-width:150px;
   height:100px;
   margin:0 auto;
   background:#222;
   padding:10px;
   border-radius:0px 0px 10px 10px;
  }.main .user h4{
   margin-top:0;
  }.main .user p{
    font-size:12px;
    margin:0;
    padding:0;
  }.main .user p button{
    border:1px solid grey;
    background:silver;
    color:white;
    cursor:pointer;
  }.main .user p b{
    color:grey;
  }
  
  
  .main .temp {
    width:100%;
    max-width:250px;
    margin:0 auto;
    background:#222;
    padding:10px;
    border-radius:10px;
    margin-top:10px;
  }.main .temp h4{
   margin-top:0;
  }.main .temp form{
   background:linear-gradient(to right, #424242, #616161,#212121);
   padding:10px;
   border-radius:5px;
   border-right:2px solid silver;
   border-left:0px solid silver;
  }.main .temp form button{
   padding:5px;
   background:grey;
   color:white;
   border-radius:10px;
   border:1px solid white;
   margin-bottom:10px;
  }

  /* flexing user cont and temp cont on screen chnage */
  .flex-user-and-temp{
    display:flex;
  }
  /* flexing user cont and temp cont on screen chnage */
  
  

  .main .link {
   width:100%;
   max-width:150px;
   margin:0 auto;
   background:#222;
   padding:10px;
   border-radius:10px;
   margin-top:20px;
  }.main .link h4{
    margin-top:0;
  }.main .link div{
   width:100%;
   max-width:110px;    
   border:0px solid silver;
   margin-bottom:0px;
   font-size:10px;
   display:flex;
   justify-content:space-between;
  }.main .link div a{    
   color:royalblue;
   text-decoration:none;
   font-weight:bold;
   margin-top:12px;
  }.main .link div form{
    width:px;
    display:flex;
    border:0px solid red;
  }.main .link div form button{
    background:none;
    border:0px;
  }
  
  
  
  
  .main .activity {
  width:100%;
  max-width:250px;
  margin:0 auto;
  background:#222;
  padding:10px;
  border-radius:10px;
  margin-top:20px;
  }.main .activity h4{
  margin-top:0;
  }.main .activity table{
  width:100%;
  max-width:250px;    
  border:0px solid silver;
  margin-bottom:0px;
  overflow:hidden;
  font-size:6px;
  }.main .activity table tbody{
   border:01px solid white;
  }.main .activity table tbody tr{
   border:01px solid white;
  }.main .activity table tbody tr td form button{
    font-size:5px;
    font-weight:bold;
    background:red;
    border:0px;
    color:white;
  }
  
  /* flex link cont and activity cont when screen change */
  .flex-link-and-activity{
    width:100%;
    max-width:470px;
    margin:0 auto;
    display:flex;
  }
  /* flex link cont and activity cont when screen change */

  
.main .upload {
width:100%;
max-width:460px;
margin:0 auto;
background:#222;
padding:10px;
border-radius:10px;
margin-top:20px;
}.main .upload h4{
margin-top:0;
}.main .upload form{
border-radius:3px;
border:0px solid white;
padding:10px;
}.main .upload form button{
width:100px;
margin-top:5px;
background:chocolate;
color:white;
font-weight:bold;
border-radius:4px;
border:0px;
padding:10px;
}.main .upload code {
background:grey;
color:black;
margin-bottom:10px;
display:block;
padding:10px;
font-size:12px;
border-radius:5px;
}.main .upload p{
font-size:10px;
text-align:center;
}


footer{
width:100%;
max-width:300px;
margin:0 auto;
border-radius:15px 15px 0px 0px;
background:#424242;
border-top:2px solid silver;
padding-bottom:10px;
}footer p{
width:100%;
max-width:250px;
margin:0 auto;
margin-top:10px;
font-size:13px;
}footer .l{
width:100%;
max-width:200px;
margin:0 auto;
border:0px solid white;
display:flex;
justify-content:space-around;
margin-top:20px;
display:none;
}footer .l a{
display:block;
}footer .l a button{
background:none;
border:0px;
}
}