@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@300;400;500;600;700&display=swap');
@import url(fonts.css);

/* Kirby - https://www.cursors-4u.com/cursor/kirby-walking-13 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/nintendo-game-boy-pocket-e1353550-32.webp') 32 32, auto !important;
}

html{
     scrollbar-color: #ffdbed #8d93cb ;
}
html::selection{
     color: #5b629b;
     background-color: #f7769b;
     text-shadow: 1px 1px 2px #5b629b;
}
body{
    background-color: #ffeef6;
}
header {
    width: 100%;
    height: 100px;
    background-image: url('patterns/stripes.png');

    background-size: 20%;
    display: flex;
    border: #596aac 2px dashed;
    border-radius: 10px;

}
#pasta1{
 position: absolute;
    width: 300px;
    height: 400px;
    
}

header p {
    font-family: "basic", sans-serif;
    align-content: end;
    margin-left: 70%;
}
footer {
    background-image: url(images-more/bluestripeslow.png);
    background-size: 50%;
    height: 150px;
    display: flex;
    text-align: center;
   
    border: #f7769b 5px dashed;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}

footer p {

    font-family: 'cursive';
    color: #f7769b;
    font-size: 30px;
}

.box-2-top{
    width: 950px;
    height: 200px;
    background-color: rgb(241, 193, 212);
    margin-top: 20px;
    margin-left: 40px;
    border-radius: 20px;
}

.box-2-bottom{
    width: 950px;
    height: 610px;
    background-color: #f7769b;
    
    margin-left: 40px;
    border-radius: 20px;
}
.box3{
    width: 700px;
    min-width: 700px;
    height: 850px;
    background-color: #8d93cb;
    margin: 20px;
    border-radius: 15px;
    
    
}
.box3-bottom{
    background-image: url(images-more/bluedotslow.png);
    margin: 20px;
    border-radius: 15px;
    margin-right: 90px;
    border-radius: 10px;
    border: #35248191 0.2px solid;
    height: 250px;
    width: 500px;
}
small{
    margin-top: -40px;
    margin-left: 90px;
    width: 300px;
    position: absolute;
}
/* -------------------BOX1------------------ */
.box-1{
    width: 300px;
    min-width: 300px;
    height: 850px;
    background-color: #8d93cb;
    margin: 20px;
    border-radius: 15px;
}

.box-1 nav {
    text-decoration: none;
}

.box-1 ul {

    text-decoration: none;
    list-style: none;
}

.box-1 li {
    margin-left: -20px;
    margin-top: 10px;
    font-family: "Jua", sans-serif;
    font-weight: 400;
    font-size: 35px;


}

.box-1 li a {
    text-decoration: none;
    color: #596aac;
}

 .box-1 li a:hover {
    color: #352481;

}
/* ---------------------nav ul li pages----------------------- */
.box3-bottom ul{
    text-decoration: none;
    list-style: none;
}
.box3-bottom button{
    margin-bottom: 10px;
    margin-left: -20px;
}
button{
    color: #352481;
    background-image: url(images-more/pinkflannel.png);
    border: 1px dotted #352481;
    padding: 10px;
    height: 50px;
    font-size: 20px;
    font-family: celtic2;
    margin-bottom: 10px;
    margin-left: -20px;
}
button:hover{
    color: #b63c5f;
    background-image: url(images-more/blueflannel.png);
    border: 1px dotted #b63c5f;
    padding: 10px;
    margin-bottom: 10px;
    margin-left: -20px;
    font-family: celtic2;
}

