*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: sans-serif;
}
.header{
    position: fixed;
    top: 0%;
    z-index: 1;
    width: 100%;
    height: 50px;
    background-color: white;
    padding: 5px 15px;
    display: flex;
    align-items: center
}
.header img{
    height: 90%;
    cursor: pointer;
}

.header input{
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid gray;
    width: 15%;
    margin-left: 0.4%;

}

.head_list{
    margin: 0% 1%;
}
.head_list li{
    cursor: pointer;
    display: inline;
    text-decoration: none;
    padding: 3.8% 0%;
    margin-left: 1em;
}

.head_list li:hover{
    background-color: rgb(35, 189, 110);
}
#search{
    position: absolute;
    left: 51%;
    cursor: pointer;
}

.fa-adjust{
    cursor: pointer;
    position: absolute;
    left: 55%;
}
.Space{
    margin-left: 7%;
    padding: 0.8% 0%;
    cursor: pointer;
}
.Space:hover{
    background-color: rgb(242, 237, 237);
    border-radius: 20px;
}

.buttton{
    padding: 10px 28px;
    border-radius: 22px;
    border: none;
    font-size: 1em;
    cursor: pointer;
}

.get{
    margin-left: 4%;
    padding: 0.8% 0%;
    cursor: pointer;
}
.get:hover{
    background-color: rgb(242, 237, 237);
    border-radius: 20px;
}

.b1{
    position: relative;
    left: 4.8%;
}

.b2{
    margin-left: 3%;
}
.b2:hover{
    background-color: rgb(35, 189, 110);
}

.nav_bar{
    width: 100%;
    position: fixed;
    top: 8.5%;
    background-color: rgb(40, 42, 51);
}

.nav_list{
    color: white;
    padding: 0.6%;
}

.nav_list li{
    display: inline;
    text-decoration: none;
    font-size: 13px;
    padding: 1% 1.1%;
}
.nav_list li:hover{
    background-color: black;
}

.parent2_main{
    background-image: url(./background_in_space.gif);
    display: flex;
    justify-content: center;
}

.parent2_paragraph{
    padding: 10em 4em;
    width: 50%;
    text-align: center;
    margin-left: 10em;
}
.parent2_paragraph h1{
    color: white;
    font-size: 4em;
    margin-bottom: 0.5em;
}

.parent2_paragraph p{
    font-size: 19px;
    color: rgb(247, 230, 150);
    font-weight: 800;
    margin-bottom: 2em;

}
.parent2_paragraph input{
    width: 100%;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid gray;
    font-size: 18px;
    margin-bottom: 2em;

}
.parent2_paragraph button{
    background-color: rgb(35, 189, 110);
    color: white;
    border: 1px solid rgb(35, 189, 110);
    cursor: pointer;
    padding: 12px 2em;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    font-size: 18px;
    position: absolute;
    right: 30%;
    margin-bottom: 2em;
}

.parent2_paragraph a{
    color: white;
    font-weight: 800;
    font-size: 20px;
}
.parent2_paragraph a:hover{
    color: rgb(252, 252, 144);
}
.img{
    height: 20%;
    padding-top: 15%;
    padding-left: 5%;
}

.code1_parent{
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(191, 238, 222);
    text-align: center;
}

.code1_child{
    width: 50%;
    padding: 8% 0%;
    padding-left: 15%;
}
.code1_child h1{
    font-size: 6em;
    font-weight: 600;
    margin-bottom: 4%;
}
.code1_child p{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5%;
}

