@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Oregano:ital@0;1&display=swap');
  
/* https://coolors.co/palette/ff499e-d264b6-a480cf-779be7-49b6ff */  
:root {
  --white: rgba(255, 255, 255, 0.8);
  --white8: rgba(255, 255, 255, 0.8);
  --white75: rgba(255, 255, 255, 0.75);
  --white6: rgba(255, 255, 255, 0.6);
  --white5: rgba(255, 255, 255, 0.5);
  --white35: rgba(255, 255, 255, 0.35);
  --dark: rgb(0, 0, 0);
  --dark85: rgba(0, 0, 0, 0.85);
  --dark8: rgba(0, 0, 0, 0.8);
  --dark7: rgba(0, 0, 0, 0.7);
  --dark4: rgba(0, 0, 0, 0.4);
  --dark2: rgba(0, 0, 0, 0.2);
  --link: rgb(255, 73, 158);        /* PINK */
  --link5: rgba(255, 73, 158, 0.5); /* PINK */
  --link7: rgba(255, 73, 158, 0.7); /* PINK */
  --h2: rgba(210, 100, 182, 0.75);  /* PINK2 */
  --h3: rgba(164, 128, 207, 0.75);  /* PURPLE */
  --bold:rgba(164, 128, 207, 0.75); /*rgb(73, 182, 255);         BLUE */
  --bold2:rgba(164, 128, 207, 0.25); /*rgb(73, 182, 255);         BLUE */
  --forms: rgb(73, 182, 255);       /* BLUE */  /* rgba(33, 181, 235, 0.7); */
  --forms9: rgba(73, 182, 255, 0.9); /* BLUE */
  --forms7: rgba(73, 182, 255, 0.7); /* BLUE */
  --bad: #B90000;                 /* RED */
  --good: #267700;                  /* GREEN */
}
* {
  box-sizing: border-box;
  scroll-margin-top: 100px;
}  
body {
  background-attachment: fixed;
  background-size: cover;
  background-position: top center;
  margin-top: 100px;
  font-size: 20px;
  font-family: 'Inconsolata', monospace;
}

main {
  width: 90%;
  border: 9px solid var(--white);
  box-shadow: 0px 0px 30px 0px var(--dark);
  border-radius: 20px;
  background-color: var(--dark85);
  padding: 20px;
  margin: auto;
  margin-bottom: 1000px;
  color: white;
}

main h1 {
  color: var(--white);
  font-size: 3em;
  font-family: 'Oregano', cursive;
  margin-bottom: 10px;
  text-shadow: 3px 3px 0px var(--link7);
  line-height: 1.2em;
}

main h2, main h3 {
  margin: 50px 0px 20px;
  color: var(--white);
  line-height: 1.3em;
  font-family: 'Oregano', cursive;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--h3);
}
main h2 {
  font-size: 2em;
  background-color: var(--h2);
}
main h2 a, main h3 a {
    font-size: .6em;
    float: right;
    min-width: 40px;
    text-align: center;
    margin-right: 8px;
}
main h3 {
  font-size: 1.5em;
}
main h4 {
    margin: 50px 0px 20px;
    border-bottom: 2px solid white;
    padding-bottom: 3px;
}
main h5 {
  margin: 40px 0px 20px;
  color: white;
  line-height: 1.3em;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--white35);
  font-weight: bold;
}

main img {
  max-width: 100%;

  /*border: 30px solid var(--white5);
  border: 20px solid var(--dark);
  outline: 1px solid var(--white5);
  padding: 4%;
  background-color: white;
  border-radius: 8px;*/
    
  box-shadow: 10px 10px 14px 0px black;

}
main a {
  background-color: var(--link);
  color: var(--white);
  text-decoration: none;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.4s;
}
main a:hover {
  background-color: var(--link7);
  color: white;
  padding: 1px 5px 1px 5px;
  border-right: 2px solid var(--white6);
  border-bottom: 2px solid var(--white6);
}
main a.img, main a.img:hover {
  background-color: inherit;
  border: none;
}

