/*
CSS Style Sheet for webbud
Author: Arsalan Rashid Thoker
arsalanrashidthoker@gmail.com
*/
:root{
    --font-face :'Jost';
    --bgcolor :#000000e6;
    --success :#6da50b;
    --banner :#8d2aef;
}
@media screen and (min-width:800px){
    div.stories-page{
        display:grid;
        grid-gap:20px;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(1, auto);
    }
    .stories-page>div:first-child{
        grid-column: 1/8;
    }
    .stories-page>div:nth-child(2){
        grid-column: 8/10;
    }
    div.brand-name img{
        text-align:left;
        width:10%;
        height:10%;
    }
    div.member-form form, div.form-body form{
        margin: 0 10% 0 10%;
        display:grid;
        grid-gap:20px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, auto);
    }
    div.brand-name button{
        display:none;
    }
    div.services{
        margin:50px 15% 20px 15%;
        display: grid;
        grid-gap:20px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    nav{
        position:relative;
        top:-50px;
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(1, minmax(50px,auto));
    }
    div.footer{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, minmax(200px, auto));
    }
    div.banner{
        height: 400px;
        text-align:right;
    }
    button{
        width:30%;
    }
    .banner h1{
        font-size: 80px;
    }
}
@media screen and (max-width:800px){
    div.brand-name{
        text-align:center;
    }
    div.brand-name img{
        text-align:center;
        width:50%;
        height:50%;
    }
    div.member-form form{
        margin: 0 10% 0 10%;
        display:grid;
        grid-gap:20px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, auto);
    }
    div.brand-name button{
        display:inline;
        background-color: var(--banner);
        color:white;
        border:none;
        border-radius:5px;
    }
    div.services{
        margin:50px 15% 20px 15%;
        display: grid;
        grid-gap:20px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    nav{
        display:grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, minmax(50px,auto));
    }
    div.footer{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, minmax(200px, auto));
    }
    div.banner{
        height:400px;
        text-align:center;
    }
    button{
        width:70%;
    }
    .banner h1{
        font-size:45px;
    }
}
body{
    font-family: 'Jost';
    background-color: var(--bgcolor);
    color: white;
}
body{
    margin-top:0;
}
nav{
    margin:0px 10% 10px 15%;
    padding:0px 10px 10px 10px;
    text-align:center;
    font-size:20px;
}
nav a{
    padding:5px;
    text-decoration:none;
}
div.banner{
    width:100%;
    margin:10px 0px 15px 0px;
    background-color: var(--banner);
}
.banner h1{
    padding:20px;
    margin-bottom:0px;
}
button{
    border:0.5px solid white;
    height:50px;
    font-size:1em;
    border-radius:5px;
    padding:10px;
    font-family: var(--font-face);
}
.banner button{
    margin-right:4%;
    background-color: var(--banner);
    color:white;
}
.banner button:hover{
    background-color:white;
    color:var(--banner);
}
div#content{
    margin: 10px 10% 10px 10%;
    text-align:center;
}
div#content img{
    width:50%;
    height:40%;
}
span.title h1{
    text-align:center;
    font-size:40px;
}
div.footer{
    text-align:center;
}
ul{
    list-style-type: none;
    line-height: 30px;
    padding:10px;
    font-size: 20px;
}
a:hover{
    border-bottom: 5px solid var(--banner);
    border-radius: 5px;
    color:white;
    text-decoration:none;
}
/*#content:hover{
    box-shadow: 0px 3px 3px 3px var(--banner);
}*/
h1>span{
    color: var(--banner);
}
li>a{
    color:white;
    font-size:small;
}
a>span{
    text-align:left;
}
li>a:hover{
    color: var(--banner);
    background: linear-gradient(to bottom(var(--bgcolor)));
    border:none;
}
li>img{
    width:10%;
    height:10%;
    opacity:0.7;
}
li>img:hover{
    opacity:1;
}
div.contact-page{
    width: 80%;
    margin: 20px 10% 0 10%;
}
div.contact-page span, hr{
    color: var(--banner);
}

.input-group .form-control{
    width:90%;
}
input.form-control, select.form-control{
    width:50%;
    background: linear-gradient(to bottom(var(--bgcolor)));
    color:white;
    border:none;
}
input.form-control:focus, select.form-control:focus{
    box-shadow:none;
    border-bottom: 1px solid var(--banner);
}
div.input-group{
    margin: 15px 0 15px 0;
}
span.input-group-addon{
    background: linear-gradient(to bottom(var(--bgcolor)));
    color:white;
    border:none;
}
fieldset{
    padding:10px;
}
button.success{
    background-color: #88d00a;
    border:none;
    width: 80%;
    margin: 0 10% 0 10%;
}
button.reset{
    background-color: #12bce2;
    border:none;
    width:80%;
    margin: 0 10% 0 10%;
}
button.success:hover, button.reset:hover{
    opacity: .9;
}
span#add:hover{
    color: var(--banner);
    border:1px solid white;
}
div.skill-item{
    border-radius: 8px;
    height: auto;
    max-width: 100%;
    padding:5px;
    background-color: #333;
    float:right;
    margin: 5px;
}
span.cancel:hover{
    color:red;
    cursor:pointer;
}
span.cancel{
    float:right;
    margin-top:0px;
}
div.stories-page, .story{
    width: 80%;
    margin: 0 10% 0 10%;
    text-align:left;
}
div.story .question span{
    color: #ff6060;
}
div.story .answer span{
    color: #59bd59;
}
div.about-page{
    text-align:center;
    width: 80%;
    margin: 0 10% 0 10%;
}
div.about-page img{
    width:20%;
    height:20%;
}
div.about-page a:hover{
    border:none;
    color:#337ab7;
    text-decoration: underline;
}
hr{
    border: 1px solid #555;
}
option{
    color:inherit;
    background-color: var(--bgcolor);
}
option.disabled{
    color: #555;
}
span.input-group-addon#correct{
    color: #88d00a;
    display:none;
}
span.input-group-addon#wrong{
    color: red;
    display:none;
}
span.feature{
    font-size:inherit;
    color:#f38855;
}
span.feature-hold{
    font-size:inherit;
    color:#8af78a;
}
a.fa{
    font-size: 30px;
    color: #555;
}
a.btn-link{
    color:inherit;
}
a.btn-link:hover{
    text-decoration:none;
}
ul.devp-info a:hover{
    text-decoration:none;
    color: var(--banner);
}
div.story-info span{
    text-align:right;
    position:relative;
    float:right;
}
div.story-info span:hover{
    color: var(--banner);
}
div.story-info a{
    text-align:center;
    font-size:small;
}
div.story-info a:hover{
    border:none;
    color: var(--banner);
}
div.story-title a:hover{
    border:none;
}
div.block{
    box-shadow: 0px 0px 10px #555;
    padding: 10px;
    margin-bottom: 10px;
}
div.answer h3{
    font-size: 20px;
}
h3 a:hover{
    border:none;
    color: var(--banner);
}