/*-----------------------------------------------------
------------------------ Body CSS ---------------------
------------------------------------------------------*/
body{margin: 0;
    padding: 0;
    background: black; 
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
}
/*-----------------------------------------------------
----------------- Page Main Header CSS ----------------
------------------------------------------------------*/
.Main_header{
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000000; /* fallback for old browsers */
  background-image: -webkit-linear-gradient(320deg, #000000, #434343); /* Chrome 10-25, Safari 5.1-6 */
  background-image: linear-gradient(320deg, #000000, #434343); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: white;
}
/*-----------------------------------------------------
--------------- Page Main Header Logo CSS --------------
------------------------------------------------------*/
.Main_header_logo {
    font-size: 10rem;
    display: flex;
    justify-content: center;
    font-weight: 300;
}
/*-----------------------------------------------------
--------- Page Main Header Logo Animation CSS ---------
------------------------------------------------------*/
.Main_header_logo i{  
     animation:  scale 5s linear  infinite alternate;
    -webkit-animation: scale 5s linear  infinite alternate;}
@keyframes scale {
    0%{transform: scale3d(.9, .9, .9)}
    100%{transform: scale3d(1.2, 1.2, 1.2)}
}   
/*-----------------------------------------------------
---------- Page Main Content of Header CSS ------------
------------------------------------------------------*/
.Main_header  h3{
   margin: 0;
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 3.5rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 800; }
/*-----------------------------------------------------
---------- Page Main Content Description CSS ----------
------------------------------------------------------*/
.Main_header  p{
   padding: 0 5% 2% 5%; 
   font-size: 1.8rem;
   text-align: center;
   font-family: 'Open Sans Condensed', sans-serif;
   font-weight: 500;
   text-transform: uppercase;
  
}
/*-----------------------------------------------------
------------- Front & Back End Section CSS ------------
------------------------------------------------------*/
.front__End_section,.back__End_section,.developer__support_section{
    background-color:white;
    border:5px solid  #000000; 
}
/*-----------------------------------------------------
--------- Front & Back End Section Header CSS ---------
------------------------------------------------------*/
.main__section_header{
    background:  #000000;
    margin: 0;
    padding: 1rem;
    text-align: left;
    color: white;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 2.4rem;
    font-weight: 580;
    position: sticky;
    top: 0;
}
/*-----------------------------------------------------
------------------- Resource Section CSS --------------
------------------------------------------------------*/
.resource_section{
    padding: 2.4rem 0;
}
.resource_section:nth-child(odd){
    background-color: #F9FAFA;
}
/*-----------------------------------------------------
------------ Resource Section Container CSS -----------
------------------------------------------------------*/
.container{
    margin: 0 auto;
    width: calc(100% - 80px);
}
/*-----------------------------------------------------
--------- Resource Section container Header with Icon CSS --------
------------------------------------------------------*/
.container header{
    text-align: center; 
}
.resource_section_header_icon{
    font-size: 3.5rem;
    margin:0; 
}
.container h2{
    font-size: 2.4rem;
    margin: 0;
    margin-bottom:3rem;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/*-----------------------------------------------------
---------- Resource Section container Icon CSS --------
------------------------------------------------------*/

/*------------------------------------------------------------
--- Resource Article section Implemented by Using CSS Grid ---
-------------------------------------------------------------*/
.resource_article_section{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: minmax(200px, auto); 
}
.resource__block1{
    grid-column: 1/2;
    grid-row: 1/2;
    grid-area: block1;
   
}
.resource__block2{
    grid-column: 2/3;
    grid-row: 1/2;
    grid-area: block2;
}
.resource__block3{
    grid-column: 3/4;
    grid-row: 1/2;
    grid-area: block3;
}
.resource__block4{
    grid-column: 4/5;
    grid-row: 1/2;
    grid-area: block4;
}
.resource__block5{
    grid-column: 1/2;
    grid-row: 2/3;
    grid-area: block5;
}
.resource__block6{
    grid-column: 2/3;
    grid-row: 2/3;
    grid-area: block6;
}
.resource__block7{
    grid-column: 3/4;
    grid-row: 2/3;
    grid-area: block7;
}
.resource__block8{
    grid-column: 4/5;
    grid-row: 2/3;
    grid-area: block8;
}
.resource__block9{
    grid-column: 1/2;
    grid-row: 3/4;
    grid-area: block9;
}
.resource__block10{
    grid-column: 2/3;
    grid-row: 3/4;
    grid-area: block10;
}
.resource__block11{
    grid-column: 3/4;
    grid-row: 3/4;
    grid-area: block11;
}
.resource__block12{
    grid-column: 4/5;
    grid-row: 3/4;
    grid-area: block12;
}
.resource__block13{
    grid-column: 1/2;
    grid-row: 4/5;
    grid-area: block13;
}
.resource__block14{
    grid-column: 2/3;
    grid-row: 4/5;
    grid-area: block14;
}
.resource__block15{
    grid-column: 3/4;
    grid-row: 4/5;          
    grid-area: block15;
}
.resource__block16{
    grid-column: 4/5;
    grid-row: 4/5;
    grid-area: block16;
}
/*-------------------------------------------------
---- Resource section Grid Arragement ----
---------------------------------------------------*/
.resource_article-4blocks{
    grid-template-areas: "block1 block2 block3 block4";
}
.resource_article-6blocks,.resource_article-8blocks{ 
    grid-template-areas: "block1 block2 block3 block4"
    "block6 block5 block8 block7";
}
.resource_article-10blocks,.resource_article-12blocks{
    grid-template-areas: "block1 block2 block3 block4"
                         "block6 block5 block8 block7"
                         "block9 block10 block11 block12";
}
.resource_article-16blocks{ 
    grid-template-areas: "block1 block2 block3 block4"
    "block6 block5 block8 block7"
    "block9 block10 block11 block12 "
    "block14 block13 . . ";
}

/*--------------------------------------------------------------
---- Resource Section Chess style Blocks implementation CSS ----
---------------------------------------------------------------*/
.resource{
    padding: 3%;
    border-radius: 2px;
}

.resource:nth-child(odd){   
    background-color:#f5f5f5;
}
.resource:nth-child(even){
    background-color: black;
}
.resource:nth-child(even) a{
    color:#dadada;  
}
.resource:nth-child(even) .resource__text{
    color:#c4c1c1;  
}
.resource a:hover{
color: #e9750a;
} 
.resource__Icon{
    width: 16%;
}
.resource__heading a{
    font-size: 1.3rem;
    text-decoration: none;
    color: #252525;
    font-weight: 500;
}
 .resource__text{
    font-size: 1rem;
    line-height: 1.5rem;
    color:#303030;
    font-weight: 300;
}
/*-----------------------------------------------------
---------------------- footer CSS ---------------------
------------------------------------------------------*/

.footer__top{
    margin: 4% 5%;
    color: white;
    display: flex;
    flex-flow: row;
    text-align: center;
    justify-content: space-evenly;
}
.wdr_about img{
    background: #F9FAFA;
    width: 100px;
    height: 100px;
    border: 2px solid white;
    border-radius: 50%;
}
.wdr_about-content{padding: 0 10%;
    align-self: center;
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    font-weight: 500;}
.wdr_about-content a{
        text-decoration: none;
        color: aqua;
    }
.links i{
    font-size: 2.5rem;
    color: #F9FAFA;
letter-spacing: 1rem;
}
.footer__down h3{
    color: #F9FAFA;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 500;
    text-align: center;
    
}
.footer__down span{
    color: aqua;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
```````````````` @Media Query Section CSS ````````````
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*-----------------------------------------------------
------------------- Device Width @ 1080px -------------
------------------------------------------------------*/
@media only screen and (max-width:1080px){
    header{
        text-align: center;
    }
    .container{
    margin: 0 auto;
    width: calc(100% - 20px);
    }
    .resource_article_section{
        grid-template-columns: repeat(3,1fr);
    }
    .resource_article-4blocks,.resource_article-6blocks{ 
        grid-template-areas: "block1 block2 block3"
        "block4 block5 block6";
    }.resource_article-8blocks{ 
        grid-template-areas: "block1 block2 block3"
        "block4 block5 block6" 
        "block7 block8 .";
    }
    .resource_article-10blocks,.resource_article-12blocks{
        grid-template-areas: "block1 block2 block3"
                             "block4 block5 block6"
                             "block7 block8 block9"
                             "block10 block11 block12";
    }
    .resource_article-16blocks{ grid-template-areas: "block1 block2 block3"
        "block4 block5 block6"
        "block7 block8 block9"
        "block10 block11 block12"
        "block13 block14 .";
    }
    .Main_header_logo {
        font-size: 9rem;
    }
    .Main_header  h3{
        font-size: 2.9rem;
        font-weight: 500;
     }
     .Main_header  p{
        font-size: 1.5rem;
        font-weight: 500;
     }
     
    .main__section_header{
        font-size: 1.7rem;
    }
     .resource_section_header_icon{
        font-size: 3rem;
    }
    .container h2{
        font-size: 1.8rem;
        margin-bottom:1.4rem;
        font-weight: 700;
    }
    .resource__heading{
        font-size: 1rem;
    }
    .resource__text{
        font-size: .9rem;
        line-height: 1.2rem;
        font-weight: 300;
    }
    .footer__top{
        flex-flow: column;
        margin:6% 0 0 0;
    }
    .wdr_about img{
        width: 85px;
        height: 85px;
    }
    .wdr_about-content{
        padding: 0 2%;
        align-self: center;
        font-size: 1.1rem;
        font-weight: 500;}
    .footer__down h3{
        font-size: 1rem;
    }
}
/*-----------------------------------------------------
------------------- Device Width @ 768px --------------
------------------------------------------------------*/
@media only screen and (max-width:768px){
    header{
        text-align: center;
    } 
    .container{
        margin: 0 auto;
        width: calc(100% - 20px);
    }
    .resource_article_section{
        grid-template-columns: repeat(4,1fr);
    }
    .resource_article-4blocks{
        grid-template-areas: "block1 block1 block2 block2"
        " block4 block4 block3 block3";
    }
    .resource_article-6blocks{ 
        grid-template-areas:"block1 block1 block2 block2"
        " block4 block4 block3 block3"
        "block5 block5 block6 block6";
    }.resource_article-8blocks{ 
        grid-template-areas: "block1 block1 block2 block2"
        " block4 block4 block3 block3"
        "block5 block5 block6 block6"
       "block8 block8 block7 block7";
    }
    .resource_article-10blocks{
        grid-template-areas: "block1 block1 block2 block2"
        " block4 block4 block3 block3"
        "block5 block5 block6 block6"
       "block8 block8 block7 block7"
       "block9 block9 block10 block10";
    }
    .resource_article-12blocks{
        grid-template-areas: "block1 block1 block2 block2"
        " block4 block4 block3 block3"
        "block5 block5 block6 block6"
       "block8 block8 block7 block7"
       "block9 block9 block10 block10 "
       "block12 block12 block11 block11"
       ;
    }
    .resource_article-16blocks{ grid-template-areas:  "block1 block1 block2 block2"
        " block4 block4 block3 block3"
        "block5 block5 block6 block6"
       "block8 block8 block7 block7"
       "block9 block9 block10 block10 "
       "block12 block12 block11 block11"
       "block13 block13 block14 block14"
       ;
    }
    .Main_header_logo {
        font-size: 8rem;
    }
    .Main_header  h3{
        font-size: 2.8rem;
        font-weight: 500;
     }
     .Main_header  p{
        font-size: 1.4rem;
        font-weight: 400;
     }
     
    .Front__BackEnd_header{
        font-size: 1.6rem;
    }
     .resource_section_header_icon{
        font-size: 2.8rem;
    }
    .container h2{
        font-size: 1.6rem;
        margin-bottom:1.2rem;
        font-weight: 600;
    }
    .resource__heading{
        font-size: 1.1rem;
    }
    .resource__text{
        font-size: .9rem;
        line-height: 1.1rem;
        font-weight: 200;
    }
    .footer__top{
        flex-flow: column;
        margin:8% 0 0 0;
    }
    .wdr_about img{
        width: 75px;
        height: 75px;
    }
    .wdr_about-content{
        padding: 0 4%;
        align-self: center;
        font-size: 1rem;
        font-weight: 400;}
    .footer__down h3{
        font-size: .9rem;
    }
}
/*-----------------------------------------------------
------------------- Device Width @ 500px --------------
------------------------------------------------------*/
@media only screen and (max-width:425px){
    header{
        text-align: center;
    }
    .container{
    margin: 0 auto;
    width: calc(100% - 10px);
    }
 .resource_article_section{
     display: flex;flex-flow: column ;
 }
    .Main_header_logo {
        font-size: 7rem;
    }
    .Main_header  h3{
        font-size: 2.8rem;
        font-weight: 500;
     }
     .Main_header  p{
        font-size: 1.5rem;
        font-weight: 300;
     }
     
    .Front__BackEnd_header{
        font-size: 1.4rem;
        text-align: center;
    }
     .resource_section_header_icon{
        font-size: 2.8rem;
    }
    .container h2{
        font-size: 1.6rem;
        margin-bottom:1rem;
        font-weight: 400;
    }
    .resource__heading{
        font-size: 1.1rem;
    }
    .resource__text{
        font-size: 1rem;
        line-height: 1.2rem;
        font-weight: 200;
    }
    .footer__top{
        flex-flow: column;
        margin:12% 0 0 0;
    }
    .wdr_about img{
        width: 60px;
        height: 60px;
    }
    .wdr_about-content{
        padding: 0 5%;
        align-self: center;
        font-size: .9rem;
        font-weight: 400;}
    .footer__down h3{
        font-size: .8rem;
    }

}