/*    FONTS    */
@font-face {
  font-family: "Funnel Display";
  src: url("/fonts/FunnelDisplay/FunnelDisplay-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Balsamiq Sans";
  src: url("/fonts/BalsamiqSans/BalsamiqSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Kantumruy Pro";
  src: url("/fonts/KantumruyPro/KantumruyPro-SemiBold.ttf") format("truetype");
}


/*    HTML Objects    */
html, body {
margin:0px;
padding:0px;
height: 100%;
width: 100%;
font-family: 'Magica', sans-serif;
font-size: 16pt;
}

h1 {
font-family: 'Gochi Hand', sans-serif;
margin:0pt;
margin-top:10pt;
color: #77023d;
}

p {
  margin:0pt;
  white-space: pre;
  text-wrap: wrap;
}

a {
  color: #f2a100;
}
a:visited {
  color: #e500e5;
}
a.awesome-pink {
  filter:drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0px 0.5px 0.5px #f2a100) drop-shadow(0px 0.5px 0.5px #f2a100);
}
a.awesome-pink:visited {
  filter:drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0px 0.5px 0.5px #e500e5) drop-shadow(0px 0.5px 0.5px #e500e5);
}
h1 a {
  color: #ffbf00;
}
a.awesome-super-pink {
  filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 2px 2px #f2a100) drop-shadow(0px 2px 2px #f2a100);
}
a.awesome-super-pink:visited {
  filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 2px 2px #e500e5) drop-shadow(0px 2px 2px #e500e5);
}

ul {
  padding-left: 17pt;
  list-style-type: square;
}


/*    Custom Classes    */
.outline-white {
  filter:drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white);
}
.outline-black {
  filter:drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}
.awesome-pink {
  filter:drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0px 0.5px 0.5px #ffb2d8) drop-shadow(0px 0.5px 0.5px #ffb2d8);
}
.awesome-super-pink {
  filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 2px 2px #FF73BA) drop-shadow(0px 2px 2px #FF73BA);
}
.awesome-cyan {
  filter:drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0px 0.5px 0.5px cyan) drop-shadow(0px 0.5px 0.5px cyan);
}

.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.center {
  display: grid;
  place-items: center;
}
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  place-items: center;
}
.grid-2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15pt;
  place-items: center;
}

.showcase {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
  gap: 5pt;
  width: 97%;
  height: 97%;
  transform: translate(3%,3%);
  justify-content: center;
}
.showcase-container {
  margin:auto;
  margin-top:10pt;
  border-style:double;
  border-width:5pt;
  height:200px;
  width:100%;
  padding-right: 5pt;
  transform: translate(-5pt,0);
}

.header {
  width: 100%;
  height: fit-content;
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    white,
    white 10px,
    #ffe5ff 10px,
    #ffe5ff 20px
  );
}
.header-line {
  width: 100%;
  height: 10pt;
  background-color: magenta;
}
.header-sub {
  width: fit-content;
  margin: auto;
  background-color: white;
  padding-left: 10pt;
  padding-right: 10pt;
  padding-top: 2pt;
  padding-bottom: 2pt;
}
.header-sub-bg {
  background: repeating-linear-gradient(
    45deg,
    white,
    white 10px,
    #ffe500 10px,
    #ffe500 20px
  );
}
.header-sub-line {
  width: 100%;
  height: 5pt;
  background-color: #ffe500;
}