@import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdu.css); 

/********* FADER *********/ 

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    background: white;
    animation-duration: 1000ms;
    animation-timing-function: ease-in-out;
    }

#fader:before {
    content: 'fade'
    }

@keyframes fade-out {
    from { opacity: 1 }
    to { opacity: 0 }
    }

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
    }

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
    }

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
    }

/********* *********/ 


html body{
    margin:0;
    
}

#css_toggle { 
    width: 25px; 
    height: 25px; 
    background: black; 
    border-radius: 50%; 
    border-color:black; 
    }
    
    a {
        text-decoration:none;
    }
    .pp{
    font-family: 'Noto Nastaliq Urdu', serif; 
    }
    
/****************************************************************************/ 
/********************MAX WIDTH 558PX START***********************************/ 
/********************MAX WIDTH 558PX START***********************************/ 
/********************MAX WIDTH 558PX START***********************************/ 
/****************************************************************************/ 

@media only screen  and (max-width:700px) {



.navbar {
  overflow: hidden;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  background:white;
  }  


/****************************************************************************/
/*******************************HOME PAGE *********************************/
/****************************************************************************/


#mainlogo{
    width:90px;
    margin-top:10%;
    margin-right:8%;
}

.homecontent {
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content:space-between;
    align-items:center;
    height:80vh;
    }
    
.vertical-menu a {
    color: black;
    padding: 10px;
    text-decoration: none;
    font-family:'Roboto';
    font-size:16px;
    display:block;
    }
    
.namelogo{
    letter-spacing:3px;
    padding-top:30px;
    padding-bottom:20px;
}

.vertical-menu-w{
    margin-top:50px;
    width:50%;
    text-align:center;
}

.vertical-menu-w a {
    color: black;
    display: block;
    padding: 22px;
    padding-bottom:30px;
    text-decoration: none;
    font-family:'Roboto';
}

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/


/****************************************************************************/ 
/******************************ABOUT PAGE************************************/ 
/****************************************************************************/


.aboutlogo{
    text-align:center;
    width:60px;
}

.aboutlogocon{
      width:90%;
       text-align:center;
       padding-top:25%;
  }

.aboutxt {
    width:80%;
    font-family:'Roboto';
    font-size:15px;
    margin:auto;

    }

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/


/****************************************************************************/ 
/******************************CONTACT PAGE**********************************/ 
/****************************************************************************/

.contactinfo{
    width:80%;
    text-align:center;
    flex-grow:1;
    font-family: "Roboto";
    font-size:22px;    
}
  
.infocon{
    font-family:"Roboto";
    }

.formcontainer{
    font-family:"Roboto";
    text-align:center;
} 
  label{font-family:"Roboto";
      padding:5px;
      text-align:left;
  }
  
 
    
  

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/


/****************************************************************************/
/*******************************404 PAGE*************************************/ 
/****************************************************************************/
 
   
.redirectcontent {
    width:100%;
    text-align:center;
    padding-top:40%;
}

.redirectlinks {
    display:flex;
    justify-content:space-around;
    margin-top:15%;
}

.redirecta {
    padding:0px;
    font-family:'Roboto';
    display:inline-block;
    font-size:20px;
    width:10%;
    }


/****************************************************************************/
/****************************************************************************/ 
/****************************************************************************/


/****************************************************************************/ 
/***************************PROJECTS PAGE************************************/ 
/****************************************************************************/

.projcontainer {
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-between;
    width:80%;
    margin:auto;
      text-align:center;
      text-decoration:none;
    font-size:14px;
    font-family:"Roboto";
}

.projectsectioncontent{
  display:flex;
  flex-direction:column;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  padding-top:5%;
  justify-content:space-between;
}

.projsectiontitle{
    color:black;
}

.projimg {
    -webkit-filter: grayscale(100%); 
    transition: filter .3s ease-in-out;
    filter: grayscale(100%);
    width:120px;
}

.projimg:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%); 
}

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/


/****************************************************************************/ 
/***************************ARTICLES PAGE************************************/ 
/****************************************************************************/

.artimg img{
    text-align:center;
    max-width:300px;
    margin:auto;
}

  .articlecontent {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    padding-top:2%;
}

.articletxt{
        font-family:"Vollkorn";
    margin-left:auto;
    margin-right:auto;
    font-size:19px;
}



/****************************************************************************/
/****************************************************************************/
/****************************************************************************/


h2{font-size:30px;
    font-family:"Shrikhand";
}
h1{font-family:"Shrikhand";}


h3{font-size:24px;
    font-family:"Shrikhand";
}

.tmkoc{
    font-family:"Roboto";
}


 #css_toggle { 
    width: 25px; 
    height: 25px; 
    background: black; 
    border-radius: 50%; 
    border-color:black; 
    margin-top:20px;
    }
     
      
.sectioncontent {
    display:flex;
    flex-direction:column;
    width:100%;
    padding-top:5%;
    justify-content: center;
    align-items: center;
    }

  
  .sectionsubtitle{
      text-align:center;
      margin-top:0px;
  }


