@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400&family=Poppins:wght@300;400;500&family=Source+Sans+Pro:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&family=Josefin+Sans:wght@100;200;300;400&family=Poppins:wght@300;400;500&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}
body{
    background-color: #d9eee1 !important;
}

.navbar-wraper {
    width: 100%;
    background: #1D2A35;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .navbar-wraper::after {
    content: "";
    display: table;
    clear: both;
} */
.logo {
    padding: 0.5rem;
}
.left-navitems{
    display: flex;
    align-items: center;
}
.right-navitems ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ri-menu-3-fill{
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    display: none;
}
.ri-close-fill{
    color: #fff;
    font-weight: 800;
    font-size: 2rem;
    display: none;
}

.navbar-wraper ul li {
    list-style-type: none;
    display: inline-block;
    padding: 0.1rem 0.5rem;
}
.navbar-wraper ul li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size:1.1rem;
    padding:  1.7rem 1rem;
}
.navbar-wraper ul li a:hover{
    background-color: #04aa6d;
    overflow: hidden;
}
/* navbar section ends */

/* buttons styles */
button {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
}

button:hover {
    opacity: 1;
}

.black {
    background-color: #000;
    color: #fff;
}

.white {
    background-color: #fff;
    color: #000;
}

.pink {
    background-color: #ffc0cb;
}

.yellow {
    background-color: #fff4a3;
}

.green {
    background-color: #04aa6d;
    color: #fff;
}

/* button styles ends */

/* learn to code secton starts */
.learn-to-code {
    text-align: center;
    padding: 4rem 0rem;
    background: #0d1721;
}

.title-and-subtitle {
    padding: 1rem;
}

.title-and-subtitle h1 {
    font-size: 4.5rem;
    color: #fff;
}

.title-and-subtitle h3 {
    padding: 1rem;
    color: #ffc0cb;
}

.search-box {
    border-radius: 5px;
    background-color: #fff;
    width: 40%;
    margin:auto;
}
.search-box::after {
    content: "";
    display: table;
    clear: both;
}
.search-box input {
    padding: 1.15rem;
    border-radius: 5px;
    font-weight: bold;
    float: left;
    border: none;
    width: 80%;
}

.search-box button {
    background-color: #04aa6d;
    border-radius: 0 5px 5px 0;
    width: 20%;
    padding: 1rem;
}

.search-box input[type=text]:focus {
    border: none;
}

.where-to-start {
    padding: 2rem;
}

.where-to-start a {
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
}
.where-to-start a:hover{
    color:#04aa6d;
}

/* learn to code secton ends */

/* content HTMl starts */
.main-content-div {
    padding: 3rem;
    background-color: #15202B;
}

.main-content-div::after {
    content: "";
    display: table;
    clear: both;
}

.c-html {
    background-color: #d9eee1;
}

.left-section {
    text-align: center;
    float: left;
    width: 50%;
}

.left-section h1 {
    font-size: 5rem;
    padding: 1rem;
}

.left-section h3 {
    padding: 0 0 1rem;
}

.left-section button {
    display: block;
    margin: 1.5rem auto;
    text-align: center;
    width: 30%;
    padding: 0.5rem 1rem;

}

.right-section {
    float: left;
    width: 50%;
    padding: 2rem;
}

