@font-face {
    font-family:'bonheur';
    src: url("https://chouxgat.neocities.org/fonts/Le%20Jardin%20du%20Bonheur.ttf");
}

@font-face {
    font-family:'babelsans';
    src: url("https://chouxgat.neocities.org/fonts/BabelSans.ttf");
}

body {
    background-image:url("https://chouxgat.neocities.org/graphics/greyheartbg.gif");
    font-family:'babelsans';
    font-size:18px;
    color:rgb(63, 63, 63);
}

#art {
    filter:grayscale(100%);
}

#art:hover {
  filter:grayscale(0);
}

::selection {
    background-color:rgba(213, 213, 213, 0.789);
}

h1 {
  position:absolute;
  left:30px;
  top:-15px;
  z-index:1;
  font-family:'bonheur';
  font-size:130px;
  color:white;
  filter:opacity(90%);
  text-shadow:-1px -1px 1px #00000056, 1px -1px 1px #00000056, -1px  1px 1px #00000095, 1px  1px 1px #00000095;
}

h2 {
  position:absolute;
  left:10px;
  bottom:5px;
  z-index:1;
  font-size:25px;
  color:white;
  filter:opacity(90%);
  text-shadow:-1px -1px 1px #00000056, 1px -1px 1px #00000056, -1px  1px 1px #00000095, 1px  1px 1px #00000095;
}

h3 {
    font-family:'bonheur';
    font-size:50px;
    color:rgb(63, 63, 63);
    text-align:center;
}

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.fade-in {
  animation: fadeIn 2s ease forwards;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url('https://cdn.cursors-4u.net/previews/small-grey-outline-pointer-6a97f823-32.webp') 32 32, auto !important;

}


.mainimg {
  width: 35%;
  height: 100%;
  object-fit: cover;
  border-right:.5px solid rgb(221, 221, 221);
  filter:grayscale(100%) brightness(120%) blur(0.5px);
}

.side {
  width:50%;
  height:100%;
}

.page {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.collection {
    position:absolute;
    display:flex;
    background-color:rgba(255, 255, 255, 0.836);
    width:60%;
    height:100%;
    flex-direction:column;
}

#fics {
    position:absolute;
    background-color:white;
    filter:drop-shadow(0px 0px 5px #00000060);
    width:40%;
    height:100%;
    right:-88px;
    padding:10px;
    text-align:center;
}

a {
    color:rgb(180, 180, 180);
    transition: all 0.25s ease-in-out;
}

a:hover {
    color:rgb(226, 226, 226);
    text-shadow:-1px -1px 1px #00000056, 1px -1px 1px #00000056, -1px  1px 1px #00000095, 1px  1px 1px #00000095;
}

#desc {
    text-align:center;
    width:68%;
    margin:10px;
    display:block;
}

#artwork {
  text-align:center;
  display:block;
  width:68%;
  margin:10px;
  overflow-y:scroll;
}

::-webkit-scrollbar {
    display:none;
}