/*TEXT IMPORT*/
@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap');

/*==========*/
/*VARIABLES*/
/*========*/

:root {
  /*BACKGROUNDS*/
  --background-color: rgba(0, 0, 0, 0.5);

  /*BORDERS*/
  --bottom-border: 2px dashed white;
  --main-border: 30px solid transparent;
  --portrait-border: 2px solid white;

  /*TEXT*/
  --text-color: white;
  --link-color: #5D00BA;
  --link-color-hover: #7780ec;
  --font: "Poor Story", arial;
  --font-size: 16px;

  /*PADDINGS-MARGINS-WIDTHS-HEIGHTS*/
  --small-padding: 5px;
  --large-padding: 10px;
  --main-width: 850px;
  --main-height: 700px;

}

* {
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./BGs/purplehouse.jpg") center no-repeat fixed;
  background-size: cover;
  font-size: var(--font-size);
  font-family: var(--font);
  color: var(--text-color);
}

/*=============*/
/*LAYOUT STUFF*/
/*===========*/

.foreground img {
    position: fixed;
    z-index: 3;
    width: 250px;
}

.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header,
main,
footer {
  margin: var(--small-padding);
}

main {
  width: var(--main-width);
  height: var(--main-height);
  border: var(--main-border);
  display: flex;
  flex-direction: column;
  padding: var(--small-padding);
  overflow-y: auto;
  overflow-x: hidden;
  border-image: url(./Graphics/About/laceyspikeyborder.png) 40 round;
  background-clip: padding-box;
  background-color: var(--background-color);
}

.main-section {
  display: flex;
  justify-content: space-evenly;
  width: auto;
}

.main-section > div {
  padding: var(--small-padding);
}

.main-section-fave {
  padding: var(--small-padding);
  z-index: 1;
}

.portrait-box {
  width: 200px;
  height: 200px;
  border: var(--portrait-border);
  padding: var(--small-padding);
}

.portrait-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.fave-box {
  height: 125px;
  padding: 2px;
  cursor: pointer;
}

.fave-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center; 
}

.fave-box img:hover {
  transform: scale(2.0);
  transition: 0.5s;
}

.flex-box {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: var(--small-padding);
}

.flex-box img {
    margin: var(--small-padding);
}

.flex-box div {
    width: calc(100%/2);
}

/*==============*/
/*STYLING STUFF*/
/*============*/

#stamps,
#buttons {
  border-top: 10px solid transparent; 
  border-bottom: 10px solid transparent; 
  border-image: url(./Graphics/About/scrollbar-divider.gif) 30 stretch;
}

#quizzes {
  animation-name: scroll;
  animation-duration: 25s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#quizzes img {
  height: 150px;
}

#quizzes:hover {
  animation-play-state: paused;
}

h2,
h3 {
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

ul {
  margin: 15px;
  padding: 0;
  list-style: url('./Pixels/About/warning.gif')
}

p {
  text-align: justify;
  padding: 0;
  margin: 0 0 10px 0;
}

a,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color-hover);
}

::selection{
    text-shadow: 2px 2px 4px var(--link-color);
    background-color: rgba(255, 255, 255, 0.8);
}

/*====================*/
/*MARQUEE REPLACEMENT*/
/*==================*/

@keyframes scroll {
  0% {transform: translate(10%, 0);}
  50% {transform: translate(-300%, 0);}
  100% {transform: translate(10%, 0);}
}