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

body {
  background-color: maroon;
  background-image:url("../images/bgstamp.png");
  background-size: 80px;
  margin: 5px;
  background-attachment: fixed;
  color: black;
}

/* bg options */
.darkbg {
  background-image:url("../images/bgstampdark.png");

}

.darkestbg {
  background-image: url("../images/bgstampdarkest.png");
  background-color: rgb(25, 14, 14);
}

.bloodbg {
  background-image:url("../images/bgstampblood.png");
  background-color: #a30029;
}

.blastbg {
  background-image:url("../images/bgblast.png");
  background-color: rgb(255, 178, 76);
}

.blubbg {
  background-image:url("../images/bgstampblå.png");
  background-color: rgb(4, 49, 62);
}

a:link {
  color:deeppink;
}
a:visited {
  color: crimson;
}
a > img {
  display: block; /*Så billedet bliver linket i stedet for en dum stribe nederst*/
}

/*skjulte links*/
.hiddenlink:link {
    color: inherit;
    text-decoration: none;
    cursor: text;
}
.hiddenlink:visited {
    color: inherit;
    cursor:text;

}

/*spafa effekt*/
.spafa span {
    display: none;
}
.spafa:hover span {
    display: inline;

}

#container {
  display: grid;
  gap: 25px;
  width: 800px;
  margin: 2em auto;
  /*specificer grid-template i filen*/
  max-width: 800px;
}

#container > * {
  max-width: inherit;
}


.flex { /*mine flexrows*/
  display: flex;
  column-gap: 15px;

}

/* diff boxes */

header {
  background-color: #8b0000;
  border: solid 5px sienna;
  color: bisque;
  text-align: center;
  letter-spacing: 15px;
}

header.blank {
  background-color: none;
  border: none;
  color: none;
  letter-spacing: normal;
}

section {
  padding: 1em;
}

section > p {
  padding: 0.5em;
}

.nopad { /*til sections uden pads*/
  padding: 0;
}

.title {
  background-color: #a0522d;
  color:#ffe4c4;
  padding: 1px;
  text-align: center;
  margin-top: calc(-1em + 2px); /*calc for at beholde border*/
  margin-left: calc(-1em + 2px);
  margin-right: calc(-1em + 2px);
  padding: 1em;

}

.scrollbox {
  overflow-y: scroll;
  background-color: #deb887;
  padding:  0 1em;
  scrollbar-color: maroon #e9967a;
  height: 95%;
}

.bisquebox {
  background-color: bisque;
  border: solid 3px burlywood;
  height: fit-content;
}

.lakridskonfekt {
    color: rgb(27, 27, 27);
    background-color: rgb(232, 230, 215);
    border: 3px solid rgb(27, 27, 27);
}

.lakridskonfekt .title {
    background-color: rgb(27, 27, 27);
    color: rgb(232, 230, 215);
    border-bottom: 3px solid crimson;
}

/* Non specific attribute adding */

/*div img, a img {
  vertical-align: bottom; /*https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath
}*/


h2 {
  font-size: large;
}

.headerLikeText {
  font-size:medium;
  font-weight: 100;
  font-family: atkinson, arial;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}


ul {
  line-height: 1.5em;
  list-style-type: "\1F408";
}

/* Special effects */

.colorinvert:active {
  filter: invert(100%);
}

.colorshift:active {
  filter: hue-rotate(90deg);
}

.colordesat:active {
  filter: saturate(0%);
}

.hoverreveal { /*dark ver når ikke hover*/
  filter: brightness(0%);
  /*sæt transition?*/
}
.hoverreveal:hover { /*lys når hover*/
  filter: brightness(100%);
}


/* exit button */
#closebutton {
  background-color: sienna;
  border: outset 3px sienna;
  color: bisque;
  position: absolute;
  display: inline-block;
  top: 20px;
  right: 20px;
  height: 20px;
  width: 20px;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
}

#closebutton span {
  position: relative;
  bottom: 10px;
  right: -0.5px;
  font-size: 1.5em;
}

#closebutton:active {
  border: inset sienna;
}

/* catbaren på main*/

.catbar li {
  line-height: 2.5em;
  list-style-type: "\1F431";
}

.catbar li.happycat:hover {
  list-style-type: "\1F63A";
}

.catbar li.angrycat:hover {
  list-style-type: "\1F63E";
}

.catbar li.sadcat:hover {
  list-style-type: "\1F63F";
}

.catbar li.screamcat:hover {
  list-style-type: "\1F640";
}

.catbar li.crylaughcat:hover {
  list-style-type: "\1F639";
}

.catbar li.kisscat:hover {
  list-style-type: "\1F63D";
}

.catbar li.smirkcat:hover {
  list-style-type: "\1F63C";
}

.catbar li.laughcat:hover {
  list-style-type: "\1F638";
}

.catbar li.heartcat:hover {
  list-style-type: "\1F63B";
}


/*Curseboxbesked styling*/

#cursemessage {
  position: fixed;
  width:100%; /*så text-align virker efter hensigten*/
  top: 10%;
  opacity: 90%;
  transition: 2s;
  display: none;
  animation-fill-mode: forwards;
}
#cursemessage h1 {
  opacity: inherit;
  text-align: center;
  font-size: 100px;
  color: rgb(41, 3, 3);
  text-shadow:0 0 2px black, 0 0 5px white,  0 0 10px red, 0 0 20px black,  0 0 20px black;
}

@keyframes curseMSGanim {
  0% {opacity: 90%;display: block;}
  20% {opacity: 100%;}
  100% {opacity: 0%;display: none;}
}

/*roundimgs */

.roundimgs img {
    border: 2px solid black ;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit:cover;
}

/*fonts*/

@font-face {
  font-family: epilog;
  src: url(../fonts/epilog.ttf);
}
@font-face {
  font-family: codon;
  src: url(../fonts/codon.ttf);
}
@font-face {
  font-family: pinball;
  src: url(../fonts/pinball.ttf);
}
@font-face {
  font-family: technet;
  src: url(../fonts/technet.ttf)
}
@font-face {
  font-family: tommys;
  src: url(../fonts/tommys.ttf)
}
@font-face {
  font-family: atkinson;
  src: url(../fonts/AtkinsonHyperlegible-Regular.ttf)
}
@font-face {
  font-family: lexend;
  src: url(../fonts/Lexend-VariableFont_wght.ttf)
}


* {
  font-family: atkinson, arial;
}

h2, h2 a {
  font-family: lexend, arial;
}


h1 {
  font-family: epilog, codon, arial;
}


/*after this will be removed with vertigo toggle / prefers-reduced-motion*/
#removeAfterThis {}

/*effekter til roundimgs */

.roundimgs *:hover {
    transform: rotate(720deg);
    transition: 1s;
}