main strong {
  background-color: var(--bold);
  border-radius: 8px;
  font-weight: normal;
  white-space: nowrap;
  padding: 1px 10px;
}

main li {
  margin-bottom: 4px;
}


main form input, main form select, main form textarea {
  padding: 10px;
  font-size: 20px;
  width: 100%;
  border-radius: 6px;
  border: 4px solid var(--white);
  outline: 0px;
  background-color: var(--white);
  color: var(--dark);
}
main form textarea {
    resize: vertical;
}
main form tr:hover input, main input:focus, main form tr:hover select, main select:focus, main form tr:hover textarea, main textarea:focus {
    border: 4px solid var(--forms9);
}
main form tr:hover input[type="submit"] {
    border: 0px;
}
main form input[type="submit"], main input[type="submit"] {
    padding: 10px;
    font-size: 20px;
    background-color: var(--forms);
    border: 0px;
    font-weight: bold;
    color: var(--white);
    border-radius: 6px;
}
main form input[type="submit"]:hover, main input[type="submit"]:hover {
    background-color: var(--forms9);
    border: 0px;
}

main iframe {
    width: 100%;
    background: white;
    min-height: 300px;
  margin-top: 10px;
}


/* CUSTOMIZING NAVBAR */
[role=button] {
    cursor: inherit;
}
.nav-link {
  padding: 12px;
  font-family: 'Inconsolata', monospace;
  color: var(--white);
  letter-spacing: 0.7px;
  transition: background-color 0.4s;
}
.nav-item span {
  padding: 12px;
  font-family: 'Inconsolata', monospace;
  color: var(--white);
  letter-spacing: 0.7px;
  display: inline-block;
}
.nav-right {
  margin-left: auto;
}
.dropdown-item {
  transition: background-color 0.4s;
}
.nav-link:hover, .dropdown-item:hover {
  background-color: var(--link);
  color: var(--white);
}
.navbar {
  padding: 0px;
  background-color: var(--dark7);
  border-bottom: 4px solid var(--white);
  box-shadow: 0px 0px 10px 0px var(--dark);
  top: 0px;
}
.navbar a {
  font-size: 20px;
}
.nopad {
  padding-left: 0px;
  padding-right: 0px;
}
.dropdown-menu li:last-child .dropdown-item:hover {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dropdown-menu {
  border-radius: 0px;
  padding: 0px;
  border: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0px 6px 4px 0px var(--dark4);

}
.dropdown-menu li {
     border-top: 1px solid var(--dark2);
 
}
.dropdown-menu li:first-child {
     border-top: none;
 
}
.dropdown-menu[data-bs-popper] {
  margin-top: 4px;
}
.navbar-dark .navbar-toggler {
  border-color: var(--white);
  box-shadow: none;
}
.navbar-dark .navbar-nav .nav-link {
  color: var(--white);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: var(--white);
}
.navbar-dark .navbar-toggler {
  margin: 10px 10px 10px 0px;
  outline: 0px solid var(--dark);
}

@media (min-width: 576px) {
.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}
}
.navbar-nav > li:last-child {
  /*margin-left: auto;*/
  background-color: var(--link);
}
.navbar-nav {
  width: 100%;
}
.active {
  background-color: var(--link5);
}

.show .navbar-nav {
  background-color: var(--dark7);
}
.show .nav-link {
  padding-left: 10px;
  border-top: 1px solid var(--white75);
}
.show .dropdown-menu {
  box-shadow: none;
  background-color: rgba(255,255,255,0);
}
.show .dropdown-menu li {
  border-top: 1px solid var(--dark2);
  background-color: rgba(0,0,0,0);
}
.show .dropdown {
  background-color: rgba(0,0,0,0);
}
.show .dropdown-menu li {
  border-top: 1px solid var(--dark2);
  background-color: rgba(0,0,0,0);
}
.show .dropdown-menu li a {
  padding-left: 20px;
  color: var(--white);
}
.show .dropdown-menu li:last-child .dropdown-item:hover, .show .dropdown-menu {
  border-radius: 0px;
}
.show .dropdown-menu[data-bs-popper] {
  margin-top: 0px;
}


