{% load staticfiles %}
body::-webkit-scrollbar {
  width: 0.5em;
  height:0.5em;}
body::-webkit-scrollbar-track {box-shadow: outset 0 0 2px #1F98C3;}
body::-webkit-scrollbar-thumb {
  background-color: #1F98C3;
	border-radius:30px;
  outline: 2px solid #1F98C3;}
html{
     background-color:black;}
#top{
  top:0px;
               margin-top:0px;
               text-align:left;
               height:120px;
               width:97%;
               padding-top:5px;
               margin-top:1vmax;
               border-bottom:solid 2px #AE7628;}
#head{
               					 display:inline-block;
                         float:right;
                          margin:2% 2%;
                          margin-bottom:2%;
                          background: -webkit-linear-gradient(white,white,#1F98C3,#1F98C3,#1F98C3,white,white);
                          -webkit-background-clip: text;
                          -webkit-text-fill-color: transparent;
               					 font-size:50px;
               					 font-weight:900;
               					 font-family:cursive;}
#head:hover{
               				color:black;
               				text-shadow: 1px 2px 3px #1F98C3, 0 0 1px #1F98C3;
                       background: -webkit-linear-gradient( #AE7628,#AE7628,white);
                       -webkit-background-clip: text;
                       -webkit-text-fill-color: black;}
.notes{
  position:relative;
  top:5px;
}
.profile{
  display:inline-block;
  border:solid 0px grey;
  background:transparent;
  padding:5px 5px;
}
.crop {
        display:block;
        margin:5px auto;
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius:50%;
        border:3px groove teal;
    }
.crop img {
        width: 80px;
        height: 80px;
}

.myname{
  color:teal;
  font-family:arial;
  font-weight:bold;
}
.rdiv{
  display:block;
  background:#1F98C3;;
  width:80%;
  margin:5px auto;
  text-align:center;
  padding:9px 5px;
  border:groove 3px white;
  border-radius:9px;
}
.response{
  color:white;
  font-family:arial;
  font-size:20px;
  font-weight:400;
  text-align:center;
}
.say{
  color:white;
  font-size:18px;
  font-family:cursive;
  line-height:2;
}
#all{
      position:relative;
      padding:5px 80px;
      top:20px;
       border:solid 0px green;
       border-radius:5px;}
#message{
  position:relative;
  display:block;
  width:50vw;
  height:200px;
  margin:5px auto;
  padding:5px 5px;
  border:groove 2px #1F98C3;
  background:#171717;
  color:white;
  font-family:arial;
  font-size:120%;
}
#sbar{
              position:relative;
              display:block;
              margin:5px auto;
              border:#1F98C3 solid 2px;
              border-radius:5px;
              padding:3px 15px;
              color:#1F98C3;
              background-color:#171717;
              font-size:18px;

          }
#sbar:hover{
  background-color:#1F98C3;
  border-color:white;
  color:white;
}
.telegram{
  display:block;
  border:groove 5px #1F98C3;
  border-radius:20px;
  width:300px;
  height:80px;
  overflow:hidden;
  margin:5px auto;
}
.telegram:hover{
  border-color:grey;
}
.telegram img{
  width:300px;
  height:80px;
}
a{text-decoration:none;}
a:hover{ color:yellow;}
.layer{
  position:relative;
  border:solid 0px green;
  margin:10px 5px;
}
.button{
  border:groove 3px #1F98C3;
  border-radius:5px;
  color:#1F98C3;
  font-size:18px;
  font-weight:400;
  background-color:#171717;
  margin:3px 10px;
}
.button:hover{
  background-color:#1F98C3;
  border-color: #1F98C3;
  color:white;
}

.formdiv{
  position:fixed;
  top:0px;
  background:transparent;
  width:100%;
  height:100%;
  z-index:299;
}
#form{
display:none;
border:solid 0px red;
}
.heading{
  font-size:25px;
  color:red;
  font-family:arial;
  font-weight:bold;
}
.form{
  position:relative;
  background:#171717;
  width:500px;
  margin:20% auto;
  padding:10px 10px;
  transform:translateY(-40%);
  padding:5vw auto;
  border:solid 2px #1F98C3;
  border-radius:9px;
  line-height:1;
  text-align:center;
  box-shadow:0px 0px 700px 200px #333;
}
#login{
  display:none;
}
#signup{
  display:none;
}

.form span{
  color:#1F98C3;
}
.label{
  display:block;
  margin:40px auto;
  border:solid 0px black;
  border-radius:9px;
  font-size:15px;
  padding:5px 9px;
  border:groove 2px #1F98C3;
  background:#333;
  color:white;
}
#image{
  margin:0px 100px 0px 170px;
  font-size:12px;
  border-color:transparent;
  background:transparent;
}
#submit{
  border:groove 2px #1F98C3;
  color:#1F98C3;
  background-color:transparent;
}
#submit:hover{
  background-color:#1F98C3;
  border:groove 2px #1F98C3;
  color:white;
}
.x{
  position:relative;
  border:solid 0px red;
  display:inline-block;
  float:right;
  top:-10px;
  left:5px;
  font-size:35px;
  color:#1F98C3;
  font-family:arial;
  font-weight:bold;
  transform:rotate(45deg)
}
.x:hover{
  color:red;
  cursor:pointer;
}
.forgot{
  cursor:pointer;
}
.forgot:hover{
  color:grey;
}
/*...............................................COMMENTS......................................*/
#comments{
     position:relative;
     display:block;
     width:90vw;
     max-height:500px;
     overflow-y:scroll;
     margin:40px auto;
     background-color:black;
     padding:5px 10px;
     border:solid 0px #273149;
   }
.whole_comment{
  border:solid 1px #273149;
  padding:5px 10px;
  line-height:1.8;
}
.name{
  font-size:18px;
  font-family:arial;
  font-weight:400;
  color:white;}
.message{
  font-size:16px;
  color:grey;
  font-family:arial;
}
.c_crop{
  display:inline-block;
  margin:5px auto;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius:50%;
  border:2px groove grey;
}
.c_crop img{
  max-width: 60px;
  max-height: 80px;
}
.admin{
  font-size:18px;
  color:teal;
  font-family:arial;
  font-weight:bold;}
.admin_reply{
  font-family:arial;
  font-size:16px;
  color:teal;}
.date{
  font-family:helvetica;
  font-size:12px;
  color:#273149;
  font-weight:bold;}
#replied{
  position:absolute;
  text-align:center;
  width:90vw;
  left:5vw;
  top:40vmax;
}
#replied_text{
  font-size:3vmax;
  font-family:cursive;
  font-weight:bold;
  color:green;
}
/*...............................for mobile...................................*/



@media only screen and (max-width: 700px) {
#top{
    top:0px;
    height:160px;
    width:97%;
    margin-top:10px;}
#head{
       		right:8%;
       		font-size:32px;}
.rdiv{width:95%;}
.response{font-size:25px;}
.say{
    font-size:18px;
    font-family:arial;
  }

#all{
        position:relative;
        padding:5px 5px;}
#message{
    width:90vw;
    height:250px;
  }
.form{
    position:relative;
    background:#171717;
    width:85vw;
    left:-7px;
    margin:10% auto;
    padding:10px 10px;
    transform:translateY(5%);
    border:solid 2px #1F98C3;
    border-radius:9px;
    line-height:1;
    text-align:center;
    box-shadow:0px 0px 700px 200px black;
  }
  #image{
    margin:0px 100px 0px 70px;
    font-size:12px;
    border-color:transparent;
    background:transparent;
  }