#main_body {
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

top_menu_container {
    width: 90%;
    max-width: var(--center-container-max-width);
}

top_section {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    max-height: 1000px;
    overflow: hidden;
    
    /*background: linear-gradient(90deg, rgba(91,102,134,1) 0%, rgba(183,191,215,1) 18%, rgba(183,191,215,1) 100%);*/
}

.grid_bg {
    background-color: #eee;
    background-size: 10px 10px;
    background-image:
        linear-gradient(to right, #ddd 1px, transparent 1px),
        linear-gradient(to bottom, #ddd 1px, transparent 1px);
}

top_section h1 {
    color: #222c42;
    font-size: 3em;
    margin: .3em .5em .5em .5em;
    padding: 0 .5rem;
    line-height: 1em;
}

top_section h2 {
    font-family: "Outfit";
    font-size: 2em;
    font-weight: normal;
    color: #222c42;
    max-width: 700px;
    text-align: center;
    line-height: 1em;
    margin: 0 .5em .5em .5em;
}

top_text_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

top_text_container p {
    max-width: 800px;
    text-align: center;
    color: #333;
    margin: 2rem .5rem;
    font-size: 1.2em;
}

top_text_container a {
    color: #333;
    text-decoration: none;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
}

top_text_container a:hover {
    color: inherit;
    text-decoration: none;
}

body_section:first-of-type {
    margin-top: 2em;
}

#page_header, #hamburger_menu {
    -moz-box-shadow:    none !important;
    -webkit-box-shadow: none !important;
    box-shadow:         none !important;
}

footer_container {
    width: 90%;
    max-width: var(--center-container-max-width);
}

.page_header_option.home {
    color: #dde2f0;
}

.showcase {
    width: 100%;
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.showcase img, .showcase svg {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    /*left: 50%;
    transform: translate(-50%, 0);*/
    
    /*-webkit-box-shadow: 0px 0px 50px 18px rgba(5,14,51,0.3); 
    box-shadow: 0px 0px 50px 18px rgba(5,14,51,0.3);*/
}

.showcase_bottom {
    width: 100%;
    height: 40%;
    background: linear-gradient(0deg, rgba(0,0,0,0.54) 0%, rgba(0,0,0,0.54) 74%, rgba(255,255,255,0) 100%);
    color: #dbd9d9;
    z-index: 1;
    text-align: center;
    font-size: 1.5em;
    font-family: "Outfit", "Ubuntu";
}

.showcase_bottom .signin_button,
.showcase_bottom .signup_button {
    margin: 0 15px 0 15px;
    border: solid 3px black;
    border-radius: 22px;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
    font-size: 1.5rem;
    text-decoration: none;
    color: white;
    font-family: "Ubuntu", "Outfit";
}

.showcase_bottom .signin_button {
    background: #434d5c;
    border-color: #212846;
}

.showcase_bottom .signup_button {
    background: #007700;
    border-color: #1c3e08;
}

.showcase_bottom .signin_button:hover {
    background: #2e3a4d;
}

.showcase_bottom .signup_button:hover {
    background: #006600;
}

[id^="toolbox_img_g"], [id^="toolbox_img_line"] {
    opacity: 0;
}

[id^="toolbox_img_g"].visible, [id^="toolbox_img_line"].visible {
    opacity: 1;
    transition: opacity .5s ease;
}

[id^="toolbox_img_i"] {
    filter: grayscale(1);
    opacity: 0.7;
}

[id^="toolbox_img_g"] {
    display: block;
    cursor: pointer;
}

[id^="toolbox_img_g"]:hover [id^="toolbox_img_i"],
[id^="toolbox_img_g"].active [id^="toolbox_img_i"] {
    filter: grayscale(0);
    opacity: 1;
}

[id^="toolbox_img_g"]:hover [id^="toolbox_img_text"] *,
[id^="toolbox_img_g"].active [id^="toolbox_img_text"] * {
    fill: #000000 !important;
}

#toolbox_img_terminal_gif {
    visibility: hidden;
}

#toolbox_img_g1:hover #toolbox_img_terminal_gif,
#toolbox_img_g1.active #toolbox_img_terminal_gif {
    visibility: visible;
}

[id^="toolbox_img_tip"] {
    --translate-x: 0;
    --translate-y: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: translate(var(--translate-x),var(--translate-y)) scale(0);
    transition: transform 0.4s ease;
}

[id^="toolbox_img_tip"].show {
    transform: translate(var(--translate-x),var(--translate-y)) scale(1);
}

#button_signin, #button_register {
    cursor: pointer;
}

#button_signin:hover rect {
    fill: #343b44 !important;
}

#button_register:hover rect {
    fill: #060 !important;
}

#toolbox_img_online {
    --translate-x: 110px;
    --translate-y: -98px;
    --rotate: -21deg;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(var(--rotate)) translate(var(--translate-x), var(--translate-y)) scale(1);
    animation: 1.4s ease-in-out infinite alternate scale_up_down;
}

@keyframes scale_up_down {
    from {transform: rotate(var(--rotate)) translate(var(--translate-x), var(--translate-y)) scale(1);}
    to {transform: rotate(var(--rotate)) translate(var(--translate-x), var(--translate-y)) scale(1.1);}
}