/* ---------------------BOX17----------------------- */
.box17 {
margin:10px; /* 中央寄せは0をautoに変更 */
width: 90% /* 幅 */
}
.u01 {
background:url(images-more/f-ue.webp) repeat-x;
height:67px;
margin:0 67px
}
.s01 {
background:url(images-more/f-sita.webp) repeat-x;
height:67px;
margin:0 67px
}
.box-top {
background-image:url(images-more/f-kado1.webp), url(images-more/f-kado2.webp);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:67px
}
.box-center {
background-image:url(images-more/f-migi.webp), url(images-more/f-hidari.webp);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y
}
.box-inner {
background:#fff;
margin:0 67px;
font-family: 'web';
color: #452508;
}
.box-bottom {
background-image:url(images-more/f-kado3.webp), url(images-more/f-kado4.webp);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:67px
}
/* --------------------BOX2TOP---------------------- */
.wariophone1{
    height: 180px;
    margin: 10px;
    border-radius: 8px;
    border: #f7769b 2px dotted;
}
.talking{
    width: 400px;
    
    font-family: web2;
    color: #b63c5f  ;
}
.line{
    position: absolute;
    transform: rotate(90deg);
    margin-left: 530px;
    margin-top: 90px;
    color: rgb(234, 166, 193);
}
/* ------------------IMAGE OF THE WEEK------------------ */
.text-img{
    margin-top: 1px;
     margin-left: 15px;
    font-family: web;
    color: #712d40;
    font-size: large;
}
.image-week{
    width: 150px;
    height: 150px;
    margin-left: 15px;
    border: #f7769b 1px dashed;
    z-index: 4;
}
.text-week{
    margin-top: 15px;
     margin-left: 15px;
    font-family: web;
    color: #712d40;
    width: 150px;
    z-index: 10;
}
.tvtexture{
    position: absolute;
    width: 152px;
    height: 152px;
    margin-left: 15px;
    z-index: 5;
    opacity: 0.6;
   
}
.pinkbow{
    position: absolute;
    margin-left: 135px;
    margin-top: -35px;
    z-index: 6;
    transform: rotate(10deg);
}

.text-meme{
    margin-top: 100px;
     margin-left: -90px;
    font-family: web;
    color: #712d40;
    font-size: small;
    position: absolute;
}
.meme-week{
    width: 80px;
    height: 80px;
    margin-left: -90px;
    margin-top: 110px;
    border: #f7769b 1px dashed;
    border-radius: 5px;
    z-index: 4;
     position: absolute;
}
.textmeme-week{
    margin-top: 15px;
     margin-left: 15px;
    font-family: web;
    color: #712d40;
    width: 150px;
    z-index: 10;
     position: absolute;
}
.tvtexturememe{
    position: absolute;
    width: 82px;
    height: 82px;
    margin-left: -90px;
    margin-top: 110px;
    border-radius: 5px;
    z-index: 5;
    opacity: 0.6;
     position: absolute;
   
}

