/* this is a mess because i changed shit while barely or not at all understanding how it works. */
/* add my fonts */
@font-face{
  font-family:atkinson;
  src: url('fonts/atkinson.otf');
}
@font-face{
  font-family:stereonic;
  src: url('fonts/stereonic.otf');
}
@font-face{
  font-family:stereonic-xl;
  src: url('fonts/stereonic-xl.otf');
}
@font-face{
  font-family:stereonic-over;
  src: url('fonts/stereonic-overline.otf');
}
@font-face{
  font-family:stereonic-under;
  src: url('fonts/stereonic-underline.otf');
}
@font-face{
  font-family:stereonic-stencil;
  src: url('fonts/stereonic-stencil.otf');
}
@font-face{
  font-family:stereonic-symbols;
  src: url('fonts/stereonic-symbols.otf');
}

html{
  overscroll-behavior: none;
}
:root {
    --bodyfont: atkinson;
    --titlefont: stereonic;
    --text-size: 2rem;
    --text: #f8f8ff;

	/* misc */
    --transparent: #00000000;

    --grad-light: linear-gradient(to top, var(--light), var(--transparent));
    --grad-dark: linear-gradient(var(--dark), var(--transparent));

    /*columns*/
    --min-img-width: 150px;
    --max-img-width: 400px;
    --max-columns: 3;
    --column-gap: var(--spacing);

    /*spacing*/
    --spacing: 0.5em;
    --doublespacing: 1em;
}

::selection {
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;

}

hr {
  border: none;
  border-top: 3px double #f8f8ff;
  color: #f8f8ff;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: #190008;
  content: "∅";
  padding: 0 4px;
  position: relative;
  top: -0.7em;
}

* {
    box-sizing: border-box;
}

body {
    color:var(--text);
    max-width: 1200px;
    margin: 0 auto;
    background-image: linear-gradient(20deg, #DB0049 30%, #190008 30%);
   font-family: var(--bodyfont);  
   font-size: var(--text-size);  
}

main {
    border-right: var(--solid);
    border-left: var(--solid);
    padding: var(--spacing);
}

.head {
    padding: 0 var(--doublespacing);
}

.micro {
    margin-top: 4em;
    margin: auto;
    padding: var(--doublespacing);
    border: var(--solid);
    border-radius: 5px;
    box-shadow: var(--text) 3px 4px;
    background-color: var(--light);
    width: 80%;
    font-size: large;
}
.micro h3{margin-top: 0; text-transform: uppercase;}

footer {
    text-align: center;
    margin-top: calc(var(--doublespacing) * 2);
    padding: var(--spacing);
    width: 100%;
    bottom: 0;
    left: 0;
}


/*links*/
a {
  font-family: stereonic-stencil;
  color: #f8f8ff;
  text-decoration: underline #f8f8ff;
}
a:hover {
  -webkit-text-stroke-color: rgb(0, 0, 36);
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
  color: black;
}

nav{
    text-align: center;
    text-transform: uppercase;
    font-size: larger;
}


/* headings */
h1, h2, h3, h4 {
    font-family: var(--titlefont);
}
h2 {
    text-align: center;
    color: var(--background);
    font-size:1.4em;
    margin:15px 0
}
h2:first-letter{
color:#ce0000;
font-size:1.5em
}
h3 {
    text-align: center;
    text-decoration: underline;
    margin: var(--spacing);
}


/*text stylings*/
em {
    font-size: larger;
}
mark {
    background-color: var(--light);
}
code{
    font-weight: bold;
    background-color: var(--light);
}
blockquote{
    border-left: var(--dark) solid 4px;
    background-image: var(--grad-light);
    padding: var(--spacing) var(--doublespacing);
}

summary{
    cursor: pointer;
}

/*filterDiv stylings*/
#container {
    overflow: scroll;
}/*stops the flex from cutting off the boxes*/

#container.columns {
    columns: var(--min-img-width) var(--max-columns);
    gap: var(--spacing);
} /*change the column number back up at the root!*/

/*this is what styles the "boxes"*/
.filterDiv {
  background-color: #DB0049;
  border: solid black;
  color: var(--text);
  border-radius: 5px;
  margin: var(--spacing) 0;
  width: 100%;
  overflow: hidden;
  display: none; /* Hidden by default */
}

.filterDiv p{
    padding: 0 0.25em;
    margin-left: 1px;
    margin-top: 0px;
    margin-bottom: 1px;
}
.filterDiv h1{
    padding: 0 var(--spacing);
    margin: 0;
}
.filterDiv img{
    width: 100%;
    height: 100%;
    object-fit:contain;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* buttons */
.btn {
    outline: none;
    border:1px dotted #fff;
    padding: 0.5em;
    background-color: #DB0049;
    display: inline-block;
    font-family: var(--bodyfont);
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 5px;
    font-size: 22px;
}
.btn:hover {
    background-color: #190008;
  -webkit-text-stroke-color: rgb(0, 0, 36);
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
}
/*when the button is "clicked"*/
.btn.active {
    background-color: #190008;
  -webkit-text-stroke-color: rgb(0, 0, 36);
  -webkit-text-stroke-color: rgb(255, 0, 36);
  -webkit-text-fill-color: rgb(255, 0, 167);
  -webkit-text-stroke-width: 2px;
  text-shadow: rgb(255, 0, 84) 0px 0px 13px, rgb(255, 0, 48) 0px 0px 16px;
}

#myBtnContainer{
    margin: var(--spacing) auto;
    text-align: center;
    width: 60%;
    line-height: 2em;
}
#myBtnContainer h2{
    margin-top: 0;
}


/* Mobile Styling */
@media only screen and (max-width: 800px){
    main{border: none} /*removes border for mobile*/
    blockquote{ margin: 0;}
    #myBtnContainer{
        width: 100%;
        line-height: 2.5em;
        margin-bottom: var(--spacing);
    }
    .micro{
        width: 100%;
        margin: auto;
    }
#container.columns {
    columns: 1;} /*single column for mobile*/
}