/* Reset and Base Styling */


 :root {
     --background-1: #000;
     --background-2: #fff;
     --primary-color: #14DC9A;
     --primary-light: #6BF1C5;
     --primary-dark: #0A6E4D;
     --color-purple: #C280FF;
     --color-purple-light: #DAB3FF;
     --color-purple-extralight: #f9f3ff;
     --color-purple-dark: #6400BF;
     --color-red: #F8625C;
     --color-red-light: #FAA09D;
     --color-red-dark: #A30D07;
     --color-blue: #00D2FF;
     --color-blue-light: #66E4FF;
     --color-blue-extralight: #eefcff;
     --color-blue-dark: #00697F;
     --color-pink: #FF68CC;
     --color-pink-light: #FFE1F5;
     --color-pink-dark: #B30077;
     --color-yellow: #FFE300;
     --color-yellow-light: #FFEE66;
     --color-yellow-dark: #7F7200;
     --color-green: #88F0CE;
     --color-green-light: #e7fcf5;
     --color-green-dark: #15A777;
     --body-font: 'Poppins', sans-serif;
     --heading-font: Consolas, 'Courier New', monospace;



     /* Brand Colors */
     --color-bg: #CEFAEC;
     --color-bg-2: #FFF9CC;
     --color-surface: #eefffa;
     --info_box: #CCF6FF;
     --color-accent: #C280FF;
     --color-accent-light: #DAB3FF;

     --color-button: #99EDFF;
     --color-button-disabled: #CCF6FF;
     --button-accent: #00D2FF;
     --color-text: #000000;
     --color-muted: #000000;
     --color-border: #14dc9a;

     --copy-button: #FFF399;
     --copy-button-hover: #FFE300;
     --copy-button-click: #deba08;

     --login-button: #9CF6D8;
     --login-button-hover: #14DC9A;


     --color-playground-button: #FFF399;
     --color-playground-button-hover: #FFE300;



     --turbowarp-button: #FAA09D;
     --turbowarp-button-hover: #F8625C;


     --python-button: #FFC3EB;
     --python-button-hover: #FF68CC;

     --feedback-button: #FFC3EB;
     --feedback-button-hover: #FF68CC;

     --color-button: #99EDFF;
     --button-accent: #00D2FF;

     --cheat-sheet-button: #FFF399;
     --cheat-sheet-button-hover: #FFE300;





     --instructions-button: #E7CCFF;
     --instructions-button-hover: #C280FF;

     --color-button-text: #000;

 }

 /* ====== RESET & BASE STYLES ====== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: var(--body-font);
     scroll-behavior: smooth;
 }

 /* General Styling */
 body {
     background-color: var(--color-bg);
     padding: 0px;
     font-family: var(--body-font);
     color: #000;
     max-width: 100vw;
     margin: 0 auto;
     overflow-x: hidden;
 }

 #content,
 #content_placeholder,
 .content {
     width: 80vw;
     max-width: 80vw;
     margin: 0px auto;
     min-height: 72vh;
 }

 #portal_login {
     width: 50vw;
     max-width: 50vw;
     margin: 0px auto;



 }







 /************************************************************************************************/
 /*  TEXT N STUFF */


 /* Headers */
 h1,
 h2,
 h3 {
     font-family: var(--heading-font);
     color: #000;
     margin-bottom: 16px;

 }



 h1 {
     font-family: var(--heading-font);
     color: #fff;
     text-align: center;
     letter-spacing: 0.5vw;

 }

 h2 {
     font-family: var(--body-font);
     font-size: 35px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #000;
     margin-top: 45px;
 }


 p {
     font-size: 16px;
     font-weight: normal;
 }

 ul,
 li {
     margin-bottom: 8px;
     margin-left: 10px;
 }

 ul {
     margin-left: 30px;
     line-height: 0.95;
     margin-top: 10px;
 }


 /* #content h2 {
    scroll-snap-type: start;
} */

 /* #content h2 {
    background-color: var(--color-bg);
    position: sticky;
    top:0px;
    padding-left:10px;
    padding-right:10px;
    margin-left:-10px;
    margin-right:-10px;
   
    
} */








 /************************************************************************************************/


 /* Section Containers */

 #content .section-style h2,
 .section-style h2 {
     text-align: left;
     background-color: #fff;
     padding: 0px;
     margin-top: 0px;
     text-transform: none;
     box-shadow: none;
     color: #000;
     font-size: 30px;
     font-family: var(--heading-font);
     letter-spacing: 0px;
     position: inherit;


 }







 .section-style h3 {
     margin-top: 12px;
         margin-bottom: 5px;
 }




 .section-style {
     background-color: #fff;
     border-radius: 5px;
     padding: 24px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
     margin-bottom: 20px;
     width: 100%;
     display: block;


     /* display:flex;
     flex-direction: row;
     justify-content: space-between; */
 }

 .section-style.iframe {
     background-color: #fff;
     border-radius: 5px;
     padding: 0px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
     margin-bottom: 20px;
     width: 100%;
     
     display: block;


     /* display:flex;
     flex-direction: row;
     justify-content: space-between; */
 }






 /************************************************************************************************/



 .section-row-2-column {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     margin: 0px;
     padding: 0px;
     /* margin-bottom: 40px; */
     /* justify-content:stretch; */
     align-items: stretch;
     /* justify-items: stretch; */
     /* width: 80vw;
     max-width: 80vw; */
     gap: 30px;
     width: 100%;
     height: min-content;
 }


 




 /************************************************************************************************/



 #hackathon-challenge {
     background-color: var(--primary-light);
     padding: 10px;
     width: 80%;
     margin: auto;
     border-radius: 10px;


 }

 #hackathon-challenge p,
 #hackathon-challenge h3 {

     text-align: center;

 }







 /************************************************************************************************/








 /************************************************************************************************/
 /* HEADER AND FOOTER */


 #header_title h2 {
     text-align: center;
     margin-top: 0px;
     text-transform: none;
     color: #fff;
     font-size: 30px;
     font-family: var(--heading-font);
     letter-spacing: 3px;

 }



 #logo_footer {
     max-width: 100vw;
     padding: 1vh 20px;
     margin: 2vh auto 1vh;
     background-color: #000;
     /* border-radius: 50px; */
     /* height:10vh; */
     /* height: 8vh; */
 }

 #logo_footer img {
     /* height: 2vh; */
     height: 6vh;
     margin: auto;
     display: block;
     /* vertical-align: middle; */
 }


 #header_title {
     width: 100vw;
     height:15vh;
     margin: 0px 0px 2vh;
     padding: 3vh 10px 2vh;
     border-radius: 0px;
     background-color: #000;

     overflow: hidden;
     /* display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center; */
 }

 #header_title h1 {
     /* width: 100vw;
     padding: 5px 30px; */
     margin: auto;
     /* color:#000; */
     /* background-color: #000; */
     /* border-radius: 50px; */
     /* max-width: 70vw;
     width: 70vw; */
     

     font-size: 6vh;
     font-weight: 800;
     text-align: center;
     font-family: var(--body-font);

     overflow: hidden;

 }

 #header_title img {
     max-height:3vh;
     margin: auto;
     display: block;

 }






















 /************************************************************************************************/
 /* easier button stuff */


 button {
     box-shadow: 2px 2px #666;
     border-radius: 10px;
     color: #000;
     border: none;
     cursor: pointer;
     transition: background-color 0.3s ease;
     padding: 5px 10px;
 }

 button:active {
     transform: translateY(2px);
     box-shadow: 2px 0px #666;
 }





 .yellow {
     background-color: #FFF399;
 }

 .yellow:hover,
 .yellow:active {
     background-color: #FFE300;
 }



 .purple {
     background-color: #E7CCFF;
 }

 .purple:hover,
 .purple:active {
     background-color: #C280FF;
 }

 .green {
     background-color: #9CF6D8;
 }

 .green:hover,
 .green:active {
     background-color: #14DC9A;
 }

 .red {
     background-color: #FAA09D;
 }

 .red:hover,
 .red:active {
     background-color: #F8625C;
 }

 .pink {
     background-color: #FFC3EB;
 }

 .pink:hover,
 .pink:active {
     background-color: #FF68CC;
 }

 .blue {
     background-color: #99EDFF;
 }

 .blue:hover,
 .blue:active {
     background-color: #00D2FF;
 }


 .button_grid {
     display: flex;
     gap: 10px;
     flex-direction: row;

     justify-content: center;
     margin: 20px 0px;
     flex-wrap: wrap;
     width: 100%;
     height: min-content;
 }



 .link_button {
     display: flex;
     box-shadow: 2px 2px #666;
     /* transform: translateY(2px); */
     padding: 5px 10px;
     color: #000;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     width: min-content;

 }





 .link_button a {
     text-wrap: pretty;
     text-align: center;
 }

 .link_button a,
 .link_button {
     display: flex;
     flex-direction: row;
     gap: 5px;
     flex-wrap: nowrap;
     justify-content: center;
     height: fit-content;

     align-items: center;
     width: fit-content;
     /* max-width:fit-content; */
     text-decoration: none;
     color: #000;

 }


 .link_button img {
     max-height: 40px;
     height: 40px;
     display: flex;
 }


 .link_button:active {

     transform: translateY(2px);
     box-shadow: 2px 0.5px #666;
 }

 .link_button.large img {
     height: 60px;
     max-height: 60px;
 }

 .link_button.large p {
     font-size: 20px;
 }

 .link_button.large {
     width: 350px;
     height: 80px;
 }

 .link_button.file_download {
    padding: 2px 6px;
 }
  .link_button.file_download p {
    font-size: 12px;
 }
   .link_button.file_download img {
     max-height: 20px;
     height: 20px;
 }


 .img_button {
     display: flex;
     box-shadow: 2px 2px #666;
     /* transform: translateY(2px); */
     padding: 0px;
     color: #000;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     width: min-content;
     border: 1px solid #c6c6c6;
     max-height: 50px;


 }







 /* .img_button a {
     text-wrap: pretty;
     text-align: center;
 } */

 .img_button a,
 .img_button {
     display: flex;
     flex-direction: row;
     /* gap: 5px; */
     flex-wrap: nowrap;
     justify-content: center;
     height: 50px;


     align-items: center;
     width: fit-content;
     /* max-width:fit-content; */
     /* text-decoration: none; */
     border-radius: 10px;
     color: #000;
     padding: 0px;

 }


 .img_button img {
     max-height: 50px;
     height: 50px;
     display: flex;
     border-radius: 10px;
     /* object-fit: cover; */
 }

 .img_button:hover {
     background-color: #c6c6c6;
 }

 .img_button:active {

     transform: translateY(2px);
     box-shadow: 2px 0.5px #666;
     background-color: #acacac;
 }



 .playground_button img {
     max-height: 70px;
     height: 70px;
     max-width: 95px;
     width: 95px;
     margin-top: 2px;
     margin-bottom: 2px;


 }




 .scratch_button img {
     max-height: 90px;
     height: 90px;
     max-width: 80px;
     width: 80px;


 }

 /* .turbowarp-link img {
     height: 35px;
     max-width: 40px;
 } */

 .tw-extension img {
     max-height: 70px;
     height: 70px;
     width: 70px;
     max-width: 70px;
 }

 .trinket-img img {
     max-height: 18px;
     /* max-width: 100px; */
 }

 .vs-img img {
     max-height: 24px;
     /* max-width: 80px; */
 }










 /************************************************************************************************/






 /*ADDITIONS WITH PICTURE PASSWORDS ETC*/

 .picture_pwds {
     display: flex;
     flex-wrap: wrap;

     justify-content: center;
     gap: 5px;

     margin-top: 10px;
 }

 .picture_pwds img {
     width: 19%;
     height: 19%;
     border: 2px solid transparent;
     cursor: pointer;
     border-radius: 40px;
     object-fit: cover;
 }

 .picture_pwds img.selected {
     border-color: var(--color-accent);
     background-color: var(--color-accent);
     border-radius: 10px;
 }






 
 /************************************************************************************************/






 #info_login_box {
     /* display: flex; */
     width: 40%;
     align-items: stretch;
     /* flex-direction: column; */
     /* background-color: var(--info_box); */
     border-radius: 10px;
     /* padding: 10px; */


 }

 #credentials {
     width: 60%;
 }

 #pre_login_stuff {
     background-color: var(--info_box);
     border-radius: 10px;
     padding: 10px;
     height: max-content;
     margin-top: 10px;

 }


 #login_button_and_info button {
     text-align: center;
     font-size: 16px;
     padding: 8px 15px;
     background-color: var(--login-button);


 }

 #login_button_and_info button:hover {
     background-color: var(--login-button-hover);
 }


 #login_button_and_info button:active {
     transform: translateY(2px);
 }




 /************************************************************************************************/

 #login_button_and_info {

     display: flex;
     /* font-weight: 400; */
     /* font-size: 16px; */
     flex-direction: row;
     width: 100%;
     justify-content: start;
     /* text-align: center; */

     margin: 10px 0px 15px;
     /* margin-left:35px; */
 }

 /* These are the little status icons INSIDE a button */
 /* #login_button_and_info button {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
#login_button_and_info img {
    margin: 0px;
    /* margin-left:10px; */
 /* padding: 0px;
    height:20px;
    justify-content: start;
    align-items: center;

  
} */


 /* #status_login,
#status_login * {
    margin: 0px;
    padding: 0px;
    justify-content: start;
    align-items: center;
    height:20px;
    
} */








 #login_status_info img {

     margin: 0px 10px 0px 10px;
     align-self: center;
     height: 30px;
     width: 30px;
     /* width: 20px; */
 }

 #login_status_info {
     display: flex;
     text-align: left;
     flex-direction: row;
     margin-left: 20px;
     align-items: center;
 }





 /************************************************************************************************/



 #login_success_container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     opacity: 0;
     gap: 20px;
     transition: opacity 0.5s ease;
     margin-top: 10px;
     text-align: left;
     /* background-color:var(--cheat-sheet-button); */
     align-items: stretch;

 }



 #key_card {
     padding: 10px;
     background-color: #F3E6FF;
     align-items: center;
     margin-bottom: 10px;
     margin-top: 10px;
     border-radius: 10px;
 }

 #key_card.keys_section {
     width: 30%;
     /* width:30%; */

 }

 #key_card.files_section {
     width: 70%;
     /* width:60%; */

 }

 /* #key_card h2 {
     text-align: left;
     margin: -20px auto 2px 10px;
     width: min-content;
     color: #fff;
     text-wrap: nowrap;
     background-color: var(--color-purple-dark);
     border-radius: 15px;
     font-size: 18px;
     text-transform: uppercase;
     padding: 5px 10px;
     /* z-index: ; */
 /* position: relative;
    z-index: 2;
 } */
 #key_card h3 {
     margin-bottom: 2px;
     margin-top: 10px;
     text-transform: capitalize;
 }


 .key_info_row {
     /* background-color: var(--checkpoint-button-hover); */
     margin: 10px 0px;
     text-align: left;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
 }

 /* .key_info_row p {
     margin-right: 5px;
     width: 25%;
     max-width: 25%;

 } */
 .key_info_row.dropbox p {
     margin-right: 5px;
     /* width: 70%;
     max-width: 70%; */

 }

 .key_info_row .key_redacted {
     /* width: 50%;
     max-width: 50%; */
     font-family: var(--heading-font);


 }


 .key_info_row button,
 .key_info_row .link_button {
     /* width: 25%;
     max-width: 25%; */
     background-color: var(--copy-button);
 }


 .key_info_row .link_button,
 .key_info_row button {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 15px;
     padding: 2px 5px;
     margin-right: 0px;
     margin-left: auto;
     transition: background-color 0.3s ease;
     text-align: center;
     justify-self: end;


 }

 /* {
     width: 30%;
     max-width: 30%;

 } */

 .key_info_row .link_button a {
     padding: 0px 2px;
     justify-content: start;
     /* background-color: var(--copy-button); */

 }


 .key_info_row .link_button p,
 .key_info_row button p {
     /* margin-right:5px; */
     width: max-content;


 }

 .key_info_row .link_button a img,
 .key_info_row button img {
     height: 20px;
     width: 20px;
     margin: 2px 6px 2px 2px;
 }


 .key_info_row .link_button:hover,
 .key_info_row button:hover {
     background-color: var(--copy-button-hover);
 }


 .key_info_row .link_button:active,
 .key_info_row button:active {

     background-color: var(--copy-button-click);
     transform: translateY(2px);
 }






 /************************************************************************************************/





 button.file_form_button {
     background-color: var(--login-button);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 15px;
     padding: 5px 10px;
     margin-right: 0px;
     margin-left: auto;
     /* width:25%;
max-width: 25%; */
     text-align: center;
     justify-self: end;
     align-self: end;

 }

 button.file_form_button img {
     height: 20px;
     width: 20px;
     margin: 2px 6px 2px 2px;
 }

 /* button.file_form_button p {
   
     width: max-content;
  } */


 button.file_form_button:hover {
     background-color: var(--login-button-hover);
 }

 button.file_form_button:active {
     transform: translateY(2px);
 }



 /* 


 #upload-form button,
 #info_login_box button,
 #login_success_container .button_link a {
     border: none;
     background-color: var(--primary-light);
     color: var(--color-button-text);
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     box-shadow: 2px 2px #999;
     padding: 10px 20px;
 }

 #upload-form button,
 #login_success_container button,
 #login_success_container .button_link a {
     padding: 2px 10px;
     align-items: center;
     display: flex;
     font-size: 14px;
     text-decoration: none;

 } */

 /* #login_success_container .button_link a
 {

    font-size: 14px;
    text-decoration: none;
 } */
 /* 
 #login_success_container button *,
 #login_success_container .button_link a * {
     align-items: center;
     align-self: center;
     text-decoration: none;
     color: #000;
 }

 #login_success_container img {
     width: 20px;
     height: 20px;
     padding: 0px;
     margin: 0px;
 } */
 /* 
 #upload-form button:hover,
 #info_login_box button:hover,
 #login_success_container .button_link:hover {
     background-color: var(--primary-color);
 } */

 input[type="text"],
 input[type="number"],
 input[type="file"],
 input[type="password"],
  input[type="radio"],
 textarea,
 select {
     width: 100%;
     display: block;
     padding: 0.6rem;
     border: 1px solid var(--primary-color);
     border-radius: 8px;
     background: white;
     font-size: 1rem;
     margin-bottom: 5px;
 }


 /* #info_login_box {
     width: 30%;
 } */

 #files_fields {
     display: flex;
     flex-direction: row;
     gap: 10px;
 }

 #picture_password {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     width: 100%;
     gap: 10px;
     align-items: stretch;
 }

 label {
     display: block;
     margin-top: 10px;
     margin-bottom: 5px;
     font-weight: 600;
 }



 /************************************************************************************************/



 /*  */
 /* show files */

 #file_info {
     display: flex;
     flex-direction: column;
     /* min-height: 200px; */
     height: fit-content;
     border-radius: 10px;
     border: 2px solid var(--color-purple-dark);
     /* background-color: var(--color-purple-extralight); */
     padding: 5px;
     /* outline: #000; */
     /* outline-offset: ; */
 }




 /************************************************************************************************/


 file-list * {
     background-color: transparent;
 }









 #file-list button {
     margin-left: 15px;
     font-size: 17px;
     background-color: var(--login-button);
     margin-bottom: 15px;
 }

 #file-list button:hover {

     background-color: var(--login-button-hover);
 }

 #file-list {

     margin-top: 10px;
     margin-bottom: 15px;
 }

 .download_links_list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: space-evenly;
     align-items: center;
     margin-top: 10px;

 }

 #file-list .download_links_list *,
 #file-list .download_links_list p * {

     /* height: 20px; */
     margin: 0px;
     padding: 0px;
     display: flex;
     font-size: 16px;
     align-items: center;
     text-decoration: none;

     text-decoration: none;
     color: #000;
     background-color: transparent;
     box-shadow: none;

     transform: none;
 }

 #file-list .download_links_list p * {
     gap: 5px;
 }

 #file-list .download_links_list img,
 #file-list img,
 #download_status img {
     display: inline-block;
     height: 18px;
     vertical-align: middle;
     margin-top: 0;
     margin-bottom: 0px;
 }





 #file-list .download_links_list p {

     padding: 5px 10px;
     transition: background-color 0.3s ease;
     border-radius: 10px;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
     gap: 2px;
     font-size: 16px;


 }


 #file-list .download_links_list .list_item_file p {
     background-color: var(--color-bg-2);

 }

 #file-list .download_links_list .list_item_file p:hover {
     background-color: var(--color-yellow);
 }



 /* 

#file-list .list_item_folder p *,
#file-list .list_item_folder p *:hover,
#file-list .list_item_folder p *:active {
    background-color: transparent;
} */

 #file-list .download_links_list .list_item_folder p {
     background-color: var(--color-button-disabled);

 }

 #file-list .download_links_list .list_item_folder p:hover {
     background-color: var(--color-blue);
 }

 #file-list .download_links_list p:active {
     transform: translateY(2px);
 }

 /* #file-list .download_links_list p * {
    transition:none;
    transform: none;
    align-items: center;
    padding: 0px;
    margin:0px;
} */



 /* 
  #file-list .download_links_list a,
  {
    display:flex;
    align-items: center;
  } */



 /*  */


 /************************************************************************************************/

 /* 

 /* viewing view or upload boxes */



 #file_view_button {
     display: flex;
     font-weight: 600;
     align-items: center;
     justify-content: center;

 }

 #file_view_button button {
     padding: 5px 25px;
     font-weight: bold;
 }


















 /* .show_files_div,
 .upload_files_div {
     min-height: 200px;
     display: flex;
     flex-direction: column;
     
 } */

 .show_files_div {
     display: none;




 }





 #option_show_files button,
 #option_upload_files button {
     font-size: 12px;
     background-color: #fff;
     border-radius: 0px;
     border-color: var(--color-purple-light);
     border-width: 1px;
     border-style: solid;
     padding: 5px 20px;
     height: max-content;
     text-wrap: nowrap;
     box-shadow: none;
     transform: none;

 }


 #option_upload_files button {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;

 }

 #option_show_files button {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;

 }

 #option_show_files button:disabled,
 #option_upload_files button:disabled {
     font-size: 12px;
     background-color: var(--color-purple-light);
     /* color: #b4b4b4; */
     cursor: auto;

 }

 .visible {
     display: block;
 }

 .invisible {
     display: none;
 }

 .normal {
     margin: 0px;
     padding: 0px;
     display: block;
 }








 #help_tooltip {
     background-color: var(--primary-color);
     height: 40px;
     width: 40px;
     position: fixed;
     bottom: 2vh;
     right: 3vw;
     border-radius: 20px;
     padding: 2px;
     z-index: 2;
     box-shadow: 2px 2px #666;
     transition: background-color 0.3s ease;

 }

 #help_tooltip img {
     height: 36px;
 }


 #help_tooltip .ask_question::after {
     content: " ";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: 120px;
     border-width: 10px;
     border-style: solid;
     border-color: black transparent transparent transparent
 }

 #help_tooltip .ask_question {
     opacity: 0;
     visibility: hidden;
     text-wrap: wrap;
     width: 320px;
     /* height:auto; */
     border-radius: 10px;
     padding: 10px;
     bottom: 48px;
     right: -10px;
     background-color: black;
     color: #fff;
     position: absolute;
     transition: opacity 0.3s ease;
     /* transition: visible 0.3s ease; */

 }

 #help_tooltip .ask_question p {
     margin-bottom: 5px;
 }

 iframe {
     margin-top: 5px;
     overflow: hidden;
     border: 1px solid var(--primary-color);
     border-radius: 5px;
     max-width: 100%;
     margin: 5px auto;
        display: flex;
 }

 iframe#instructions {
     margin-top: 5px;
     overflow: hidden;
     border: none;
     width: 100%;
 }

 /* #help:active {
 transform: translateY(2px);
 
} */

 #help_tooltip:hover {
     background-color: var(--primary-dark);
     transition: background-color 0.3s ease;
 }

 #help_tooltip:hover .ask_question,
 .ask_question:hover {
     opacity: 1;
     visibility: visible;
     transition: opacity 0.3s ease;

 }







 #playgrounds {
     width: 160%;
 }






 .link_button.extend_link img {
     height: 20px;
     max-height: 20px;
 }


 pre {
     background-color: var(--info_box);
     padding: 10px;
     border-radius: 6px;
     overflow-x: auto;
     margin-bottom: 1em;
     font-family: 'Courier New', monospace;
     line-height: 120%;
     font-size: 14px;
 }

 code {
     background-color: var(--info_box);
     padding: 2px 5px;
     border-radius: 4px;
     font-family: 'Courier New', monospace;
 }











 .tools_resources.section-row-2-column {
gap:20px;
justify-content: space-between;
 }
  .tools_resources.section-row-2-column  .button_grid{
margin:5px 0px;
width:min-content
 }



 /* Responsive */
 @media (max-width: 1000px) {
     .window {
         flex-direction: column;
     }
 }