/*don't steal my code! -elly*/
@font-face{
  font-family: sticky;
  src: url(fonts/segoepr.ttf);
}

:root{
  /*background*/
  --bg-image: url('images/bg/index.png');
  --bg-color: white;
  --bg-divs: #fffcfe;

  /*font and text*/
  --font: ms pgothic, times new roman;
  --font-size: 0.96rem;
  --font-color: #3F334D;
  --header-color:#42213D;
  --line-height: 1.4em;
  --selection-bg: rgba(236, 172, 209, 0.541);
  --selected-color: #401D31;
  --link-selection: purple;
  --text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
  --h1-bg: url('images/bg/indexh1.png');
  --h2-bg: url('images/bg/h2.webp');

  /*link*/
  --link-color: rgb(12, 71, 180);
  --link-decor: underline;
  --link-visited-color: #7e0ed4;
  --button-link-visited: rgb(187, 0, 103);

  /*border*/
  --border: 2px solid rgb(223, 138, 176);
  --border-color: rgb(223, 138, 176);
  --border-rad: 5px;
  --border-cont: url('images/borders/main.png');
  --updates-border: url('images/borders/updates.gif');

  /*button*/
  --button-bg-hover: linear-gradient(#f8fffc 70%, #d5f7e7 100%);
  --button-shadow-hover: 2px 2px 2px inset white,-1px -1px 1px inset #a9d6bc;

  /*scrollbar*/
  --scroll-color-ffox: #ffdde9 #fffffa;
  --scroll-color-ffox-u: #ffd6da white;
  --scroll-color-crm1: #fffffa;
  --scroll-color-crm1-u: white;
  --scroll-color-crm2: #ffdde9;
  --scroll-color-crm2-u: #ffd6da;

  /*main*/
  --main-bg: linear-gradient(#fffcfe 70%,#ffeef6 100%);
  --main-box-shadow: 2px 2px 2px inset #fff,-1px -1px 1px inset #e7bec4;

  /*game recs*/
  --recs-bg: #006734;
  --recs-font: #fff;
  --recs-border: 5px double #000;
  --recs-selection-bg: #2fad6c;
  --recs-selection-font: #000;
  --recs-link: #ffffe0;

  /*to-do*/
  --todo-bg: #fff;
  --todo-box-shadow: inset 0 0 15px #aadabe,0 0 5px rgba(186,224,212,.527);
  --todo-border: 2px solid rgba(116,173,152,.397);
  --together-dotborder: #c2e4cc;

  /*xtra*/
  --header: url('images/header/index.png');
}

.pink{
  --button-bg: linear-gradient(#fffcfe 70%, #f7d5e6 100%);
  --button-shadow: 2px 2px 2px inset white,-1px -1px 1px inset #d6a9b0;
}

.yellow{
  --button-bg: linear-gradient(#fffaef 70%, #f7e0d5 100%);
  --button-shadow: 2px 2px 2px inset white,-1px -1px 1px inset #d6b6a9;
}

html{
  scrollbar-color: var(--scroll-color-ffox);
  scrollbar-width: thin;
  background-image: var(--bg-image);
  ::-webkit-scrollbar{
    width: 8px;
  }
  
  ::-webkit-scrollbar-track{
    background: var(--scroll-color-crm1);
  }
  
  ::-webkit-scrollbar-thumb{
    background-color: var(--scroll-color-crm2);
  }
}

body{
  width: 900px;
  position: relative;
  margin: 0 auto;
  padding: 1vh;
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--font-color);
  scrollbar-color: var(--scroll-color-ffox);
  scrollbar-width: thin;
}


a{
  color: var(--link-color);
  font-weight: 700;
  cursor: pointer;
  text-decoration: var(--link-decor);
}

a:hover{
  text-decoration: none;
  font-style: italic;
}

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

::selection{
  color: var(--selected-color);
  background-color: var(--selection-bg);
}

a::selection{
  color: var(--link-selection);
  background-color: var(--selection-bg);
}

h1{
  text-align: center;
  font-size: 1.6rem;
  color: var(--header-color);
  background-image: var(--h1-bg);
  margin: -8px -8px 0 -9px;
  padding: 20px 0 20px 0;
  border-radius: var(--border-rad);
  background-size: contain;
}

h2{
  text-align: center;
  font-size: 1.1rem;
}

a img:hover:not(.marquee a img:hover, .ad a img:hover, .censor:hover, .rings a img:hover, nav a img:hover) {
  filter: drop-shadow(0px 0px 3px rgba(110, 96, 233, 0.815))
}

.content{
  display: grid;
  grid-template-areas:
    "header header header"
    "left main right"
    "marquee marquee marquee"
    "recs updates insert"
    "rings ad ad"
    "footer footer footer";
  grid-template-columns: 190px 3fr 1fr;
  grid-template-rows: 200px 423px 40px 280px 105px 60px;
  grid-gap: 8px;
  border-width: 8px;
  border-style: solid;
  border-image: var(--border-cont) 16 fill round;
  background-clip: border-box;
  padding: 5px;
  margin: 0 auto;
}

header{
  border: var(--border);
  border-radius: var(--border-rad);
  background-image: var(--header);
  grid-area: header;
}

.left{
  grid-area: left;
  text-align: center;
}

nav{
  background-color: var(--bg-color);
  border: var(--border);
  border-radius: var(--border-rad);
  h2{
    margin: 0;
    padding: 5px 0 5px 0;
    text-shadow: var(--text-shadow);
    background-image: var(--h2-bg);
    border-top-left-radius: var(--border-rad);
    border-top-right-radius: var(--border-rad);
  }
  a{
    border: none;
    border-top: var(--border)!important;
    display: block;
    padding: 5px;
    background-image: var(--button-bg);
    box-shadow: var(--button-shadow);
    text-align: left;
    color: var(--header-color);
    text-shadow: var(--text-shadow);
    img{
      margin-right: 7px;
      vertical-align: -5px;
    }
  }
  a:hover{
    background-image: var(--button-bg-hover);
    box-shadow: var(--button-shadow-hover);
    text-decoration: underline;
  }
  a:visited{
    color: var(--button-link-visited);
  }
}

.text{
  vertical-align: middle;
  margin-left: 7px;
}

.stampz{
  display: flex;
  align-items: center;
  margin-top: 4px;
  a{
    margin: auto;
  }
}

main{
  padding: 10px;
  background-image: var(--main-bg);
  box-shadow: var(--main-box-shadow);
  border: var(--border);
  border-radius: var(--border-rad);
  grid-area: main;
  p{
    margin: 0;
  }
}

.mainimg{
  width: 100px;
  float: right;
}

.right{
  grid-area: right;
  display: flex;
  flex-direction: column;
}

.right img{
  text-align: right;
  margin: auto 0 0 auto;
}

.to-do{
  font-family: sticky;
  font-size: .8rem;
  line-height: 1.2em;
  padding: 10px;
  background-color: var(--todo-bg);
  box-shadow: var(--todo-box-shadow);
  border: var(--todo-border);
  border-radius: var(--border-rad);
  height: fit-content;
}

.to-gether{
  padding: 8px;
  padding-top: 12px;
  background-color: var(--todo-bg);
  border: 2px dotted var(--together-dotborder);
  outline: 3px solid var(--todo-bg);
  border-radius: var(--border-rad);
}

.to-gether h2{
  margin: 0 0 5px 0;
}

.to-do p{
  margin: 0;
}

ul{
  margin: 0;
  margin-left: 15px;
  padding: 0;
}

.statuscafe{
  height: fit-content;
  margin-top: 10px;
}

#statuscafe{
  padding: .5em;
}

#statuscafe-username{
  margin-bottom: .5em;
  font-size: .78rem;
}

#statuscafe-content{
  margin: 0;
}