.code1_child button{
    width: 13em;
    padding: 2.7% 0%;
    border: none;
    border-radius: 30px;
    margin-bottom: 6%;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.code1_parent2{
    text-align: start;
    margin-top: 8%;
    padding: 1%;
    width: 35%;
    height: fit-content;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgb(86, 85, 85);
    background-color: rgb(203, 231, 234);
}
.code1_parent2 h2{
    padding: 4% 0%;
    /* text-align: start; */
}

.white_code1{
    padding: 2.5%;
    padding-left: 4%;
    width: 98%;
    color: brown;
    background-color: white;
    border-left: 4px solid rgb(35, 189, 110);
}

span .i{
    color: blue;
}

.text{
    color: black;
}
.code1_parent2 button{
    margin: 4% 0%;
    padding: 3% 13%;
    font-size: 18px;
    color: white;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    background-color: rgb(35, 189, 110);
}
.code1_parent2 button:hover{
    background-color: rgb(27, 155, 89);
}

.parent_2{
    background-color: rgb(253, 253, 163);
}

.style{
    margin-left: 6%;
    color: red;
}

.style2{
    color: blue;
}

.parent_3{
    background-color: rgb(40, 42, 51);
}

.java_child h1{
    font-size: 4.5em;
    color: white;
}
.brown{
    color: brown;
}

.spa{
    margin-left: 4%;
}
.py_white{
    padding-bottom: 40%;
}

.red{
    color: red;
}

.parent_4{
    background-color: rgb(243, 232, 234);
}

.py_child h1{
    font-size: 5em;
}

.parent_5{
    background-color: rgb(123, 202, 206);
}

.languages_parent{
    background-color: rgb(40, 42, 51);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5% 4%;
}

.other_one{
    margin-bottom: 4%;
    width: 47%;
    padding: 4% 0%;
    text-align: center;
    border-radius: 8px;
}
.other_one h3{
    font-size: 2.5em;
    padding-bottom: 3%;
}

.other_one p{
    font-size: 1.1em;
    padding-bottom: 8%;
    color: rgb(66, 64, 64);
    font-weight: 500;
}
.other_one button{
    background-color: rgb(40, 42, 51);
    padding: 2% 10%;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    color: white;
}
.other_one button:hover{
    background-color: black;
}

.languages_parent2{
    background-color: rgb(40, 42, 51);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0% 4%;
}

.other_one2{
    cursor: pointer;
    margin-bottom: 4%;
    width: 47%;
    padding: 4% 0%;
    text-align: center;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.4em;
}
.small{
    width: 21%;
    background-color: rgb(245, 245, 148);;
}
.small:hover{
    background-color: rgb(244, 244, 107);;
}

.gif_one{
    padding: 5% 0%;
    background-color: rgb(40, 42, 51);
    text-align: center;
    color: white;
}

.gif_img{
    background-color: aliceblue;
    width: 75%;
    margin: auto;
}
.buttonF button{
    padding: 5%;
    font-size: 16px;
    border: none;
    background-color: aliceblue;
}

.backend_but:hover{
    background-color: rgb(240, 234, 234);
}

.buttonF{
    width: 18%;
}

.colors{
    padding: 1.5%;
    display: flex;
}
.first_color{
    margin-left: 0.5%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.colors input{
    width: 65%;
    border: none;
    background-color: white;
    margin-left: 10%;
    color: gray;
    font-weight: 600;

}
.gif_one h1{
    font-size: 4em;
    margin-bottom: 2%;
}
.gif_one p{
    font-weight: 600;
    margin-bottom: 5%;
}
.big_button{
    text-align: start;
    margin-left: 12.5%;
    width: 30%;
}
.big_button > button{
    border: none;
    padding: 2.5% 5%;
    margin-top: 6%;
    border-radius: 5px;
    font-size: 17px;
    font-weight: 600;
}

.gif_one .gif2_para{
    font-weight: 600;
    margin-bottom: 2%;
    font-size: 20px;
}

.gif_img2{
    margin-top: 5%;
}
.how_work{
    margin-top: 5%;
}
#button{
    cursor: pointer;
    border: none;
    width: 24%;
    padding: 1.3% 1%;
    margin: 2% 0%;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border-radius: 30px;
    background-color: rgb(35, 189, 110);
}
#button:hover{
    background-color: rgb(27, 142, 82);

}

.learning{
    padding: 5% 0%;
    background-color: rgb(221, 240, 234);
    text-align: center;
}

.learning h1{
    font-size: 4.5em;
    margin-bottom: 3%;
}
.learning p{
    font-weight: 600;
    margin-bottom: 2%;
    font-size: 18px;
}
.pro_user{
    padding: 5%;
    background-color: rgb(40, 42, 51);
    text-align: center;
}
.pro_user h1{
    font-size: 2.8em;
    color: white;
    margin-bottom: 2%;
}

.right_div p{
    font-size: 18px;
    font-weight: 600;
    color: rgb(236, 160, 160);
    margin-bottom: 1%;

}
.pro_user .para{
    font-size: 25px;
    font-weight: 600;
    color: rgb(236, 160, 160);
    margin-bottom: 4%;
}

.right_div{
    display: flex;
    justify-content: center;
}
.right_div img{
    margin-bottom: 1%;
    margin-right: 1%;
}
.colorpicker{
    background-color: beige;
    text-align: center;
    padding: 6% 0%;
}

.colorpicker h3{
    font-size: 4em;
    margin-bottom: 2%;
}
.colorpicker p{
    font-weight: 600;
    margin-bottom: 2%;
}
.colorpicker img:hover{
    opacity: 0.5;
}

.code_game{
    background-color: rgb(117, 235, 235);
    text-align: center;
    padding: 6% 0%;
}
.code_game h3{
    font-size: 3em;
    margin-bottom: 2%;
    font-family: 'Freckle Face', cursive;
}
.code_game p{
    font-weight: 600;
    font-family: 'Freckle Face', cursive;
    font-size: 2em;
    margin-bottom: 2%;
}
#button2{
    cursor: pointer;
    border: none;
    width: 18%;
    padding: 1.3% 1%;
    margin: 2% 0%;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border-radius: 30px;
    background-color: rgb(40, 42, 51);
}
#button2:hover{
    background-color: rgb(11, 11, 14);

}

