*{
    margin:0px;
    padding:0px;
    font-family: 'Poppins', sans-serif;
}
.header{
    min-height:100vh;
    width:100%;
    background-image: linear-gradient(rgba(4,9,30,0.3),rgba(4,9,30,0.3)),url("IMG_20210522_135316.jpg");
    background-position: center;
    background-size:cover;
    position:relative;
}
nav{
    display:flex;
    padding:2% 6%;
    justify-content: space-between;
    align-items:center;
}
nav img{
    height:100px;
    width:100px;
    border-radius: 50px 50px;
}
#logo{
    text-decoration: none;
    
}
.nav-links{
        flex:1;
        text-align:right;
}
.nav-links ul li{
    list-style: none;
    display:inline-block;
    padding:8px 12px;
    position: relative;
}
.nav-links ul li a{
     color:#ffff;
     text-decoration:none;
     font-size:13px;
     

}
.nav-links ul li::after{
    content:" ";
    width:0px;
    height:2px;
    background:#f44336;
    display:block;
    margin:auto;
    transition:0.5s;

}
.nav-links ul li:hover::after{
    width:38px;
}
.text-box{
    width:90%;
    color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.text-box h1{
    font-size:62px;
}
.text-box p{
    color:white;
    font-size: 20px;
    margin:10px 0 40px;
}
.hero-btn{
  display:inline-block;
    text-decoration:none;
    color:#fff;
    border:1px solid #fff;
    padding:12px 34px;
    background:transparent;
    position:relative;
    cursor : pointer;

}
.hero-btn:hover{
    border:1px solid #f44336;
    background:#f44336;
    transition:1s;
}
nav .fa{
    display:none;
}
/*-------------media Query-----------------*/
@media(max-width: 460px){
    .text-box h1{
        font-size:20px;
    }
    .text-box{
        top: 70%;
    }
    .nav-links ul li{
        display:block;
    }
    .nav-links{
        position:absolute;
        background:#f44336;
        height:100vh;
        width:200px;
        top:0;
        right:-200px;
        text-align:left;
        z-index: 2;
        transition:1s;
    }
    nav .fa{
        display:block;
        color:#fff;
        font-size: 22px;
        margin:10px;
        cursor:pointer;

    }
    .nav-links ul{
        padding:30px;
    }
    .row{
        flex-direction:column;
    }
    .loginBox{
        font-size: 20px;
    }
    .review-col img{
        margin-left:0px;
        margin-right:15px;
    }
    .cta h1{
        font-size:24px;
    }
 }
 
 /*--------------footer*/
 .footer {
    width:100%;
    background-color: black;
    text-align: center;
    padding:30px 0;
}  
.footer h4{
    margin-bottom: 25px;
    margin-top: 25px;
    font-weight:600;
    color:whitesmoke;
}
.footer p{
    color:whitesmoke;
}
.footer-links ul li{
   list-style: none;
   display:inline-block;
   padding:8px 12px;
   position: relative;
}
.footer-links {
    text-align: center;
    flex: 1;
}
.footer-links ul li a{
   color:whitesmoke;
   text-decoration:none;
   font-size:13px;
   

}
.footer-links ul li::after{
  content:" ";
  width:0px;
  height:2px;
  background:#f44336;
  display:block;
  margin:auto;
  transition:0.5s;

}
.footer-links ul li:hover::after{
  width:50px;
}
.icon .fa{
    color:#f44336;
    margin:0 13px;
    cursor:pointer;
    padding:18px;
}
/*---------------login page---------------------*/
.loginBox 
{
position:absolute;
top:55%;
left:50%;
transform: translate(-50%, -50%);
width:370px;
height:570px;
padding:80px 40px;
box-sizing:border-box;
background-color:rgba(0, 0, 0, 0.5);
border-radius: 10px 10px 10px 10px;
}   
#log
{
margin:0;
padding:0 0 20px;
text-align:center;
color:#1E90FF;
}
 

.loginBox p
{
 padding:0;
margin:0;
font-weight:bold;
color:#fff;
} 
  

.loginBox input
{
  width:100%;
  margin-bottom: 20px;
}


.loginBox input[type="text"], .loginBox input[type="password"]
{
 border:none;
  border-bottom:1px solid #fff;
background-color: rgba(0,0,0,0.5);
outline:none;
height:40px;
color:#fff;
font-size: 16px;
}
  

.loginBox button
{ 
 border:none;
outline:none;
height: 40px;
width: 100%;
color:#fff;
font-size:16px;
background-color: rgb(255,38,126);
cursor:pointer;
border-radius:20px;

} 
  

.loginBox button:hover { background-color:rgba(255,57,9,0.5);}
{
background-color:#efed40;
color:#262626;
}


.loginBox a
{
color:#fff;
font-size:14px;
font-weight:bold;
}
 

::placeholder
{
  color:rgba(255,255,255,0.5);
}
  

.user
{
  width:100px;
   height:100px;
overflow:hidden;
position:absolute;
top:calc(-100px/2);
left:calc(50% - 50px);
border-radius:50% 50%;
}

/*---------------------Explore*--------------------*/
.explore{
    width:80%;
    margin:auto;
    text-align: center;
    padding-top:100px
}
h1{
    font-size:36px;
    font-weight:600;
}
p{
    color:#777;
    font-size: 14px;
    font-weight:300;
    line-height:22px;
    padding:10px;

}
.row{
    margin-top:5%;
    display:flex;
    justify-content:space-between;
}
.explore-col{
    flex-basis: 31%;
    background:#fff3f3;
    border-radius:10px;
    margin-bottom: 5%;
    padding:20px 12px;
    box-sizing:border-box;
}
h3{
    text-align:center;
    font-weight:600;
    margin:10px 0;
}
.explore-col:hover{
     box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}
 /*-----------------users Review--------------------*/
 .review{
     width:80%;
     margin:auto;
     padding-top:100px;
     text-align:center;
 }
 .review-col{
     flex-basis:44%;
     border-radius:10px;
     margin-bottom:5%;
     background: #fff3f3;
     padding:25px;
     cursor: pointer;
     text-align: left;
     display:flex;
 }
 .review-col img{
      height: 40px;
      margin-left:5px;
      margin-right 30px;
      border-radius: 50%;
 }
 .review-col p{
     padding:0;
 }
,.review-col h3{
    margin-top:15px;
    text-align:left;
}
.review-col .fa{
    color:#f44336;
}
/*------------call to action------------------*/


.cta{
    margin:100px auto;
    width:80%;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("IMG_20210520_220717.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding:100px 0;
}
.cta h1{
    color:#fff;
    margin-bottom: 40px;
    padding:0;

}



/*-------------------------features-----------------------*/

.features{
    width:80%;
    margin:auto;
    text-align:center;
    padding-top:50px;
}
.features-col{
    flex-basis: 32%;
    border-radius:10px;
    margin-bottom:30px;
    position:relative;
    overflow:hidden;
}
.features-col img{
    width:100%
}
.layer{
    background: rgba(0,0,0,0.3);
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
.layer:hover{
    background: rgba(226,0,0,0.3);
}
.layer p{
    width:100%;
    font-weight:500;
    color:#fff;
    font-size:16px;
    bottom:0px;
    left:50%;
    transform:translateX(-50%);
    position:absolute;
    opacity: 0;
    transition:1s;
    
}
.layer h3{
    width:100%;
    font-weight:500;
    color:#fff;
    font-size:26px;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    position: absolute;
    opacity: 0;
    transition:0.5s;
}
.layer:hover h3 {
    bottom: 70%;
    opacity:1;
}
.layer:hover p{
    bottom:15px;
    opacity:1;
    margin:auto;
    padding: auto;

}



/*-------------query------------*/
.query{
    font-size: 14px;
    font-family:"titllium Web", sans-serif;
    box-sizing: border-box;
    margin:auto;
    padding-top:50px;
}
.container{
    margin:10px;
    padding:10px;
}
.container a{
    color:red;
    font-weight: bolder;
    text-decoration: none;
}
.container h1{
    font-size: 16px;
    font-weight: bolder;

}
 
.subforum{
    margin-top:20px;
}
 
.subforum-title{
     background-color: #fff3f3;
     padding:5px;
     border-radius: 5px;
     margin:4px;
}
.subforum-row{
    display:grid;
    grid-template-columns: 7% 60% 13% 20%;
}

.subforum-col{
    padding: 10px;
    margin:10px;
    border-radius:5px;
    
}
.center{
    display: flex;
    justify-content:center;
    align-items:center;
}
.subforum-icon {
    font-size: 45px;
    margin-left: 10px;
}
.subforum-description .query{
    margin-block:0;
}
@media screen and(max-width:460)  {
    .container{
        margin:10px;
        padding:10px;
    }
    .subforum-row{
        display:grid;
        grid-template-columns: 25% 75%;
        grid-template-rows: 65% 35%;
    }
    .subforum-icon .fa{
        font-size:25px;
        margin-left: 10px;

    }
    .query{
        font-size:16px;
    }

    .container h1{
        font-size: 18px;
        font-weight: bolder;
    
    }
    .subforum-stats{
        font-size: 12px;
    }
}
/*--------------search bar ------------------*/
.search-box{
    
    margin-top: 20px;
    padding: 40px;
    display:flex;
    justify-content: center;
    
}

.search-box select{
    padding: 10px;
    border: solid 1px #52057b;
    box-shadow:1px 2px 3px #52057b;
}

.search-box input{
    padding: 10px;
    border: solid 1px #52057b;
    box-shadow:1px 2px 3px #52057b;
}

.search-box button{
    padding: 10px;
    background-color:#fff;
    color:#000000;
    border: solid 1px #52057b;
    
}
.search-box .fa{
    margin: 4px;
}

.search-box button:hover{
    background-color: #000000;
    color: #fff;
    box-shadow: 1px 2px 3px #fff;
}

/* search box for smrtphones */
@media screen and (max-width: 460px){
    .search-box input, .search-box button, .search-box select{
        min-width: 400px;
        margin-top: 5px;

    }    

}
.heading-content{
    text-align: center;
    font-size: 25px;
    font-weight: bolder;
 }
 
 .author{
     display: flex;
     flex-direction: row;
     margin-top: 10px;
 }
 
 .author-name{
     font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 20px;
    width: 50%;
 }
 
 #comments{
     background-color: lightgrey;
     width: 100%;
     margin: 10px;
     padding: 10px;
 }
 
 .comment{
     background-color: white;
     margin: 10px;
     padding: 10px;
 }
 
 #edit-button{
     margin-left: 500px;
     float: right;
     height: 40px;
     width: 100px;
     padding: 5px;
     border-radius: 2px;
 }
 
 .post-content{
     word-wrap: break-word;
     margin-top: 20px;
 }
 
 #like-button{
     margin-top: 20px;
     margin-bottom: 10px;
     height: 40px;
     width: 100px;
     padding: 5px;
     border-radius: 2px;
 }
 
 #comment-button{
     margin-top: 20px;
     margin-bottom: 20px;
     height: 40px;
     width: 120px;
     padding: 5px;
     border-radius: 2px;
 }
 
 #showCount{
     margin-bottom: 30px;
 
 }
 
 #allCommentsHeading{
     font-weight: bolder;
     padding-top: 10px;
 }
 
 .comment-container{
     min-height: 0px;
     overflow: hidden;
 }