/*marquee start*/
@media (prefers-reduced-motion:reduce){
  .marquee-container{
      padding: 0!important;
  }
  .marquee{
      animation: none!important;
      padding-left: 0!important;
  }
  .marquee img{
      margin-left: 2px;
      margin-right: 2px;
  }
}
@keyframes marquee{
  0%{
      transform: translateX(100%);
  }
  100%{
      transform: translateX(-100%);
  }
}

.marquee-container{
  overflow: hidden;
  display: grid;
  width: 100%;
  align-items: center;
  grid-template-areas: "center";
  --speed-to-loop: 35s;
  --timing-function: linear;
  --gap: 400px;
  grid-area: marquee;
}

.marquee{
  animation: marquee var(--speed-to-loop) var(--timing-function) infinite;
  width: max-content;
  min-width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  grid-area: center;
  padding-right: var(--gap);
  pointer-events: auto;
  img {
    image-rendering:crisp-edges;
  }
  img:hover {
    transform: scale(1.05);
  }
}

.evil-copy{
  animation-delay: calc(var(--speed-to-loop)/ -2);
}

.marquee-container:hover > .marquee {
  animation-play-state: paused; 
}
/*marquee end*/

.game-recs{
  grid-area: recs;
  background: var(--recs-bg);
  color: var(--recs-font);
  border: var(--recs-border);
  border-radius: var(--border-rad);
  padding: 5px;
  text-align: center;
  img{
    width: 65%;
    margin: 0 auto;
    border-radius: var(--border-rad);
  }
  a{
    color: var(--recs-link);
  }
}

