@font-face { /* headings font */
    font-family: led;
    src: url(../font/LEDLIGHT.otf)
}

:root { /* all.css has width set to 75%, so this is setting it back */
    width: 100%;
}

h1 {
    font-family: led, 'Courier New', Courier, monospace;
    font-size: 8rem;
    margin-bottom: 0px; /* smaller gaps */
    margin-top: 0px;
}
summary {
    font-family: led, 'Courier New', Courier, monospace; 
    font-size: 3rem; /* acts as headings... maybe not #semantic but I HEART DETAILS AND SUMMARY */
}
details > summary {
	list-style-type: none; /* getting rid of icon when closed */
    list-style-image: none;
}
details[open] > summary {
    list-style-type: none;
    list-style-image: none; /* getting rid of icon when closed */
}
p {
    line-height: 1.4;
}

.grid {
    display: grid;
    grid-template-columns: 70% 30%;
}
.box {
    box-shadow: 0px 5px 15px var(--black);
    margin-bottom: 30px;
}

/* mobile styling */
/* styling for phones / screens under 600px */
@media screen and (max-width: 600px) {
	.grid {
		display: block;
	}
}

/* crt screen effect */
 #crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

#crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* music player */
audio {
    display: none;
}

audio:target {  /* Targets section's anchor (href="#example") when clicked */
	display: block;
}