/****************************************************************************/ 
/******************************POEMS PAGE************************************/ 
/****************************************************************************/
  .sectiontitle{
    text-align:center;
    margin-bottom:50px;
   
    
}
  
.poemsectioncontent{
        width:100%;
        display:flex;
        flex-direction:column;
        justify-content:space-around;
        align-items:center;
         margin-top:50px;
}
    .poemsectioncontentest{
        width:100%;
        display:flex;
        flex-direction:column;
        justify-content:space-around;
        align-items:center;
        margin-top:50px;
}    
    
.pcontent{
        margin-top:14%;
        margin-bottom:8%;
        text-align:center;
}

.poemcontainer{
        width:85%;
        margin:auto;
        font-family:"Vollkorn";
        font-size:15px;
}
  
.ptext{
    font-family:"Vollkorn";
    line-height:1.5;
    margin-top:13%;
    display:inline-block;
    text-align:left;
}

.poembutton{
    background-color:white;
    border: none;
    padding:10px;
    font-size:15px;
    margin-top:20px;
    }

.footer {
  
   width:20%;
text-align:center;
margin:auto;
margin-bottom:2%;
}


.psectionlist a {
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-family:'Roboto';
    text-align:center;
}

.sectionlist{
    color: black;
    display: block;
    text-decoration: none;
    font-family:'Roboto';
     flex-grow:1.5;
                margin:10px;
                
}

.sectionlist a {
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-family:'Roboto';
}

a{
    text-decoration:none;
}

.pauthor{
    font-family:"Roboto";
    font-size:12px;
    color:grey;
    margin-top:10px;
}

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/





ul.breadcrumb li {
    display: inline;
    font-size: 10px;
    font-family:"Roboto";
    padding-left:0;
    margin-left:0;
}

ul.breadcrumb li+li:before {
    padding: 4px;
    color: grey;
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: black;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

.breadcrumb{
    list-style: none;
}

.currentpage{
    font-style:italic;

}
  


/******************************* BREADCRUMBS *********************************/ 
  
ul.breadcrumb li {
    display: inline;
    font-size: 10px;
    font-family:"Roboto";
}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: grey;
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: black;
    text-decoration: none;
        font-size: 10px;

}

ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

.breadcrumb{
    list-style: none;
}

.currentpage{
    font-style:italic;
}
}
  
/*******************************             *********************************************/
/*******************************             *********************************************/
/*******************************             *********************************************/

@media only screen and (min-width: 700px) {
 
/****************************************************************************/ 
/********************MIN WIDTH 700PX START***********************************/ 
/****************************************************************************/ 
    
/******************************* BREADCRUMBS *********************************/ 
  
ul.breadcrumb li {
    display: inline;
    font-size: 13px;
    font-family:"Roboto";
}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: grey;
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: black;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

.breadcrumb{
    list-style: none;
}

.currentpage{
    font-style:italic;
}
.navbar {
  overflow: hidden;
  background-color: white;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}  

/********************************* HOME PAGE *********************************/ 

.homecontent{
    display:flex;
    flex-direction:row;
    width:70%;
    margin-left:auto;
    margin-right:auto;
    align-items: center;
    height: 100vh;
    justify-content:space-around;
}



.vertical-menu a {
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-family:'Roboto';
    font-size:18px;
}

#mainlogo{
    width:100px;
}



/*********************************           *********************************/ 

/******************************* WRITINGS    *********************************/

.vertical-menu-w{
              width:70%;
              text-align:center;

}

.vertical-menu-w a {
    color: black;
    display: block;
    padding: 22px;
    padding-bottom:30px;
    text-decoration: none;
    font-family:'Roboto';
    font-size:20px;
    }

.latestarticle{
    display:flex;
    align-items:center;
    justify-content:space-around;
    position:relative;
    padding-bottom:100px;
}

.latest{
    margin:0;
    padding:0;
    font-size:11px;
    font-family:'Roboto';
    flex-grow:1;
    position: absolute;
  top: 0;
  left:0;
}

.latestpoem{
    display:flex;
    align-items:center;
    justify-content:space-around;
    position:relative;
}

/*********************************           *********************************/ 
/*********************************           *********************************/ 


/********************************* HEADLINES *********************************/ 

h1{
    font-family:'Shrikhand';
    font-size:42px;
}
    
h2 {
    font-family: 'Shrikhand';
    font-size: 34px;
    margin:0;
}

h3{
    font-family: 'Shrikhand';
    font-size: 31px;
    margin:0;    
}

h4{
        font-family: 'Shrikhand';
    font-size: 20px;

}
/*******************************             *********************************/

.sectionlist{
    color: black;
    display: block;
    text-decoration: none;
    font-family:'Roboto';
                margin:10px;
                
}

.sectionlist a {
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-family:'Roboto';
}
.sectiontitle{
    margin:10px;
    text-align:center;
  }
  
.sectioncontent{
  display:flex;
  width:60%;
  margin:auto;
  padding-top:5%;
  flex-direction:row;
  justify-content:space-between;
}