.game-recs a::selection,.game-recs b::selection,.game-recs i::selection,.game-recs::selection{
  background-color: var(--recs-selection-bg);
  color: var(--recs-selection-font);
}

.updates{
  grid-area: updates;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 3px;
  border-width: 45px;
  border-style: solid;
  border-image: var(--updates-border) 55 fill round;
  scrollbar-color: var(--scroll-color-ffox-u);
  scrollbar-width: thin;
  h2{
    margin: 0;
  }
  p{
    margin: 0 0 10px 0;
  }
}

.updates::-webkit-scrollbar-track{
  background: var(--scroll-color-crm1-u);
}

.updates::-webkit-scrollbar-thumb{
  background-color: var(--scroll-color-crm2-u);
}

.self-insert{
  grid-area: insert;
}

.rings{
  grid-area: rings;
  text-align: center;
}

.ng-ring {
  margin-bottom: 5px;
}

#palestine-webring {
  a:first-child {
      margin-left:auto
  }
  a:nth-child(3) {
      margin-right:auto;
  }
}

.ad{
  grid-area: ad;
  img:hover {
    filter: drop-shadow(0px 0px 4px rgba(217, 96, 233, 0.582));
  }
}

footer{
  grid-area: footer;
  padding: 5px;
  text-align: center;
  background-image: var(--main-bg);
  box-shadow: var(--main-box-shadow);
  border: var(--border);
  border-bottom-left-radius: var(--border-rad);
  border-bottom-right-radius: var(--border-rad);
}

.censor{
  position: absolute;
  bottom: -13px;
  right: -56px;
}

/*tooltip code*/
[role=tooltip]{
  background: linear-gradient(180deg,#fff,#fff6dc);
  border: 1px solid #dfd2ca;
  border-radius: 3px;
  box-shadow: 5px 5px 3px -3px #726c6766;
  position: relative;
}
[role=tooltip]:before{
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23dfd2ca'/%3E%3C/svg%3E");
    content: "";
    height: 18px;
    left: 1em;
    position: absolute;
    top: -18px;width: 18px;
}
[role=tooltip][id]{position: absolute}[role=tooltip].is-top:before{
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23f7eed5' stroke='%23f7eed5'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23dfd2ca'/%3E%3C/svg%3E");
    bottom: -18px;
    top: unset;
    transform: scale(-1);
}
[role=tooltip].is-top.is-right:before{
    transform: scaleY(-1);
}
[role=tooltip].is-left:before{
    left: 119px;
    right: 1em;
}
[role=tooltip].is-left.is-bottom:before{
    transform: scaleX(-1);
}