/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  font-family: 'M PLUS Rounded 1c';
}
.container {
    background-image: linear-gradient(to top, #c9b8a1, #ededed);
  width: 900px;
  height: 900px;
  margin: auto;
    color: black;
    border: 10px double gray;
    border-radius: 10px;
}
.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
  background-color: transparent;
  width: 900px;
  height: auto;
  margin: auto;
}
.box1 {
      background-color: white;
    width: 400px;
        height:210px;
                    border: 5px double gray;
}
.box2 {
    background-color: white;
    width: 200px;
    height:300px;
           border: 5px double gray;
    
}
.box3 {
    background-color: white;
    width: 200px;
        height:200px;
        text-align: center;
            border: 5px double gray;
}
.box4 {
      background-color: white;
    width: 200px;
        height:200px;
        text-align: center;
        overflow: auto;
        border:5px double gray;
}
.box5 {
      background-color: white;
    width: 400px;
        height:200px;
        text-align: center;
        overflow: auto;
        border:5px double gray;
}
.box6 {
      background-color: white;
    width: 200px;
        height:200px;
        text-align: center;
        overflow: auto;
       border: 5px double gray;
}
.box7 {
      background-color: white;
    width: 200px;
        height:200px;
        text-align: center;
        overflow: auto;
       border: 5px double gray;
}
.kafka {
      background-image: url("selfship.png");
    width: 400px;
        height:200px;
        text-align: center;
        overflow: auto;
       border: 5px double gray;
       margin: auto;
                    background-size: 105% 105%;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pagedoll {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  height: 550px;
  width: auto;
  
}
.pagedolls {
  position: fixed;
  bottom: 0;
  right: 1000px;
  z-index: 1000;
  pointer-events: none;
  height: 400px;
  width: auto;
  
}
.pagedollz {
  position: fixed;
  bottom: -150px;
  right: 650px;
  z-index: 1000;
  pointer-events: none;
  height:450px;
  width: auto;
  
}
.wrapper {
  /* Clips the overflowing text outside this container */
  max-width: 100%;
  overflow: hidden;
}

.marquee {
  /* Prevents text from wrapping to the next line */
  white-space: nowrap;
  /* Ensures the paragraphs are inline */
  display: inline-block;
  /* Applies the animation */
  animation: marquee 15s linear infinite;
}

.marquee p {
  /* Keeps the text elements inline */
  display: inline-block;
}

/* Defines the animation */
@keyframes marquee {
  0% {
    /* Starts the text at the initial position (0) */
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* Moves the text 50% of its width to the left to create the loop */
    transform: translate3d(-50%, 0, 0);
  }
}
.grid-container2 {
  display: grid;
  grid-template: 150px / auto auto auto;
  background-color: transparent;
  width: 900px;
  height: auto;
  margin: auto;
}
.banner {
  width:850px;
  height: 108px;
  background-image: url("banner.png");
        background-repeat: no-repeat;
        background-position: center; 
          background-color: white;
    border: 10px double gray;
           border-radius: 10px;
             background-size: 105% 105%;
             margin: auto;
}
    .aboutcontainer {
    background-image: linear-gradient(to top, #7284f5, #daa3c8);
  width: 900px;
  height: 900px;
  margin: auto;
    color: black;
    border: 10px double black;
    border-radius: 10px;
}
.box8 {
        background-color: black;
    width: 200px;
        height:390px;
                    border: 5px double #7284f5;
                    color: white;
                      margin: auto;
                              text-align: center;
}
.box9 {
        background-color: black;
    width: 600px;
        height:390px;
                    border: 5px double #7284f5;
                      margin: auto;
                      color: white;
}
.box10 {
        background-color: black;
    width: 600px;
        height:390px;
                    border: 5px double #daa3c8;
                      margin: auto;
                      color: white;
}
.box11 {
        background-color: black;
    width: 200px;
        height:390px;
                    border: 5px double #daa3c8;
                      margin: auto;
                      color: white;
                      overflow: auto;
}
.nagito {
  width:150px;
  height: 138px;
  background-image: url("nagito.png");
        background-repeat: no-repeat;
        background-position: center; 
          background-color: white;
    border: 10px double #daa3c8;
           border-radius: 10px;
             background-size: 105% 105%;
             margin: auto
}
.box12 {
width: 600px;
height: 650px;
margin: auto;
    background-image: linear-gradient(to top, #1e24ed, black);
        border: 10px double #dea4ad;
    border-radius: 10px;
    overflow-y: auto;
        overflow-x: hidden;
    color: white;
}
.nautika {
      background-image: url("https://files.catbox.moe/91a6lv.jpeg");
    width: 450px;
        height:150px;
        text-align: center;
        overflow: auto;
       border: 5px double #1e24ed;
       margin: auto;
                    background-size: 105% 105%;
}
.box13 {
width: 500px;
height: 300px;
margin: auto;
    background-color: #dea4ad;
        border: 10px double black;
    border-radius: 10px;
    overflow-y: auto;
        overflow-x: hidden;
    color: black;
}