/**********************************************
	LOGIN FORM
 **********************************************/

	#show_student_login {
		background-color: var(--link7);
		border-radius: 0px;
	}
	#login_form {
		display: none;
		border: 10px solid var(--white);
    border-width: 9px;
    box-shadow: 0px 0px 30px 0px var(--dark);
    border-radius: 20px;
    background-color: var(--dark8);
    padding: 20px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
    z-index: 1000;
	}
	
	#form_err_msg {
		border: solid 1px var(--bad);
		padding: 10px;
		background-color: var(--white);
		color: var(--bad);
		font-size: 14px;	
		line-height: 26px;
		border-radius: 10px;
		display: none;
	}
	#form_err_msg a {
		color: #000;	
	}
	#form_good_msg {
		border: solid 1px var(--good);
		padding: 10px;
		background-color: var(--white);
		color: var(--good);
		font-size: 14px;	
		line-height: 26px;
		border-radius: 10px;
		display: none;
	}
	#form_err_msg strong, #form_good_msg strong {
		font-weight: bold;	
	}
	
	#login_form div{
		margin: 5px;
	}
	
	#login_form p {
		font-size: 26px;	
		color: var(--white);
		padding-bottom: 5px;
		margin-bottom: 0;
        margin-top: 20px;
	}

    #login_form h2 {
		font-size: 32px;	
		color: var(--white);
		padding-bottom: 5px;
		margin-bottom: 0;
    text-align: center;
	}
	
	#login_form input#login_pass, 
    #login_form input#login_email {
		font-size: 24px;	
		padding: 10px;
		color: #555;
		border: 10px solid #E5E5E5;
    border-width: 0px;
    outline-width: 0px;
    width: 400px;
    background-color: var(--white35);
    color: #ccc;
	}
    
  #login_form:hover input#login_pass, 
  #login_form:hover input#login_email {
    background-color: var(--white8);
    color: #555;
  }


	#login_form input#student_login, #login_form input#student_cancel {
		padding: 10px;
		color: var(--white);
		border-width: 0px;
		background-color: var(--forms7); /*rgba(33, 181, 235, 0.7);	*/
		cursor: pointer;
    width: 50%;
    font-size: 24px;
	}
    #login_form input#student_login {
		border-bottom-left-radius: 10px;
	}
    #login_form input#student_cancel {
		border-bottom-right-radius: 10px;
	}
	#login_form input#student_login:hover, 
    #login_form input#student_cancel:hover {
        background-color: var(--forms9);
	}

    #login_form input#login_email {
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
    #login_form input::placeholder {
        color: #ccc;
        padding-left: 5px;
        font-style: italic;
    }

/* TABLES */

td ul, td ol {
  margin-bottom: 0px;
}
.table-dark {
  border: 3px solid white;
  margin-top: 20px;
}
.table-dark th {
  white-space: nowrap;
  background-color: var(--bold);
}

.table-striped>tbody>tr:nth-of-type(odd)>th {
    --bs-table-accent-bg: var(--bold);
}

.table-striped>tbody>tr:nth-of-type(even)>th {
    --bs-table-accent-bg: var(--bold2);
}

.table-dark td {
  border: none;
}
.table-code td:first-child, .table-code td:nth-child(2) {
  white-space: nowrap;
  text-align: center;
}
.table-code td:first-child a {
  display: block;
}

.table-courses th:last-child, .table-courses td:last-child {
  text-align: center;
}

.table-courses span {
  font-style: italic;
  font-size: .75em;
  color: #AAAAAA;
}

.table-until th:last-child, .table-until td:last-child {
  width: 110px;
  text-align: right;
}

   .hide .language-markup{
     opacity: 0;
     transition: opacity 1s;
   }        
   .hide:hover .language-markup, .hide:active .language-markup {
     opacity: 1;
   }