.Quizzes{
    background-color: rgb(40, 42, 51);
    text-align: center;
    padding: 6% 0%;
}
.Quizzes h3{
    color: white;
    font-size: 3.2em;
    margin-bottom: 2%;
}

.Quizzes p{
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 3%;
}
.two_boxes{
    display: flex;
    font-size: 1.6em;
}
.other_tobox{
    width: 40%;
    padding: 6% 0%;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.4em;
    margin: auto;
}

.Templates{
    background-color: rgb(217, 216, 231);
    text-align: center;
    padding: 6% 0%;
}

.Templates h3{
    font-size: 4em;
    margin-bottom: 2%;
}
.Templates p{
    font-weight: 600;
    margin-bottom: 2%;
}
.Templates img{
    width: 80%;
}
#button3{
    cursor: pointer;
    border: none;
    width: 45%;
    padding: 1.3% 1%;
    margin: 2% 0%;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border-radius: 20px;
    background-color: rgb(40, 42, 51);
}
#button3:hover{
    background-color: black;
}

.Kickstart{
    background-color: rgb(40, 42, 51);
    padding: 6% 4%;
}

.Kickstart h3{
    font-size: 3.5em;
    color: rgb(245, 177, 177);
    margin-bottom: 5%;
}
.Kickstart p{
    font-weight: 600;
    font-size: 3em;
    color: rgb(237, 177, 177);
    margin-bottom: 2%;
}
.Kickstart img{
    width: 25%;
    position: absolute;
    right: 5%;
    margin-top: -10%;
}
#button4{
    cursor: pointer;
    border: none;
    width: 18%;
    padding: 1.3% 1%;
    margin: 2% 0%;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border-radius: 25px;
    background-color: rgb(35, 189, 110);
}
#button4:hover{
    background-color: rgb(23, 125, 72);

}

.Section{
    background-color: blanchedalmond;
    padding: 6% 0%;
    text-align: center;
}

.Section h3{
    font-size: 4em;
    margin-bottom: 2%;
}
.Section p{
    font-weight: 600;
    /* font-size: 3em; */
    margin-bottom: 2%;
}

.nature_parent{
    background-color: rgb(222, 226, 230);
    width: 80%;
    margin: auto;
    padding: 1% 0%;
}

.gray_circle_parent{
    margin: auto;
    width: 15%;
    display: flex;
    padding: 2%;
}
.circle_gray{
    background-color: rgb(205, 204, 204);
    margin-left: 5%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.circle_gray2{
    transition: background-color 0.5s ease;
}
.circle_gray2:hover{
    background-color: gray;
}
.straight{
    height: 100px;
    width: 50px;
    background-color: rgb(40, 42, 51);
    position: absolute;
    left: 48%;
}
#button5{
    cursor: pointer;
    border: none;
    width: 35%;
    padding: 1.3% 1.5%;
    margin: 2% 0%;
    margin-top: 7.9%;
    font-size: 20px;
    font-weight: 600;
    color: white;
    border-radius: 25px;
    background-color: rgb(40, 42, 51);
}
#button5:hover{
    background-color: rgb(35, 189, 110);

}

.last_div{
    background-image: url(background_in_space.gif);
    padding-top: 2%;
}
.footer_links{
    width: 75%;
    margin: 5% auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer_links img{
    width: 5%;
}

.footer_links a{
    color: rgb(255, 250, 190);
    text-decoration: none;
}
.footer_links a:hover{
    text-decoration: underline;
}

.tutorials{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-around;
}

.tutorial_one h3{
    color: white;
    margin-bottom: 10%;
}

.tutorial_one a{
    padding-left: 5px;
    text-decoration: none;
    color: white;
    display: block;
    font-size: 0.8em;
}
.tutorial_one a:hover{
    color: rgb(255, 250, 190);
}

.footer_space{
    display: flex;
}
.icons{
    width: 77%;
    margin: 5% 0%;
    color: white;
    margin-bottom: 5%;
    margin-left: 11.5%;
}
.icons i{
    margin-right: 1.5%;
    font-size: 20px;
}
.icons .terms1{
    text-decoration: none;
    color: white;
    font-size: 12px;
    margin-right: 1.5%;
}
.icons .terms1:hover{
    text-decoration: underline;
    color: rgb(250, 244, 168);
}
.icons p{
    font-size: 12px;
    
}

.footer_para{
    margin-top: 2%;
}
.icons .terms2{
    color: white;
    font-size: 12px;
    margin-right: 1.5%;
}
.icons .terms2:hover{
    color: rgb(250, 244, 168);
}