/* index page */
html {scroll-behavior: smooth;}
body {overflow-x: hidden; background:#eeeaea;}
.rb-col-5 {width: 5px;}
.rb-col-10 {width: 10%;}
.rb-col-15 {width: 15%;}
.rb-col-20 {width: 20%;}
.rb-col-24 {width: 24%;}
.rb-col-25 {width: 25%;}
.rb-col-30 {width: 30%;}
.rb-col-50 {width: 50%;}
.rb-col-70 {width: 70%;}
.rb-col-75 {width: 75%;}
.rb-col-80 {width: 80%;}
.rb-col-90 {width: 90%;}
.rb-col-95 {width: 95%;}
.rb-col-100 {width: 100%;}
.rb-ht-100vh {height: 100vh;}
.rb-text-white {color: #fff;}
.rb-text-center {text-align: center;}
.rb-text-right {text-align: right;}
.rb-text-left {text-align: left;}
.rb-text-bold {font-weight: bold;}
.rb-text-bolder {font-weight: bolder;}
.rb-row-flex {display: flex; flex-direction: row;}
.rb-col-flex {display: flex; flex-direction: column;}
.rb-flex-wrap {flex-wrap: wrap;}
.rb-pad-15-0 {padding: 15px 0px;}
.rb-justify-center {justify-content: center;}
.rb-justify-space-between {justify-content: space-between;}
.rb-flex-wrap {flex-wrap: wrap;}
.rb-gap-10 {gap: 10px;}
.rb-pos-rel {position: relative;}
.rb-pos-abs {position: absolute;}
.rb-pos-fixed {position: fixed;}
.rb-pos-sticky {position: sticky;}
.rb-top-0 {top: 0;}
.rb-bot-0 {bottom: 0;}
.rb-disp-none {display: none}
.rb-pad-3 {padding: 3px;}
.rb-pad-5 {padding: 5px;}
.rb-pad-10 {padding: 10px;}
.rb-pad-0-5 {padding: 0px 5px;}
.rb-pad-0-15 {padding: 0px 15px;}
.rb-pad-10-0 {padding: 10px 0px;}
.rb-pad-15-0 {padding: 15px 0px;}
.rb-mr-top-10 {margin-top: 10px;}
.rb-mr-top-20 {margin-top: 20px;}
.rb-mr-bot-20 {margin-bottom: 20px;}
.rb-mr-bot-0 {margin-bottom: 0px;}
.rb-mr-bot-5 {margin-bottom: 5px;}
.rb-mr-bot-10 {margin-bottom: 10px;}
.rb-mr-bot-15 {margin-bottom: 15px;}
.rb-font-16 {font-size: 16px;}
.rb-font-22 {font-size: 22px;}
.rb-font-34 {font-size: 34px;}
.rb-text-lightgoldenrodyellow {color: lightgoldenrodyellow;}
.rb-text-orange {color: rgb(237, 159, 14);}
.rb-bg-dark, .rb-bg-footer {background-color: #343a40;}
.rb-bg-orange {background-color:rgb(237, 159, 14);}
.rb-bg-transparent {background:transparent;}
.rb-page-header {font-family: serif;}
.rb-move-top-btn {position:fixed; bottom: 20px;}
.rb-float-right {float: right;}
.rb-bor-rad-5 {border-radius: 5px;}
.rb-move-top-btn > a:visited, .rb-move-top-btn > a {color: lightgoldenrodyellow; text-decoration:none;}
.rb-move-top-btn > a:hover {text-decoration: none; font-weight: bolder; color: lightgoldenrodyellow;}
.rb-page-header > a:hover {text-decoration: none; background: lightgoldenrodyellow; color: #343a40; border-radius: 15px;}
.rb-top-btn {padding: 12px; opacity: 0.9; line-height: 40px; border-radius: 20px;}
.rb-ht-vh-90 {height: 90vh;}
.rb-cursor-pointer {cursor: pointer;}
.title-head-hr {border-top: 1px solid lightgoldenrodyellow;}
.rb-2-line-truncate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }

/* Nav Header */
.rb-nav-link:hover {background-color: lightgoldenrodyellow; color: #ff8800; text-decoration: none;}
.rb-nav-content{padding: 0px 60px; height: 40px; line-height: 40px; border-bottom: 2px solid grey;}
.rb-nav-link {display: inline-block; height: 40px;}
.rb-nav-link-grps >  .active {background-color:#ff8800; color: #343a40; border-bottom: 5px solid lightgoldenrodyellow;}

/* carousel */
.rb-typewriter { overflow: hidden; top: 45vh; font-family: 'Dancing Script' , cursive;}
.rb-carousel-author { overflow: hidden; top:60vh; font-family: 'Dancing Script' , cursive;}
.rb-cursor { bottom: 0; right: 0; width: 2px; height: 10px; background-color: black; animation: blink 1s infinite; }
@keyframes blink {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
.rb-scrolling-text {display: inline-block;white-space: nowrap;animation: marquee 10s linear ;}
@keyframes marquee {
0% {transform: translateX(1000%);}
100% {transform: translateX(0%);}
}

/* homepage */
.rb-home-container {display: flex; flex-direction: column; transition: transform 2s ease;}
.rb-page {height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;transition: opacity 2s ease;scroll-snap-align: start;top: 0;}
#rb-carousel-content {background-color: lightblue;}
#rb-latest-blogs-content {background-color: lightgreen;}
#page3 {background-color: lightcoral;}

/* javascriptDiagram */
#rb-learn-program-header {left: 75px;}
#rb-learn-program-caption {left: 130px; padding-right: 165px;}
.rb-language-list {top: 10vh;}
.rb-language-list-item {transition: box-shadow 1s, transform 1s;}
.rb-language-logo:hover {transform: scale(1.1);}
.rb-language-logo {align-items: center;gap:15px;position: absolute;top: 60px;animation: comeFromDown 5s ease-in-out;}
@keyframes comeFromDown {
0% {transform: translateY(600%);opacity: 0;}
100% {transform: translateY(0);opacity: 1;}
}
.rb-language-program-code{width:0px;height:0px;animation: cometop 15s ease infinite;}
@keyframes cometop {
0% {transform: translateY(-300%);opacity:0;width:0px;height:0px;}
100% {transform: translateY(0);opacity: 1;width:100%;height:70vh;}
}
.rb-language-logo-text {font-size: large;font-family: 'Dancing Script' , cursive;background-color: #ff8800;color: #343a40;border-bottom: 5px solid lightgoldenrodyellow;}
.rb-language-item-header {font-family: 'Dancing Script' , cursive;top:10vh;left: 5vh;}
.container {display: flex;justify-content: center;align-items: center;position:absolute;bottom: 220px;height: 66vh;color: lightgoldenrodyellow;width: 100%;}
.source {font-size: 24px;white-space: nowrap;position: absolute;text-align: center;bottom:135px;width:0px;}
.target {display: none;/* white-space: nowrap; */position: relative;}
.letter {position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);opacity: 0;width: 35px;height:35px;line-height: 35px;border-radius:50%;background: #ff8800;animation: moveLetter 3s linear forwards;}
@keyframes moveLetter {
0% {transform: translate(-50%, 0);opacity: 1;bottom: -200px;left:40px;}
25% {tranform: translate(-50%, -10px);left: -30px;}
50% {tranform: translate(-50%, -25px);left: 30px;}
75% {tranform: translate(-50%, -40px);left: -50px;opacity: 1;}
100% {transform: translate(-50%, -50px);opacity: 0;left: 30px;display: none;}
}

/* langauge carousel homepage */
.rb-diag-title {height: 250px;line-height: 250px;color:red;}
.rb-arrow-container {width: 250px;height: 2px;}
.rb-dotted-line-left {border-top: 5px solid lightgoldenrodyellow;border-right: 5px solid lightgoldenrodyellow;width: 0px;animation: rb-dash 5s linear forwards ;}
@keyframes rb-dash {
to {width: 225px;}
}

/* latest Blogs */
.rb-latest-blogs-content {top: 60vh;}
.rb-latest-blog-thmnl {width: 200px;height: 250px;}
.rb-top-20vh {top: 20vh;}
.rb-border-bot-2 {border-bottom: 2px solid #ff8800;}
.rb-comment-profile-icon {display: block;width: 25px;height: 25px; border-radius: 50%;}

/* Sidebar Thumbnail */
.rb-thumbnail-list{list-style: none; padding-inline-start: 0px; padding: 10px;}

/* Blog List */
.rb-blog-list-content { width: 250px; height: 150px;display: flex; align-items: center; text-align: center; justify-content: center; transition: 1s ease; }
.rb-blog-list-title { bottom: 0; padding: 5px; transition: transform 1s ease; }
.rb-blog-list-likes { bottom: 15px; opacity: 0; visibility: hidden; transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out; }
.rb-blog-list-content:hover .rb-blog-list-title { transform: translateY(-50px); background-color: #343a40; opacity: 0.7; height: 50px;}
.rb-blog-list-content:hover .rb-blog-list-likes { opacity: 1; visibility: visible; }
.rb-view-all-arrow {display: inline-block; background: lightgoldenrodyellow; width:20px; height: 20px; border-radius: 10px; color: #343a40;}

/* Blog Create */
#id_title {width: 100%; height: 30px;border: none; color: rgb(0, 229, 255); font-weight:bold; background: transparent; border-bottom: 2px solid lightgoldenrodyellow;}
#id_category {width: 20.8%; height: 30px;border: none; color: rgb(0, 229, 255); font-weight:bold; background: transparent; border-bottom: 2px solid lightgoldenrodyellow;}
#id_thumbnail_url {width: 100%; height: 30px; border: none; color: rgb(0, 229, 255); font-weight:bold;background: transparent; border-bottom: 2px solid lightgoldenrodyellow;}
#id_description_iframe {width: 100%; height:50vh;}
input {height:30px; border: none; color: rgb(0, 229, 255); font-weight:bold;background: transparent; border-bottom: 2px solid lightgoldenrodyellow;}
input:focus {outline: none;box-shadow: 0 0 5px rgba(52, 152, 219, 0.7);}
.rb-blog-submit-btn {border: none; background: #ff8800; width: 100px; height: 30px; line-height: 25px;}
.rb-blog-submit-btn:hover, #rb-signin-btn:hover, #rb-signup-btn:hover {background-color: lightgoldenrodyellow; color: #ff8800; text-decoration: none;}

/* login and signup page */
.rb-ht-68-vh {height: 68vh;}
.rb-display-grid { display: grid;}
.rb-align-center {align-items: center;}
.rb-signin-up-active {border-bottom: 5px solid red; color: red; font-weight: bold;}
.rb-login-bg {position: absolute; top: 0; height: 110vh; width: 100%; z-index: -1;}
.rb-image-attribute {position:absolute; bottom:30px; right:10px;}

/* Change the font size of the editor content */
.note-editable p {font-size: 16px;}
.note-editor {width:100%;}

/* Programming */
.rb-program-tabs-content{ border-right: 5px solid lightgray; padding-right: 0px;}
.rb-program-tabs { list-style-type: none; margin: 0; padding: 0;}
.rb-program-tabs > .active { background-color: rgb(221, 217, 217); color: red; border-right: 5px solid red;}
.rb-show-more-btn > a:hover {background-color:#ff8800; color:#343a40; text-decoration: none; }


.rb-thumbnail-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px;}

/* code editor */
.rb-col-49 { width: 49.5%;}
.rb-ht-vh-100 { height: 100vh;}
.rb-ht-vh-81 { height: 81vh;}
.rb-pad-5-0 {padding: 5px 0px;}
.rb-pad-rt-8 {padding-right: 8px;}
.rb-text-red {color: red;}
.rb-text-seal-blue {color: rgb(0, 229, 255);}
.rb-bg-seal-blue {background-color: rgb(0, 229, 255);}
.rb-text-dark {color: rgb(30, 29, 29);}
.rb-justify-start { justify-content: start;}
.rb-justify-between {justify-content: space-between;}
.rb-gap-6 { gap: 6px;}
.rb-gap-15 { gap: 15px;}
.rb-wdt-60 {width: 60px;}
.rb-wdt-150 {width: 150px;}
.rb-font-18 { font-size: 18px; }
.rb-font-14 { font-size: 14px; }
.rb-mr-left-5 { margin-left: 5px;}
.rb-border-none {border: none;}
.rb-bg-white { background-color: #fff;}
.rb-top-3 {top: 3px;}
.rb-left-10 {left: 10px;}
.rb-line-ht-22 {line-height: 22px;}
.rb-cur-pointer { cursor: pointer;}
.rb-text-green {color: #50fa7b;}
.rb-log-bg {background: rgb(30, 29, 29);}
.rb-code-editor-toggle-btn:hover , .rb-code-editor-btn-grps > .active { background-color: rgb(239, 87, 87);}
.rb-code-editor-highlight-btn { background-color: yellow;}
.rb-code-lang-block {height: 100vh; overflow-y: auto; border-right: 2px solid grey;}
.rb-code-lang-header {color:red;}
.rb-js-console {position: absolute; font-size: 11px; bottom:0; height: 16vh; overflow-y: auto; overflow-x: hidden; background: #282a36;}
.rb-console-logs {background-color: rgb(30, 29, 29);margin: 2px 0px; padding: 5px 4px;}
.rb-console-msg-pill {background-color: #50fa7b; min-width: 25px; font-size: 16px; height: 13px; line-height: 12px; font-weight:bold; border-radius: 10px;}
.rb-console-err-pill {background-color: red; min-width: 25px; height: 13px; font-size: 16px; line-height:12px; font-weight:bold; border-radius: 10px;}
.rb-console-pill {padding-left: 5px;}
#rb-run-btn:hover {background-color: #50fa7b;}

/* profileInfo */
.rb-border-bot {border-bottom: 5px solid #343a40;}
.rb-profile-tab.active {
    background-color: rgb(221, 217, 217);
    color: red;
    border-bottom: 5px solid red;
}

.rb-user-info-value{ border: 2px solid grey; padding: 0 5px;}
.rb-blog-thumbnail {width: 250px; height: 150px;}

.rb-profile-background {
    height: 300px; width: 100%;
}
.rb-profile-pic-block{ height: 200px; top: 230px; border-radius: 15px;     box-shadow: 5px 5px 5px 5px #888888;
}
.rb-profile-pic {width:150px; height:150px; border-radius: 50%; background-color: red; top:150px;box-shadow: 5px 5px 15px 15px rgb(237, 159, 14);
}