.right-section::after{
    content: "";
    display: table;
    clear: both;
}
.code-wrapper {
    background-color: #1D2A35;
    border-radius: 5px;
    padding: 1.5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.code-wrapper h2 {
    color: #ffffff80;
    padding: 1.5rem 0;
}

.code {
    background-color: #15202B;
    padding: 1.5rem;
    border-radius: 5px;
    border-left: 5px solid #04aa6d;
    color: #fff;
}

.try-yourself-btn {
    padding: 1rem 0 0;
}

.try-yourself-btn button {
    width: 30%;
}

/* content HTMl ends */

/* content css */
.css {
    background-color: #fff4a3;
}

/* content css ends */

/* content javascript starts */
.javascript {
    background-color: #15202B;
    color: #fff;
}

/* content javascript ends */
/*  content python starts */
.python {
    background-color: #f3ecea;
}

/*  content python ends */

/* sql section starts */
.sql {
    background-color: #96d4d4;
}

/* sql section ends */

/* 6 languages grid starts */
.outer {
    float: left;
    width: 50%;
    padding: 2rem;
}

.inner {
    border-radius: 5px;
    padding: 3rem;
    text-align: center;
}

.inner h1 {
    font-size: 3.125rem;
}

.inner h2 {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 1rem;
}

.inner button {
    background-color: #000;
}

.inner button a {
    text-decoration: none;
    color: #fff;
}

/* 6 languages grid ends */
.php {
    background-color: #ffc0c7;
}
.jquery {
    background: #fff4a3;
}
.java {
    background-color: #f3ecea;
}

.cplusplus {
    background-color: #d9eee1;
}
.w3css {
    background-color: #96d4d4;
}
.bootstrap {
    background-color: #e7e9eb;
}
.c {
    background-color: #ffc0cb;
}
.csharp {
    background-color: #fff4a3;
}
/* 6 programming languages grid ends */

/* more programming languages starts */
.grid {
    background-color: #15202B;
    padding: 2rem;
}

.grid::after {
    content: "";
    display: table;
    clear: both;
}

.outside {
    float: left;
    width: 25%;
    padding: 1.5rem 2.5rem;
}

.inside {
    padding: 3rem;
    border-radius: 5px;
    text-align: center;
}

.r {
    background-color: #ffc0cb;
}

.kotlin {
    background-color: #fff4a3;
}

.nodejs {
    background-color: #88c1c2;
}

.react {
    background-color: #e6afb6;
}

.json {
    background-color: #d9eee1;
}

.angularjs {
    background-color: #e7e9eb;
}

.mysql {
    background-color: #96d4d4;
}

.xml {
    background-color: #e7e9eb;
}

.saas {
    background-color: #96d4d4;
}

.icon {
    background-color: #88c1c2;
}

.graphics {
    background-color: #ffc0c7;
}

.rwd {
    background-color: #d9eee1;
}

.excel {
    background-color: #96d4d4;
}

.googlesheets {
    background-color: #f3ecea;
}

.ai {
    background-color: #96d4d4;
}

.machinelearning {
    background-color: #e7e9eb;
}

/* more programming languages ends */

/* code-editor section starts */
.code-editor {
    text-align: center;
    background-color: #0d1721;
    color: #fff;
}

.code-editor h1 {
    font-size: 5rem;
    padding: 2rem 0 1rem;
}

.code-editor h3 {
    padding: 0 1rem 2rem;
}

.code-editor-box {
    background-color: #ddd;
    margin: auto;
    padding: 0.5rem 1rem;
    width: 65%;
    border-radius: 5px;
}

.three-dots {
    float: left;
    width: 20%;
}

.red-circle {
    color: #f00;
}

.yellow-circle {
    color: #ff0;
}

.green-circle {
    color: #0f0;
}

.fa-circle {
    float: left;
    padding: 0.5rem;
}

.addressbar {
    padding: 0.5rem;
    float: left;
    width: 70%;
    border-radius: 5px;
    background-color: #ffffff;
    color: #ddd;
    text-align: left;
}

.buttons-frontend-backend {
    padding: 0.5rem;
    float: left;
    width: 100%;
}

.frontend,
.backend {
    float: left;
    border-radius: 0px;
}

.frontend {
    background-color: #15202B;
    color: #fff;
}

.code-editor-box-gif-container {
    width: 100%;
    height: auto;
}

.code-editor-box-gif-container img {
    width: 100%;
    height: auto;
}

.buttons-outside {
    background-color: #0d1721;
}

.buttons-outside::after {
    content: "";
    display: table;
    clear: both;
}

.buttons-outside button {
    display: block;
    margin: 1rem 0;
}

.buttons-container {
    background-color: #0d1721;
    margin: 0 auto;
    padding: 0.5rem 0;
    width: 65%;
}

.buttons-container a {
    text-decoration: none;
}

.frontend-editor {
    border-radius: 5px;
    background-color: #38aa71;
}

.backend-editor {
    border-radius: 5px;
    background-color: #fff4a3;
}

.frontend-editor a {
    color: #fff;
}

.backend-editor a {
    color: #000;
}

/* code-editor section ends */

/* w3schools spaces section starts */
.w3schoolspaces {
    background-color: #272a35;
    color: #fff;
    text-align: center;
}

.w3schoolspaces h1 {
    font-size: 4rem;
    padding: 3rem 1rem 0.5rem;
}

.w3schools-spaces-img {
    width: 90%;
    margin: auto;
    text-align: center;
}

.w3schools-spaces-img img {
    width: 100%;
    height: auto;
    padding: 0.5rem 2rem;
}

.get-started-for-free {
    color: #fff;
    background-color: #38aa71;
    width: 40%;
    padding: 1rem;
    margin-bottom: 2rem;
}

/* w3schools spaces section ends */

/* mylearning section starts */
.mylearning-wrapper {
    background-color: #d9eee1;
    text-align: center;
    padding: 2rem;
}

.mylearning-wrapper h1 {
    font-size: 5rem;
    padding: 2rem 1rem 1rem;
}

.mylearning-wrapper h3 {
    line-height: 2;
    padding: 0 1rem 2rem;
}

.mylearning-image {
    margin: auto;
    width: 100%;
}

.mylearning-image img {
    width: 80%;
    margin: auto;
    padding: 1rem 0 2rem;
}

.mylearning-signup-for-free {
    background-color: #04aa6d;
    width: 30%;
    padding: 1rem 2rem;
    display: block;
    text-align: center;
    color: #fff;
    margin: auto;
}

/* mylearning section ends */


/* become pro user secion starts */
.become-pro-user {
    background-color: #0d1721;
    color: #fff;
    text-align: center;
}

.become-pro-user::after {
    content: "";
    display: table;
    clear: both;
}

.become-pro-user h1 {
    font-size: 4rem;
    padding: 2rem 0 2rem 0;
}

.become-pro-user h3 {
    color: #d87093;
    font-size: 1.5rem;
}

.formlist {
    padding: 2rem 2rem;
    text-align: left;
    width: 25%;
    margin: auto;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 2;
}

.learn-more {
    background-color: #04aa6d;
    color: #fff;
    width: 20%;
    padding: 1rem;
}
.learn-more-button {
    padding: 0 0 3rem;
}


/* become pro user section ends */

/* color picker section starts */
.colorpicker {
    text-align: center;
    padding: 3rem 1rem 5rem;
    background: #f3ecea;
}

.colorpicker h1 {
    font-size: 400%;
    padding: 1rem;
}

.colorpicker h3 {
    padding: 0 0 2rem;
}

.colorpicker-img img {
    width: 100%;
    height: auto;
}

/* color picker section ends */

/* code game section starts */
.code-game{
    text-align: center;
    background-color: #96d4d4;
    padding: 0 0 4rem;
}
.code-game h1{
    font-size: 300%;
    padding: 2rem;
    font-family: 'Freckle Face',cursive;
}
.code-game h2{
    font-family: 'Freckle Face',cursive;
    padding: 0 0 2rem;
}
.code-game-img{
    width: 100%;
    height: auto;
}
.play-game{
    display: block;
    margin: 2rem auto 0;
    padding: 0.5rem 2rem;
}
/* code game section ends */

/* exercise and quizzes bsection starts */
.exercise-and-quizzes{
    background-color: #0d1721;
    padding: 3rem;
    text-align: center;
    color:#fff;
}
.exercise-and-quizzes::after{
    content: "";
    display: table;
    clear: both;
}
.exercise-and-quizzes-blocks{
    padding: 1rem;
    float: left;
    width: 100%;
}
.block{
    float:left;
    width:50%;
    padding:2rem;
}
.exercise{
    background-color: #04aa6d;
    padding:3rem;
    border-radius: 5px;
    color:#fff;
}
.quizzes{
    background-color:#f7ed9f;
    padding:3rem;
    border-radius: 5px;
    color:#000;
}
.block h1{
    font-size: 2rem;
    padding:2rem;
}

/* exercise and quizzes bsection ends */

/* web templates section starts */
.web-templates{
    background-color: #38444d;
    text-align: center;
    padding:2rem 2rem 4rem;
}
.web-templates h1{
    font-size: 4rem;
    color:#ddd;
    padding:  2rem;;
}
.web-templates h3{
    color:#ddd;
    padding:  0 0 2rem;
}
.web-templates-image{
    width:100%;
    height: auto;
    padding: 2rem 0 2rem;
    border-radius: 5px;
}
.web-templates-image img{
    width:90%;
    height: auto;
    border-radius: 10px;
}
.browse-templates{
    width: 60%;
    padding: 1rem;
    background-color: #272a35;
    color:#fff;
}
/* web templates section ends */

/* get ready to kickstart your career section starts */
.kickstart-your-career{
    background-color: #0d1721;
    text-align: left;
    color:#d87093;
    padding: 3rem;;
}
.kickstart-your-career h1,.kickstart-your-career h2{
    padding: 2rem 0 1rem;
    font-size: 4rem;
}
.get-started-tokick{
    padding: 1.5rem 4rem;
    background-color: #04aa6d;
    color: #fff;
    margin: auto;
}

/* get ready to kickstart your career section ends */

/* how to section starts */
.howto{
    padding: 2rem 2rem 6rem;
    text-align: center;
    background-color: #1d2a35;
    color: #fff;
}
.howto h1{
    font-size: 5rem;
    padding:2rem;
}
.howto h2{
    font-size: 2rem;
}
.howto h3{
    font-size: 1.5rem;
    padding: 0.5rem 2rem 2rem;
}
.howto-box{
    padding: 1rem 1rem 3rem;
    background-color: #ddd;
    width: 70%;
    margin:auto;
    border-radius: 5px;
}
.howto-image img{
    padding: 1rem;
    height: auto;
    width: 100%;
}
.bottom-circle-div{
    text-align: center;
    color:rgb(113, 110, 110);
    width: 12%;
    margin: auto;
}
.stand{
    background-color: #10101060;
    height: 100px;
    width:5%;
    margin: auto;
}
.learn-how-to-button button{
    padding:1.5rem 5rem;
    width: 30%;
    margin: auto;
    background-color:#0d1721;
    color:#fff;
    opacity: 1;
}
/* how to section ends */

/* footer section starts */
footer{
    background-color: #0d1721;
    padding:2rem;
}
footer::after{
    content: "";
    display: table;
    clear: both;
}
.footer-buttons{
    padding:1rem;
}
.footer-buttons button{
    border-radius: 5px;
    color:#fff;
    background-color: #1d2a35;
    text-transform: uppercase;
    margin: 0.5rem;
}
.left-buttons{
    float:left;
    width:70%;
}
.right-buttons{
    float:left;
    width: 20%;
}
.right-buttons button{
    display: inline;
    color:#fff;
    font-weight:400;
    background-color: transparent;
}
.social-media-contacts{
    float:right;
    padding: 2rem;
}
.social{
    padding: 0 1rem;
    color: #fff;
}
.copyright-section{
    float:left;
    width:100%;
    text-align: center;
    color:#fff;
    padding: 2rem 1rem;
}
.fa-thumbs-up{
    font-size: 3rem;
}
/* footer section edns */