*,
*:before,
*:after {
box-sizing: border-box;
}

:root {
    --input-border: #8b8a8b;
    --input-focus-h: 5;
    --input-focus-s: 100%;
    --input-focus-l: 42%;

    --input-border-focus: red;

    --backgroud-color: white;

    --button-color-background: red;

    --color-primary: #ff3939;
    --color-on-primary: #351d4a;
    --color-secondary: #d367c1;
    --color-background: #27272c;
    --color-on-background: #eb6060;
    --color-background-alt: #ffffff;
    --color-background-alt-alpha: rgba(30,28,34,.75);
    --color-inverse: #fff;
    --color-gray: #8e8e8e;
    --color-yellow: #dedf40;
    --color-green: #62cb5c;
    --color-blue: #00bbcb;
    --color-on-blue: #004a09;
    --gradient: var(--color-secondary) 10%,var(--color-yellow) 25%,var(--color-green) 50%,var(--color-blue) 75%,var(--color-primary) 90%;

    --brand-font: "Kanit",serif;
    --brand-font-weight: 800;
    --brand-font-alt: "Baloo 2",system-ui,sans-serif;
    --brand-font-alt-weight: normal;
    --brand-font-alt-weight-bold: 500;
}

.main {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 1fr) 1fr;
    place-content: center;
    gap: 0.5rem;
    font-family: "Baloo 2", sans-serif;
    background-color: var(--backgroud-color);
    padding: 1rem;
    line-height: 1.6;
    font-size: 16px;
}

.studyguide {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 1fr) 1fr;
    place-content: center;
    gap: 0.5rem;
    background-color: var(--backgroud-color);
    padding: 1rem;
    line-height: 1.6;
    font-size: 16px;
}

.topic_menu {
    color: rgb(0, 0, 0);
    cursor: pointer;
}

.topic_menu:hover{
    color: rgb(255, 0, 0);
}

.title {
    grid-column-start: 2;
    justify-self: center;
    font-size: 24px;
    font-weight: 700;
}

.sub-title {
    grid-column-start: 2;
    justify-self: left;
    font-size: 18px;
    font-weight: 600;
    padding-top: 20px;
}

.content {
    grid-column-start: 2;
    justify-self: center;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
}

quote {
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
}

.image {
    grid-column-start: 2;
    height: 200px;
    justify-self: center;
}

.form {
    grid-column-start: 2;
    justify-self: center;
    width: 100%;
}

.definitions {
    grid-column-start: 2;
    justify-self: left;
}

.mjx-container {
    top: -5px;
}

.ul {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.iframe {
    grid-column-start: 2;
    justify-self: center;
    width: 100%;
    display: grid;
    grid-template-columns: auto;
}

.demo-iframe {
    /* works perfectly */
    border: 0;
    justify-self: center;
}

.topic {
    grid-column-start: 2;
    justify-self: left;
    display: grid;
    grid-template-columns: auto;
}

.topic-content {
    display: grid;
    grid-template-columns: auto;
}

.topic-content p {
    padding-bottom: 1em;
}

.topic-header {
    padding-top: 10px;
    font-weight: bold;
}

.topic-image {
    justify-self: center;
    height: 200px;
}

li {
   list-style: none;
}

li.particle_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/particle-menu-off.png") no-repeat 0 -3px;
}

li.particle_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/particle-menu-on.png") no-repeat 0 -3px;
}

li.electricity_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/electricity-menu-off.png") no-repeat 0 -3px;
}

li.electricity_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/electricity-menu-on.png") no-repeat 0 -3px;
}

li.wave_properties_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/weq1.png") no-repeat 0 -3px;
}

li.wave_properties_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/weq2.png") no-repeat 0 -3px;
}

li.standing_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/standing1.png") no-repeat 0 -3px;
}

li.standing_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/standing2.png") no-repeat 0 -3px;
}

li.quantum_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/quantum_up.png") no-repeat 0 -3px;
}

li.quantum_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/quantum_down.png") no-repeat 0 -3px;
}

li.diffraction_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/diffract1.png") no-repeat 0 -3px;
}

li.diffraction_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/diffract2.png") no-repeat 0 -3px;
}

