@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

body{
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
}
/*=== global Styling=====*/
li{list-style-type: none;}
a{text-decoration: none;}

/*header{background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);}*/
#root>div{display: flex; flex-direction: column;min-height: 100vh;justify-content: space-between;}
nav{display: flex; align-items: center; justify-content: space-between; color: #fff; padding: 7px;}
#logo{margin-left: 15px; font-size: 22px;line-height: 22px; padding: 0}
#logo{color: #fff !important; text-decoration: none;}
#logo:hover{color: #fff !important; text-decoration: none;}
#logo h1{font-size: 32px;}
#logo h1 b{color: #034071;}
#burger{display: none;}
ul#nav-list{display: flex; align-items: center; justify-content: space-around;margin: 0;}
ul#nav-list li{margin: 0 15px; font-size: 17px;}
ul#nav-list li a{color: #fff;}
ul#nav-list li a.active{color: #000000; font-weight: 600;border-bottom: 1px solid #7367F0;background-color: #fff;padding: 27px 16px 27px;}
ul#auth-link{display:none; position: absolute; background: rgb(205, 89, 225); padding: 5px; width: 110px; right: 0; text-align: center;border-radius: 3px;}
ul#auth-link:before{content:''; position: absolute; left: 50%; top:-7px; border-bottom: 7px solid #cc5ae1; border-left:7px solid transparent; border-right: 7px solid transparent;}
ul#auth-link li a{ color: #fff;}
ul#nav-list li#user-auth a.active{background-color: transparent;border-bottom: none;}
button#nav-btn{height: 47px;width: 60px;position: relative;transition: 0.3s;}
.icon{width: 35px;height: 3px;margin: 7px auto;background-color: #fff;}
.rotate>#div1{transform: rotate(45deg);transform-origin: 0;transition: 0.3s;position: absolute;top:2px;left:17px;}
.rotate>#div2{display: none;transition: 0.3s}
.rotate>#div3{transform: rotate(-45deg);transform-origin: 0;transition: 0.3s;position: absolute;bottom:2px;left:17px;}
/*==== Landing Page ===========*/

/*#landing-page{background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);}*/
#landing-page img{width: 100%; max-width: 700px;}
#landing-btn{background-color: #3F51B5;color:#fff;padding: 8px 25px;font-size: 24px;}


/*==== Author Page ===========*/
#author{padding: 70px 0; background-color: #fff;}
#author .lead {text-align: left;}
#author blockquote{border-left: 7px solid #dcdcdc; padding: 10px 20px 10px;background-color: #f6f6f6;font-size: 17px;}
#author blockquote p{font-weight: bold;}
#social-link a i{font-size: 24px;}
/*==== About Page ===========*/
#about .jumbotron{background-color: #3F51B5; color:#d7d7d7;}
/*==== Code Playground ===========*/

#code-val1, #code-val2{height: 300px; resize: none;overflow: scroll;}
#code-val1{border-top-right-radius: 0; border-bottom-right-radius: 0;}
#code-val2{border-top-left-radius: 0; border-bottom-left-radius: 0;}
.increment{cursor: pointer; text-align: center;font-weight: 900; font-size: 1.5rem;background-color: #ffc107;border-radius: 0;padding: 0;outline: none;width:40px;}
.increment:focus{outline: none;box-shadow: none;}
.increment:first-child{border-top-left-radius: 3px; border-bottom-left-radius: 3px}
.increment:last-child{border-bottom-right-radius: 3px; border-top-right-radius: 3px}
#increment-wrapper{display:flex;justify-content: center;}
#run-times-value{background: #fff;text-align: center;border-radius: 0;font-size: 20px;width: 60px;padding:6px;}


footer{color: #fff;}
footer a{color:#071a85;text-decoration: underline;}


@media only screen and (max-width : 991px) {
  #landing-page h1{font-size: 35px;}
  ul#nav-list li a.active{background-color: transparent;padding: 0;border-bottom: none;}
  .navbar-light .navbar-toggler{border-color: rgb(0, 63, 114);}
}


@media only screen and (max-width : 768px) {
  #author-image{order:1;margin-top: 50px;}
}