/* ----------------------------------GAMES---------------------------------- */
.games{
    background-image: url(/images-more/blueflannel.png);
    width: fit-content;
    padding: 10px;
    border-radius: 8px;
    margin: 30px;
    border: #352481 2px dotted;
}
.games p{
    font-size: 20px;    
  margin-left: 10px;
    font-family: alagard;
    color: #474a79;

}
.games li{
    font-family: 'cursive';
    font-size: 20px;
    color: #352481;
}
.bottom-top h2{
    font-family: daydream;
    font-size: 20px;
    color: #712d40;
}
.stardew1{
    position: absolute;
    margin-top: -190px;
    margin-left: 310px;
}
.stardew2{
    position: absolute;
    margin-top: -250px;
    margin-left: 830px;
}
.husbands{
    position: absolute;
    margin-top: -130px;
    margin-left: 315px;
    font-family: web;
    color: #ad3658;
    font-size: 25px;
}
.flexstardew{
    display: flex;
    position: absolute;
    margin-top: -100px;
    margin-left: 310px;
}
.bottom-bottom h2{
    font-family: daydream;
    color: #712d40;
    margin-top: -30px;
    margin-left: 200px;
    font-size: 20px;
}
.v1{
   background-color: #ad365821;
    border-radius: 8px;
    border: #db4f76 1px solid;
    position: absolute;
    margin-top: 145px;
    margin-left: 15px;
}
.v2{
    background-color: #ad365821;
    border-radius: 8px;
    border: #db4f76 1px solid;
    position: absolute;
    margin-top: -45px;
    margin-left: 15px;
}
.v3{
    position: absolute;
    margin-top: -30px;
    margin-left: 50px;
}
.moretalk{
    width: 150px;
    margin: 10px;
    margin-top: 5px;
    font-family: 'basic';
    color: #712d40;
    background-image: url(images-more/pinkflannellow.png);
    border-radius: 8px;
    border: #ad3658 1px solid;
    padding: 10px;
}
.tablep{
     position: absolute;
    margin-left: 775px;
    margin-top: 170px;
   color: #ad3658;
    font-size: 20px;
    font-family: web;
}
.tablep2{
     position: absolute;
    margin-left: 775px;
    margin-top: 210px;
   color: #ad3658;
    font-size: 20px;
    font-family: web;
}
table{
    position: absolute;
    margin-left: 735px;
    margin-top: 200px;
    border: #ad3658 1px dotted;
    font-size: 20px;
    color: #ad3658;
}
th{
    padding-left: 9px;
    font-family: web;
}
td{
    padding: 5px;
    border: #ad3658 1px dotted;
    font-family: web;
}
.skin{
     border: 1px dotted #ad3658;
    border-radius: 5px;
    height: 275px;
    position: absolute;
    margin-top: 50px;
    margin-left: 310px;
}
.marquee1{
    color: #ad36587e;
    position: absolute;
    margin-top: 45px;
    font-size: smaller;
    width: 450px;
    margin-left: 315px;
}
.marquee2{
    color: #ad36587e;

   
    font-size: smaller;
    
    margin-left: 45px;
}
/* ----------------------------CRCOHET----------------------------- */
 h2{
    font-family: alagard;
    color: #352481;
    font-size: 35px;
    margin: 20px;
}
.crochet{
    color: #474a79;
    font-family: 'rainy';
    width: 300px;
    margin: 20px;
    margin-top: -20px;
}
.works{
    margin-left: 50px;
    margin-top: -40px;
    background-image: url(images-more/blueflannellow.png);
    padding: 20px;
    padding-top: 10px;
    border: #352481 1px solid;
    width: 250px;

}
.works h3{
    font-family: kiwi;
    color: #352481;
    font-size: 35px;
    margin: 10px;
}
.works li{
    font-family: 'cursive';
    color: #614eb7;
    font-size: 25px;
    margin: 10px;
}
.works ul{
    list-style: none;
}
.works a{
    font-family: 'cursive';
    color: #614eb7;
    text-decoration: none;
}
.works a:hover{
    color: #483796;
}
.cream{
    background-image: url('https://64.media.tumblr.com/4183e6d7da163a87493731c089d68b33/b106357e98a8b070-14/s250x400/1138c697240b67f54b3cfc6538a89acf956bf41c.gifv');
    background-repeat: repeat;
    height: 19px;

}


/* -----------------------STICKERS-------------- */
.stickers-crochet-top{
    position: relative;
    inset: 0;
    height: 0;
}
.stickers-box1{
    position: relative;
    inset: 0;
    height: 0;
}
.tomodachi{
    position: absolute;
    height: 50px;
    margin-top: -70px;
}
.sleepykitty{
    position: absolute;
    height: 100px;
    margin-top: -160px;
}
.sleepykitty1{
    position: absolute;
    height: 70px;
    margin-top: -133px;
    margin-left: 100px;
}
.bowblue{
    position: absolute;
    margin-top: -240px;
    margin-left: -100px;
}
.butterfly{
    position: absolute;
    margin-top: -170px;
    margin-left: 100px;
    height: 90px;
    transform: rotate(270deg);
}
.cakes{
    position: absolute;
    height: 100px;
    margin-top: -60px;
    margin-left: 200px;
    transform: rotate(250deg);
}
.isabelle{
    position: absolute;
    height: 150px;
    margin-top: -46px;
    margin-left: -20px;

}
.animal{
    position: absolute;
    margin-left: 420px;
}