@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

body {
  font-family: 'Times New Roman', Times, serif;
}
body{
  background-color: #f1f3f6;
  background-attachment:fixed;
  font-size:14px;
  image-rendering: crisp-edges;
  color:#ae9f8f;
}
.CONTAINER-BOX {
  position: relative;
    width: 90%;
    max-width: 400px;
    margin: auto;
  height: 800px;
  border-width:1px;
  background-color: none;
  padding:10px;
  padding-top:20px;
  padding-bottom:20px;
color: #6c8093;
  align-items: center;
  align-content: center;
  }
.next {
    display: flex;
    justify-content: center;
    transition: transform 0.8s ease;
    font-size: 25px;
}

.next:hover {
    transform: scale(1.15);
}
.colour-hover {
  filter: grayscale(100%) contrast(80%) brightness(115%);
  transition: filter 0.8s ease, transform 0.8s ease;
}
.text{
    text-align: justify;
    color: #6c8093;
}
.colour-hover:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}
@font-face {
  font-family: 'CHNOPixel-Italic';
  src: url('https://humantooth.neocities.org/fonts/CHNOPixelCodePro-Italic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.subheading {
  font-family: 'Times New Roman', Times, serif;  font-size: 20px;
  color: #6c8093;
  text-align: center;
  margin-bottom: 10px;
}
.image-grid {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  max-width: 100%;
  height: auto;
}
::selection {
    color: #828aa5;
    background-color: #d4ddf3;
}
/* -----------------------------------------------------------
   LINKS & HOVERS
----------------------------------------------------------- */

a {
  color: #adafc7;
  text-decoration: none;
  display: inline-block;
}

a:link,
a:visited,
a:active {
  color: #0080ffee;
  font-weight: 800;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #0080ffee;
  font-weight: 800;
  background-color: transparent;
}
/* scroll LEFT */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ALL SCROLLBARS */
* {
  scrollbar-width: thin;
  scrollbar-color: #aebfca #e8e9e9;
}

/* Chrome / Edge / Opera / Safari */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: #e8e9e9;
}

*::-webkit-scrollbar-thumb {
  background: #aebfca;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #9aafb9;
}