.contactsectioncontent{
  display:flex;
  width:60%;
  margin:auto;
  padding-top:5%;
  flex-direction:column;
  justify-content:space-between;
  align-items:baseline;
}

.contactinfo{
    width:80%;
    text-align:center;
    flex-grow:1;
    font-family: "Roboto";
    font-size:22px;    
}

 
.formcontainer{
    font-family:"Roboto";
}  
  
.articlecontent {
    width:65%;
    margin-left:auto;
    margin-right:auto;
    padding-top:2%;
}

.articletxt{
        font-family:"Vollkorn";
    margin-left:auto;
    margin-right:auto;
    font-size:19px;
    width:80%;
}
.headline{
    margin-bottom:50px;
        margin-top:30px;

            text-align:center;


}
.artimg{
    text-align:center;
    max-width:100%;
}

.latestarticle{
    display:flex;
    align-items:center;
    justify-content:space-around;
    
}

.infocon{
    display:flex;
    flex-direction:column;
    width:60%;
}

/********* ABOUT PAGE *********/

    .aboutxt{
    
                        font-family:'Roboto';
                        width:55%;
 }
  .aboutlogocon{
      width:100%;
       text-align:center;
       padding-top:25%;
  }
  .aboutlogo{
   
    width:10%;
}
  
  
/********* PROJECT PAGE *********/

  
.projectsectioncontent{
  display:flex;
  width:70%;
  margin:auto;
  padding-top:5%;
  justify-content:space-between;
}

.projsectiontitle{
    text-align:center;
  }
.projcontainer {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    width:70%;
}

.proj {
    cursor: pointer;
    margin:10px;
    padding-bottom:5px;
    }
    
.projtitle {
    text-align:center;
    font-family:"Roboto";
    font-size:12px;
}

.sectionsubtitle{
    margin:0;
    text-align:center;
}

.projimg {
    -webkit-filter: grayscale(100%); 
    transition: filter .3s ease-in-out;
    filter: grayscale(100%);
    width:150px;

}

img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%); 
}

.ppp{
     -webkit-filter: grayscale(0%); 
    transition: filter .3s ease-in-out;
    filter: grayscale(0%);
    width:150px;
}
/*********  *********/

/**************************** POEMS ************************/

.poemsectioncontent{
  display:flex;
  width:70%;
  margin:auto;
  margin-top:3%;
  justify-content:space-around;
  flex-direction:column;
}
.psectionlist{
    color: black;
    display: block;
    text-decoration: none;
    font-family:'Roboto';
                margin:10px;
                margin:auto;
                column-count:3;
                column-gap:20px;
                width:70%;
}

.psectionlist a {
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-family:'Roboto';
}

.pcontent {
    margin-top:5%;
margin-bottom:4%;
text-align:center;

}
.poemcontainer{
    width:60%;
    margin:auto;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    
}
.poemcontainer a{
    border-bottom:1px dashed grey;
    color:grey;
    }
    
.ptext{

line-height: 1.5;
font-size:15px;
text-align:left;
font-family:"Vollkorn";
display:inline-block;
margin:auto;
margin-top:3em;
}

.poembutton{
    background-color:white;
    border: none;
    padding:20px;
    font-size:15px;
    margin-top:40px;
    cursor: pointer;
}

/******************************       ********************************/

.projpagecontent{
    width:75%;
    display:flex;
    flex-direction:row;
    margin:auto;
    margin-top:5%;
}

.projsectiontitle{
    width:30%;
    text-align:center;
}
.projcontent{
  flex-grow:0;
  font-family:"Roboto";
  width:55%;
  margin:auto;
}

.pauthor{
    font-family:"Roboto";
    font-size:12px;
    color:grey;
    margin-top:10px;
}

 /********* 404 PAGE *********/ 
   
.redirectcontent {
    width:100%;
    text-align:center;
    padding-top:15%;
}

.redirectlinks {
    display:flex;
    justify-content:center;
    margin-top:5%;
}

.redirecta {
    padding:20px;
    font-family:'Roboto';
    display:inline-block;
    font-size:20px;
    width:10%;
    }

 /*********  *********/ 

.footer {
  
   width:20%;
text-align:center;
margin:auto;
margin-bottom:2%;
}

.testfooter {
  
   width:30%;
text-align:center;
margin:auto;
margin-bottom:2%;
display:flex;
justify-content:center;
align-items:center;
}

.prevpoemfooter{
   transform: scaleX(-1);
}

.randompoembutton{
    font-size:12px;
    background-color:white;
    border:none;
}
.prevpoembutton{
    font-size:30px;
     background-color:white;
    border:none;
}

.nextpoembutton{
    font-size:30px;
     background-color:white;
    border:none;
}

.backpoembutton{
    font-size:30px;
     background-color:white;
  transform: rotate(-90deg);
    border:none;
}

#randomoverlay{
    position:relative;
    left:-20px;
}


/********* DARK *********/ 

.dark{
    background:black;
    color:white;
}

.dark a{
    color:white;
}

.dark #css_toggle{
    background: white; 
    border-color:white; 
}

/*********  *********/ 
}