/************ Basic Resets ************/

:root {
    --blue: #557a95;
    --blue: #7395ae;
    --blue2: #659dbd;
    --blue: #5085a5;
    --blue3: #1b9ce5;
    --blue: #6cdaee;
    --blue: #2e9cca;
    --blue: #5ab9ea;
    --blue: #84ceeb;
    --blue: #a8d0e6;
    --blue: #8fc1e3;
    --blue: #d2fdff;
    --blue6: #3b8beb;
    --blue5: #90ccf4;
    --blue4: #5da2d5;
    --blue: #97aabd;
    --blue: #77a6f7;
    --blue1: #d6e9fee5;
    --blue: #d3e3fc;
    --blue: #86b3d1;
    --blue: #4d6d9a;

    --green: #5cdb95;
    --green3: #8ee4af;
    --green2: #afd275;
    --green1: #86c232;
    --green: #53900f;
    --green4: #15db95;
    --green: #479761;
    --green: #16ffbd;

    --yellow: #ffe400;
    --yellow: #faed26;
    --yellow: #fccd04;
    --yellow: #fbeec1;
    --yellow: #f8e9a1;
    --yellow: #d6ce15;
    --yellow: #f3d250;
    --yellow: #fce181;

    --cream: #edf5e1;
    --cream: #e7e3d4;
    --cream: #edeae5;

    --white: #feffff;
    --white: #f7f9fb;
    --white1: #fff;

    --pink: #f172a1;
    --pink: #e64398;
    --pink: #f78888;
    --pink: #c96567;
    --pink: #edb5bf;
    --pink: #cb2d6f;

    --orange: #f79e02;

    --rich-black: #061923;
    --firey-rose: #FF5964;
    --alice-blue: #EBF8FF;
    --jasmine: #FFE099;
    --tea-green: #C8D6AF;
    --tea-green-light: #F7FFEA;
    --english-violet: #48284A;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav ul,
nav ol {
    list-style-type: none;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

a:link {
    color: var(--blue4);
    font-weight: bold;
}

a:visited {
    color: var(--blue4);
}

a:hover {
    color: #2b6cb6;
    border-bottom: 2px solid #2b6cb6;
    padding: 1px 0;
}

a:active {
    color: var(--blue4);
}


/************ Basic typography *************/

body {
    font-family: Century;
    /*font-family: Georgia,serif;*/
    color: var(--rich-black);
    padding-top: 120px;
    background-color: var(--white1);
}

h1,
h2,
h3,
h4 {
    font-family: Century;
    font-weight: 600;
}

h2 {
    font-size: 24px;
    margin: .8em 0;
    color: var(--rich-black);
}

h3 {
    font-size: 20px;
    margin: 1em 0;
    color: var(--blue6);
}

h4 {
    margin: 1em 0;
}

h5 {
    margin: 1em 0;
}


h6 {
    margin: 1em 0;
}


p {
    margin: 1em;
    line-height: 1.4em;
}

code {
    background-color: khaki;
    /*background-color: #f5f2f0;*/
    border-radius: 2em;
    font-family: "Courier New", Courier, monospace;
    /*font-family: Roboto Mono,monospace;*/
    padding: 0 0.5em;
}

/************ Basic Page Sections *************/

#page {
    
    margin: auto;
}

section{
    padding: 20px;
    
}

section div{
    border-bottom: 2px solid #4793ea;
    padding: 2% 0;
}

.forms div{
    border-bottom: 0;
}

.AI_title, .ML_title, .javascript_title{
    font-family: 'Courier New', Courier, monospace;
    font-size: 2em;
    font-weight: bold;
    color: #5995da;
}

section ul, section ol, section dl{
    margin-left: 2em;
    margin-bottom: 1em;
    display: block;
}

section ul li, section ol li, section dl dt, section dl dl{
    
    margin-bottom: 0.5em;
}

section dd{
    margin-inline-start: 40px;
}

.images img{
    display: inline;
}

.basic_elements h1, h2, h3, h4, h5, h6{
    margin-left: 15px; 
}

.basic_elements h1{
    margin-top: 1em;
}


/************ Header Styles *************/

header {
    
    padding: 5px 0;
    /*background-color: rgba(255,224,153,0.75);*/
    background-color: var(--blue1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
    
}


.logo {
    position: relative;
    margin: auto;
    width: 100%;

}

.logo h1 {
    font-size: 24px;
    color: var(--blue3);
    position: absolute;
    top: 10px;
    left: 42px;
    font-family: "Courier New", Courier, monospace;
}

.logo img {
    width: 50px;
}

.logo img:hover {
    transform: scale(1.2);
}

header nav ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    
}

header nav ul li a {
    display: block;
    font-family: 'Quicksand', sans-serif;
    color: var(--alice-blue);
    font-weight: 600;
    padding: 0 5px;
    width: 100%;
    font-size: 1.5em;
}

.menu{
    padding: 0 2%;
}

.icons{
    padding: 5px 0;
}

.material-symbols-outlined {
    font-size: 2em;
    color: #2fd80e;
    padding: 0 1em;
}

.night {
    border: none;
    background-color: var(--blue1);
    position: absolute;
    top: .5em;
    right: .5em;
    padding-block: 1px;
    padding-inline: 6px;
}

.night:hover {
    background-color: rgb(153, 154, 155);
    border-radius: 50%;
}

.night .material-symbols-outlined {
    font-size: 2em;
    color: black;

}

/************ Footer Styles *************/

footer {
	/*background: var(--blue5);*/
    background: var(--green3);
	color: var(--blue2);
	margin-bottom: 0;
    padding: 5px 0;
}

footer .logo {
	margin-bottom: 20px;
}

footer .logo h1 {
	font-size: 24px;
    color: var(--blue3);
    position: absolute;
    top: 10px;
    left: 42px;
    font-family: "Courier New", Courier, monospace;
    
}

footer nav ul {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
}

footer nav ul a{
    font-size: 2em;
}

footer nav ul li:hover {
    transform: scale(1.3);
}

footer article{
	font-size: 1em;
	text-align: center;
	color: var(--blue3);
    font-family: "Courier New", Courier, monospace;
}

footer a:hover{
    border-bottom:0;
}


/************ Selected Style *************/
.selected {
	background: var(--green2);
	transition: all 1s;
}

/************ Code Style *************/

.coding{
    position: relative;
    border-bottom: none;
    padding: 0;
    margin: 1em 1em 1em 0;
    
}

.coding pre {
    position: relative;
    /*background-color: #272822;  Match the theme background */
    color: #f8f8f2;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto; /* Horizontal scrolling for long code lines */
    font-size: 14px;
    line-height: 1.5;
    
}

.coding .language-python {

    margin: 0;
    text-align: left;
    
}

.coding pre code .keyword {
    font-weight: bold;
}

/* Additional styles for better code readability
.coding pre code {
    font-family: 'Courier New', Courier, monospace;
}

.language-python {
    color: #66d9ef; /* Python specific keywords color 
}

 
.coding pre code .keyword {
    color: #66d9ef;
    font-weight: bold;
}

.coding pre code .string {
    color: #e6db74;
}

.coding pre code .comment {
    color: #75715e;
}
*/

.copy-button {
    font-family: "Courier New", Courier, monospace;
    /* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    background-color: #66d9ef;
    border: none;
    border-radius: 3px;
    color: #272822;
}

.copy-button:active {
    background-color: #2e8b57;
}

.copy-button:hover {
    background-color: var(--blue2);
    color: var(--white);
}

/************ Machine Learning *************/
div.regression_errors mjx-container[jax="CHTML"][display="true"] {
    display: block;
    text-align: left;
}

div.regression_errors_legend mjx-container[jax="CHTML"][display="true"] {
    display: inline-block;
    text-align: left;
    margin: 0.5em 0;
    font-weight: 400;
}

div.regression mjx-container[jax="CHTML"][display="true"] {
    display: block;
    text-align: left;
}

div.regression_legend mjx-container[jax="CHTML"][display="true"] {
    display: inline-block;
    text-align: left;
    margin: 0.5em 0;
    font-weight: 400;
}

.regression_errors, .regression{

    text-align: left;
    margin: 0;
    padding: 0;
    border-bottom:0;
}

.regression_errors_legend, .regression_legend{
    text-align: left;
    margin: 0;
    padding: 0;
    border-bottom:0;
}

.regression_errors_legend ul, .regression_legend ul{
    text-align: left;
    margin: 0;
    padding: 0;
}

.regression_errors_legend ul li, .regression_legend ul li{
    list-style-type:none;
    display: list-item;
    margin: 0;
    padding: 0;
    text-align: left;
} 



.table_errors{
    border-collapse: collapse;
    
     margin: 1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-spacing: 2px;
    border: 2px solid black;
}

.table_errors thead{
    border: 2px solid black;
    background-color: var(--green2);
}

.table_errors th {
    text-align: center;
    height: 40px;
    width: 100px;
    border: 1px solid black;
    font-size: 10px;
}

.table_errors td{
    font-size: 13px;
    text-align: center;
    border: 1px solid black;
    height: 30px;
    width: 30px;
}

.regression_title{
    color: var(--green1);
}

/************ Dark Mode *************/
.dark-mode {
    background-color: black;
    color: white;
}

.dark-mode header {
    background-color: black;
    color: white;
}

.dark-mode footer {
    background-color: black;
    color: white;
}

.dark-mode nav {
    background-color: black;
    color: white;
}

.dark-mode h2 {

    color: white;
}

.dark-mode .night {
    border-radius: 50%;
}

.dark-mode code {
    background-color: darkgray;
}

.dark-mode a {
    color: darkgray;
}

.dark-mode a:hover {
    color: darkgray;
    border-bottom: 2px solid darkgray;
    padding: 1px 0;
}

/************ Tablet Size Styles *************/
@media only screen and (min-width: 760px) {

	/* footer styles 
	.footer {
		display: flex;
	}

	.footer .logo {
		flex: 1;
		margin: 0;
	}

	footer nav {
		flex: 1;
		margin: 10px 20px 0 0;
	}

	.footer article {
		flex: 2;
		margin-top: 10px;
	}*/

    /* form styles */
    .form-row {
        flex-direction: row;
        align-items: flex-start;
        /* To avoid stretching */
        
    }

    .form-row input[type='text'],
    .form-row input[type='email'],
    .form-row select,
    .form-row textarea {
        width: 250px;
        height: initial;
    }

    .form-row label {
        text-align: right;
        width: 120px;
        margin-top: 7px;
        padding-right: 20px;
    }

    .legacy-form-row {
        margin-bottom: 10px;
    }

    .legacy-form-row legend {
        width: 120px;
        text-align: right;
        padding-right: 20px;
    }

    .legacy-form-row legend {
        float: left;
    }

    .form-row .instructions {
        margin-left: 120px;
    }

    .form-row .checkbox-label {
        margin-left: 120px;
        width: auto;
    }

    .form-row button {
        margin-left: 120px;
    }

    .form-row input {
        margin-left: 120px;
    }

}


/************ Desktop Size Styles *************/

@media only screen and (min-width: 1200px) {

	/* Header styles */
	header nav {
		font-size: 1.1em;
	}

	header .logo h1 {
		font-size: 2em;
		top: 12px;
		left: 60px;
	}

	header .logo img {
		width: 70px;
	}

    .icons{
        font-size: 1.3em;
        padding: 0;
    }

    section{
        padding: 30px;
        
    }

	/* Footer styles */
	footer .logo h1 {
		font-size: 2em;
		top: 12px;
		left: 60px;
	}

	footer .logo img {
		width: 70px;
	}
    
    footer nav ul {
        display: inline-flex;
        margin: 0 auto;
        
    }
    
    footer nav {
		padding-bottom: 2%;
        text-align: center;
	}

	footer nav ul li {
		margin: 0 50px;
	}

    footer nav ul a{
        font-size: 2.5em;
    }

    footer article{
        font-size: 1.3em;
    }
	
}

/************ Maximum Size Styles *************/

@media only screen and (min-width: 1500px) {
    section{
        padding: 50px;
        
    }

    footer nav ul a{
        font-size: 3em;
    }


}