/* style.css */

@import url('sidebar.css');
@import url('colors.css');
@import url('buttons.css');
@import url('tables.css');


* {
	box-sizing: border-box;
}

body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    background: #f6f8fa;
    /*font-size: large;*/
}


.main-container {
  display: flex;
  height: 100vh;
}




/* Main content stretches */


/* this is for the home page frame */
.main-container {
    display: flex;
    height: 100vh;
    transition: all 0.3s ease;
}


/* this is container for the contents pages - so inside got margin */
.container {
    display: block;
    height: 100vh;
    margin: 3em;
    margin-bottom: 100px;

}


.container-2rows {
  display: flex;
  flex-direction: row;
  gap: 2em;
  margin-bottom: 2em;
}

.container-squished {
    width: 70%;
    margin: 0 auto;

}


/* Container for input-container and output-container side by side */
.column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0 auto;
}




/* "code pill" mainly for "methods" or examples*/
code {
  display: inline-block;
  background: #f5f5fa;      
  color: #36395a;          
  padding: 3px 12px;  
  text-align: center;
  margin: 0.3em;
  border-radius: 13px;
  font-style: normal;
  font-family: 'Courier', monospace;
  font-weight: normal;
  white-space: nowrap;
  border: 0.5px solid #444;
  font-size: small;
}


.method-list {
  display: inline-block;
  background: #f5f5fa;      
  color: #36395a;          
  padding: 3px 12px;  
  text-align: center;
  margin: 0.3em;
  border-radius: 13px;
  font-style: normal;
  font-family: 'Courier', monospace;
  font-weight: normal;
  white-space: nowrap;
  border: 0.5px solid #444;
  font-size: small;
}


/* copy highlight */
.copy-style {
    cursor: pointer;
}
.copy-style:hover {
    background: #ffe6e9; /* light pink */
}
.copied {
    background-color: pink;
    transition: background-color 0.2s ease;
}



input, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1.5px solid #bbb;
    font-size: large;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    min-height: 3em;
}

/* output boxes are like those mini boxes of generated stuff (eg. variables, date variab;es) */
.output-box {
    min-height: 3em;
    width: 100%;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid #bbb;
    font-size: large;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    background: white;
    font-family: "Courier New", Courier, monospace;
    cursor: pointer;
    font-size: large;
    transition: background-color 0.3s ease;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    margin: 10px;
}

.output-box pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
}

.output-box:hover {
    background: #ffe6e9; /* light pink */
    box-shadow: 0 6px 18px rgba(0,0,0,0.06); 
}

.output-box:active {
    background: pink;
}

.output-label {
    font-weight: bold;
    color: #214a6a;
    font-family: "Arial", sans-serif;
    margin-bottom: 0.3em;
}


/* this is mainly for the date variables (layout the box items into like grid) */
.output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em;
  margin-top: 1.5em;
}



/* These are the Pink and Blue input and output background */
.input-container {
    flex: 1 1 350px;
    background: #fff1f1;
    border-radius: 15px;
    padding: 1.5em;
}

.output-container {
    flex: 1 1 350px;
    display: flex;
    flex-direction: column;
    background: #e3f4fa;
    border-radius: 15px;
    padding: 1.5em;
}



/* for options paragraphs (current options box) */
.option-item {
    margin-bottom: 1em;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}


.options-list-container {
    flex: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1rem;
    /* transparent */
    background: rgba(252, 252, 253, 0.5);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}



/* h1 is for the content PAGE TITLE BANNER (at the top) */
h1 {
    text-align: center;
    word-wrap: break-word;
    font-size: xx-large; 
    font-weight: bold;
    color: ;
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    padding: 1em;
    letter-spacing: 1px; 
    margin-bottom: 1.5em;
}


/* h2 - Category Header */
h2 {/*
    border-bottom: 3px solid #4a90e2;*/
    font-size: x-large;
}

h2 a {
    color: inherit;
    text-decoration: none;
}

h2 a:hover {
    color: darkblue;
}



/* h3 - Sub-Category Header */
h3 {
    font-size: larger;
    /*border-bottom: 2px solid #4a90e2;*/
}

h3 a {
    color: inherit;
    text-decoration: none;
}

h3 a:hover {
    color: darkblue;
}




/* Note Boxes */

/* red for warning, danger */
.note-red {
  background: #F8BDCF;
  border-left: 10px solid #EA3F74;
  padding: 12px 15px;
  margin: 15px 0 30px 0;
  font-style: italic;
  max-width: 100%;
}


/* yellow for warning */
.note-yellow {
  background: #fff3cd;
  border-left: 10px solid #F3C65A;
  padding: 12px 15px;
  margin: 15px 0 30px 0;
  font-style: italic;
  max-width: 100%;
}




/* green for success */
.note-green {
  background: #D4EFDA; 
  border-left: 10px solid #80D194;
  padding: 12px 15px;
  margin: 15px 0 30px 0;
  font-style: italic;
  max-width: 100%;
}

/* blue for neutral */
.note-blue {
  background: #E1F2F6; 
  border-left: 10px solid #9DD0E7;
  padding: 12px 15px;
  margin: 15px 0 30px 0;
  font-style: italic;
  max-width: 100%;
}

.info-box {
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    font-size: small;
}


.paper {
  background: #FAF9F6; /* off white */
  border: 1px solid #e0d9c6;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 2em;
  margin: 2em;
  gap: 1em;
}

.paper .output-container,
.paper .input-container {
  margin-bottom: 1.5em; 
}


h1,
.output-box
.options-list-container,
.input-container, .output-container,
.info-box,
.paper,
.note-red, .note-blue,
.note-green, .note-yellow {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}




.center {
    text-align: center;
}