@import "reset.css";
@font-face {
    font-family: azo black;
    src: url(../codeninjas/fonts/AzoSansTest-Black-BF663af5f77b591.otf);
}

@font-face {
    font-family: azo med;
    src: url(../codeninjas/fonts/AzoSansTest-Medium-BF663af5f75f759.otf);
}
body {
    font-family:azo black;
}
p {
    font-family:azo med;
}
a {
    text-decoration:none;
}
#navbar {
    display:flex;
    padding:15px;
    padding-bottom:24px;
    background-color:white;
}
#navlogo {
    width:50vw;
    padding-left:5vw
}
#navbuttons {
    display:flex;
    width:50vw;
    justify-content:space-around;
    align-items:center; 
}
#frontbanner {
    display:block;
    width:70vw;
    margin-left:auto;
    margin-right:auto;
    margin-top:2vw;
    margin-bottom:2vw;
}
#findlocation {
    display:block;
    color:white;
    width:210px;
    text-align:center;
    font-size:14pt;
    margin:60px;
    margin-left:auto;
    margin-right:auto;
}
#locationbutton {
    padding:15px;
    background-color:rgb(36, 197, 143);
    border-radius:5px;
    margin:5px;
}
#locationbutton:hover {
    background-color:rgb(31, 182, 132)
}
.navitem {
    color:rgb(81, 94, 100)
}
#findbutton {
    background-color:rgb(36, 197, 143);
    padding:15px;
    color:white;
    border-radius:5px;
}
#findbutton:hover {
    background-color:rgb(31, 182, 132);
}
#whybox {
    background-color:white;
    display:flex;
}
#frontbackground {
    background-image:url(images/bg.webp);
    background-size:cover;
    background-position:center;
    padding:10px;
}
#whyninja1 {
    width:25vw;
}
#whyninja2 {
    width:20vw;
}
#whyhead {
    font-size:40pt;
    text-align:center;
}
#whydesc {
    font-size:14pt; 
    text-align:center;
    width:45vw;
    line-height:25px; 
    color:rgb(70, 116, 189)
}
#whydescbox {
    margin-top:75px;
    margin-left:auto;
    margin-right:auto;
}
#companies {
    display:flex;
    background-color:white;
    justify-content:space-between;
    width:50vw;
    margin-left:auto;
    margin-right:auto;
}
#parents {
    text-align:center;
    margin:15px;
    margin-top:60px;
    font-size:18pt;
    color:rgb(47, 68, 101);
}
#parentvideo {
    display:block;
    margin-left:auto;
    margin-right:auto; 
    border-radius:20px; 
}
#offer {
    margin:25px;
    margin-top:150px;
    text-align:center;
}
#offerhead {
    font-size:40pt;
}
#offersub {
    font-size:16pt;
}
#createsection {
    display:flex;
    background-color:rgb(19, 117, 192);
    background-image:url(images/Create-Bg.webp);
    background-repeat:no-repeat;
    background-size:cover;
    padding:125px;
    align-items:center;
    height:350px;
}
#createimg {
    width:35vw;
    margin-left:auto;
}
#createtext {
    width:25vw;
    margin-right:auto;  
}
#createh3 {
    font-size:16pt;
    color:rgb(139, 227, 249);
}
#createh2 {
    font-size:20pt;
    color:white;
}
#createh1 {
    font-size:48pt;
    color:rgb(139, 227, 249);
}
#createp {
    font-size:14pt;
    line-height:23px;
    margin-bottom:15px;
    margin-top:10px;
    color:white;
}
.learnmorebutton {
    background-color:rgb(36, 197, 143);
    width:125px;
    text-align:center;
    padding:15px;
    border-radius:7px;
    color:white;
}
.learnmorebutton:hover {
    background-color:rgb(31, 182, 132);
}
#jrsection {
    display:flex;
    background-image:url(images/JR-Bg.webp);
    background-color:rgb(87, 28, 111);
    padding:100px;
    background-size:cover;
    background-repeat:no-repeat;
    height:350px;
}
#jrimg {
    width:35vw;
    margin-right:auto;
}
#jrtext {
    width:25vw;
    margin-left:auto;  
}
#jrh3 {
    font-size:16pt;
    color:rgb(223, 183, 247);
}
#jrh2 {
    font-size:20pt;
    color:white;
}
#jrh1 {
    font-size:48pt;
    color:rgb(223, 183, 247);
}
#jrp {
    font-size:14pt;
    line-height:23px;
    margin-bottom:15px;
    margin-top:10px;
    color:white;
}
#campsection {
    display:flex;
    background-color:rgb(13, 132, 132);
    background-image:url(images/CAMP-BG.webp);
    background-repeat:no-repeat;
    background-size:cover;
    padding:125px;
    align-items:center;
    height:350px;
}
#campimg {
    width:35vw;
    margin-left:auto;
}
#camptext {
    width:25vw;
    margin-right:auto;  
}
#camph3 {
    font-size:16pt;
    color:rgb(155, 250, 247);
}
#camph2 {
    font-size:20pt;
    color:white;
}
#camph1 {
    font-size:48pt;
    color:rgb(155, 250, 247);
}
#campp {
    font-size:14pt;
    line-height:23px;
    margin-bottom:15px;
    margin-top:10px;
    color:white;
}
.headcodeninjas {
    color:rgb(70, 116, 189)
}
#whygradient {
    background-image: url(images/BG-Gradient-1.png);
    background-size:auto;
}
#parent {
    position:relative;
    top:0;
    left:0;
    justify-content:center;
}
#impactthumb {
    background-image:url(images/cn-impact-thumb.jpg);
    background-repeat:no-repeat;
    background-size:780px;
    background-position: center;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
#impactframe {
    width:80vw;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-top:120px;
}
#impact {
    padding:100px;
    padding-top:0px;
    background-image:url(images/Impact-Bg-1.png);
    background-size:cover;
}
#impactlogo,#partnership {
    width:350px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
#partnerhead {
    text-align:center;
    font-size:10pt;
    font-family:azo med;
    margin-bottom:20px;
    color:rgb(95, 169, 215);
}
#partnershiptext {
    color:rgb(79, 79, 116);
    font-family:azo med;
    text-align:center;
    width:35vw;
    display:block;
    margin-left:auto;
    margin-right:auto;
    line-height:25px;
    font-size:11pt;
    margin-top:20px;
}
#learnmore {
    background-color:rgb(36, 197, 143);
    color:white;
    width:150px;
    margin:50px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding:15px;
    text-align:center;
    font-size:15pt;
    font-family:azo black;
    border-radius:5px;
}
#learnmore:hover {
    background-color:rgb(31, 182, 132);
}
#prodigy {
    background-image:url(images/Prodigy-bg\ top@2x.png);
}
#prodigyninjalogo {
    width:200px;
    padding:20px;
}
#prodigyheader {
    color:rgb(90, 183, 246);
    font-size:16pt;
    text-align:center;
    width:45vw;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}
.prodigytext {
    color:white;
    font-family:azo med;
    text-align:center;
    line-height:30px;
    width:45vw;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
#prodigyninjalogo,#prodigylogo {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
#prodigylogo {
    margin-bottom:50px;
}
#prodigyninjas {
    width:100%;
}
#offersub,#programs {
    color:rgb(70, 116, 189);
}