/* PLANS AND PRICING */
.billing_frequency_area {
    margin-bottom: 10px;
}

.billing_frequency_area .monthly, 
.billing_frequency_area .annual {
    border: 3px solid #555;
    border-radius: 20px;
    padding: 0.25rem;
    color: #222;
    margin: 0 5px 0 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
}

.billing_frequency_area .monthly:active, 
.billing_frequency_area .annual:active {
    -moz-box-shadow:    inset 0 0 5px #aaa;
    -webkit-box-shadow: inset 0 0 5px #aaa;
    box-shadow:         inset 0 0 5px #aaa;
}

.billing_frequency_area .monthly.active, 
.billing_frequency_area .annual.active {
    border-color: green;
    background: green;
    color: white;
}

#subscription_plan_labels .name {
    text-align: center;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: bold;
    background: #ddd;
    padding-left: 4px;
    padding-right: 4px;
    height: 64px;
    color: #333;
    justify-content:center;
}

#subscription_plan_labels .body {
    text-align: center;
    border-radius: 4px;
    background: #ddd;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    color: #333;
}

#subscription_plan_labels .price {
    font-size: 1.2rem;
}

.subscription_plan_selector {
    padding-left: 5px;
    padding-right: 5px;
    min-width: 160px;
}

.subscription_plan_selector .name {
    text-align: center;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: bold;
    background: #434d5c;
    color: white;
    height: 64px;
    justify-content: center;
}

.subscription_plan_selector .body {
    text-align: center;
    border-radius: 4px;
    background: #d0cee4;
}

.subscription_plan_selector .price {
    font-size: 1.2rem;
    color: #2b2573;
    text-shadow: 1px 1px 2px #aaa;
}

.subscription_plan_selector .arrow {
    color: transparent;
}

.subscription_plan_selector.active .name {
    background: #df7426;
}

.subscription_plan_selector.active .body {
    background: #f9dbc0;
}

.subscription_plan_selector.active .arrow {
    color: #df7426;
}

/* ^^^ PLANS AND PRICING ^^^ */

.features_grid {
    gap: 1em;
}

.features_grid card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background: #e1e3ee;
    border-radius: 4px;
}

.features_grid p {
    margin: 0;
}

.features_grid card_header {
    display: flex;
    align-items: center;
    color: #404560;
    text-align: center;
}

.features_grid card_header h3 {
    font-size: 2.2em;
}

.features_grid icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.8em;
}

.features_grid p i.fa-check {
    color: #008000;
}

.features_grid icon:nth-child(2n+1) {
    margin-right: .4em;
}

.features_grid icon:nth-child(2n+2) {
    margin-left: .4em;
}

.features_grid card.collaboration p {
    text-align: left;
}

.features_grid card.collaboration .real-time {
    --cursor-bg: #008000;
    --cursor-color: white;
    display: inline-block;
    border-right: 2px solid var(--cursor-bg);
    position: relative;
}

.features_grid card.collaboration .real-time::before {
    content: attr(data-username);
    position: absolute;
    right: -2px;
    top: 100%;
    background: var(--cursor-bg);
    line-height: 1.2em;
    padding: 2px 4px;
    color: white;
    border-radius: 4px 0 4px 4px;
}

.features_grid p {
    
}

.features_grid card.languages p span {
    white-space: pre;
}

.features_grid a.learn_more {
    font-weight: bold;
    font-size: .9rem;
}

h2 {
    font-family: var(--body-font);
    color: #434d5c;
    font-size: 0.95rem;
    font-weight: bold;
}

.institution_card img {
    border-radius: 8px;
    max-width: 350px;
    padding: 15px;
}

.institution_card:focus {
    outline: 0;
}

.experimental_tag {
    font-size: .9rem;
    color: #666;
}

@media(max-width: 1200px) {
  .features_grid {
      --c1: 100%;
      --c2: ;
      font-size: 1rem;
  }
}

@media(max-width: 1024px) {
  /*top_section {
      height: unset;
  }
  
  .showcase_bottom {
      position: absolute;
      bottom: 0;
      font-size: 1.2rem;
  }*/
  
  .showcase img {
      width: 100%;
      position: unset;
      max-height: unset;
      transform: unset;
  }
  
  .feature_card {
    width: 100%;
    min-width: 0px;
  }
}


@media(max-width: 500px) {
  top_section.grid_bg {
      height: auto;
      background-image: none;
  }
  
  .showcase {
    display: none;
  }
  
  .sample_project_button {
    display: none !important;
  }
  
  .features_grid card h3 {
    font-size: 1.8em;
  }
  
  .features_grid card icon {
    font-size: 1.5em;
  }
  
  .features_grid card icon img {
    width: 50px;
  }
  
  .features_grid card p br {
    display: none;
  }
  
  .institution_card img {
    max-width: 100%;
  }
  
  .showcase_bottom {
      position: absolute;
      bottom: 0;
      font-size: 1rem;
      height: 100%;
      background: rgba(0,0,0,.4);
  }
  
  top_menu_container, footer_container {
      width: 95%;
  }
  
  top_section h1 {
      font-size: 2.2em;
      margin: .1em 0;
  }
  
  top_section p {
      display: none;
  }
  
}