li.interference_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/wave1.png") no-repeat 0 -3px;
}

li.interference_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/wave2.png") no-repeat 0 -3px;
}

li.forces_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/apple1.png") no-repeat 0 -3px;
}

li.forces_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/apple2.png") no-repeat 0 -3px;
}

li.optics_menu::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/button1.png") no-repeat 0 -3px;
}

li.optics_menu:hover::before {
    content:'';
    padding: 0 0 0 25px;
    background: url("/images/button2.png") no-repeat 0 -3px;
}


.li {
    
    display: grid;
    grid-template-columns: 0 1fr;
    gap: 1.75em;
    align-items: start;
    font-size: 1.5rem;
    line-height: 1.25;
}

.input-group > * {
	grid-area: group;
}

.input-group {
    gap: .5em;
	display: grid;
	width: 100%;
    padding-bottom: 20px;           /* separate form fields vertically */
    min-height: 35px;
	grid-template-areas: "group";
}

.input-group label {
	align-self: start;
	background-image: linear-gradient(to top,#ffffff 0 calc(50% - 2px),#ffffff calc(50% - 2px));
	font-size: 16px;
	padding-left: .5em;
	padding-right: .5em;
	position: relative;
	transform: translate(.5rem,-50%);
	width: -webkit-max-content;
	width: max-content;
}

.input {
    font-size: max(16px, 1em);
    font-weight: 500;
    font-family: inherit;
    padding: 0.25em 0.5em;
    background-color: var(--backgroud-color);
    border: 2px solid var(--input-border);  /* gray border */
    border-radius: 4px;
    transition: 180ms box-shadow ease-in-out;
}

.input:focus {
    border-color: var(--input-border-focus);      /* change border colour to red - its 2px thick */
    box-shadow: 0 0 0 2px var(--backgroud-color) , 0 0 0 4px var(--input-border-focus);  /* white gap outside border followed by red shadow */
    /* trick for windows users */
    outline: 3px solid transparent;
}

.input:not(textarea) {
    line-height: 1;
    height: 2.25rem;
}

input[type="file"] {
    font-size: 0.9em;
    padding-top: 0.35rem;
}

.input[readonly] {
    border-style: dotted;
    cursor: not-allowed;
    color: #777;
}

.input[disabled] {
    --input-border: #ccc;
  
    background-color: #eee;
    cursor: not-allowed;
}

textarea.input {
    resize: vertical;
}

/* NOTE: placeholder-shown means placeholder contains text */

.placeholder {
    color: #b7b7c0;
    font-family: sans-serif;
    font-weight: 700;
    left: 20px;
    line-height: 16px;
    pointer-events: none;
    position: relative;
    transform-origin: 0 50%;
    transition: transform 200ms, color 200ms;
    top: 20px;
}

.input:focus ~ .placeholder,
  .input:not(:placeholder-shown) ~ .placeholder {
    transform: translateY(-30px) translateX(0px) scale(0.75);
  }
  
  .input:not(:placeholder-shown) ~ .placeholder {
    color: #808097;
  }
  
  .input:focus ~ .placeholder {
    color: #dc2f55;
  }

  .gap {
      padding-top: 20px;
  }


  button, input {
    font: inherit;
}

.button {
  --button-background:var(--color-primary);
  --button-color:var(--color-on-primary);
  --outline-color:transparent;
  align-items:center;
  background-color:var(--button-color-background);
  border:2px solid transparent;
  border-radius:.5em;
  color: var(--backgroud-color);
  cursor:pointer;
  font-family:var(--brand-font-alt);
  font-weight:600;
  gap:.5em;
  justify-content:center;
  line-height:calc(4px + 2ex);
  min-width:10ch;
  padding:.55em .75em .5em;
  text-align:center;
  text-decoration:none;
  transition:none .2s ease-in-out;
  transition-property:background-color,color,border-color
 }
 .button:focus {
  box-shadow:0 0 0 2px var(--backgroud-color), 0 0 0 4px red;
 }
 .button:active,
 .button:hover {
  background-color: var(--backgroud-color);
  color:red;
 }
 .button:active:not(.button-outlined),
 .button:hover:not(.button-outlined) {
  border-color:var(--button-hover-border-color,currentColor)
 }