@media screen and (min-width: 1366px) {
    
html{
     scrollbar-color: #ffdbed #8d93cb ;
}
html::selection{
     color: #de4772;
     background-color: #f7ce42;
     text-shadow: 1px 1px 2px #de4772;
}
body{
    background-color: #fffbf8;
}
header {
    width: 100%;
    height: 100px;
    background-image: url('patterns/funky.png');

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

}

header p {
    font-family: "basic", sans-serif;
    align-content: end;
       margin-left: 70%;
    color: #a182a2;
}
footer {
    background-image: url(patterns/knitting.png);
    background-size: 50%;
    height: 150px;
    display: flex;
    text-align: center;
   margin-top: 10px;
    border: #65accc 2px dashed;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}

footer p {

    font-family: 'poti';
    color: #5c3b5e;
    font-size: 50px;
}

main{
    display: flex;
}

/* ---------------------ASIDE----------------------- */
aside{
    margin-left: 10px;
    border-radius: 10px;
    
    margin-bottom: 20px;
    width: 300px;
    height: 1255px;
    min-width: 300px;
    background-color: #c1cc8d;
    border: 1px solid #aab475;
}
 nav {
    text-decoration: none;
}

 ul {

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

 li {
    margin-left: -20px;
    margin-top: 10px;
    font-family: chick;
    font-weight: 400;
    font-size: 35px;


}

li a {
    text-decoration: none;
    color: #de4772;
}

li a:hover {
    color: #653e66;
}
.lace {
    background-image: url('https://64.media.tumblr.com/b0a1a6dbca24531ace55639e1773fb65/612c4329124221a1-8b/s400x600/fa0786db3777156eacc6c5b4b48ae4eb890310dd.pnj');
    height: 20px;

    width: 100%;
    background-repeat: repeat;
}
.thread {
    background-image: url('https://web.archive.org/web/20090729152743im_/http://hk.geocities.com/enid1912/leaf03.gif');
    height: 10px;

    width: 100%;
    background-repeat: repeat;
}
.moranguinhodiv{
    margin: 10px;
    background-color: #fffbf8;
    padding: 5px;
     border-image:url(patterns/border.png) 100 / 19px
    round;
    
}
.moranguinho1{
    width: 250px;
}

.box03{
background-image:url(images-crochet/f-ue.png),url(images-crochet/f-sita.png);
background-position:top left,bottom left;
background-repeat:repeat-x,repeat-x;
margin: 20px; /* 中央寄せは0をautoに変更 */
padding:30px 0;
border: #fac3b8 2px dashed;
border-top: 0px;
border-bottom: 0px;
width:80%;/* 幅 */
margin-left: 10px;
}
.box-inner{
background:#fdf9f8;
padding:1em;
font-family: notepen;
font-size: 20px;
color: #694442;

}

aside marquee{
background-color: #f7ce42;
padding: 5px;
border: 4px groove #f7cd428a;
}
/* -----------------------STICKERS ASIDE------------------ */
.stickersaside{
    position: relative;
    inset: 0;
    height: 0;
}
.kitty{
    position: absolute;
    height: 50px;
    margin-top: -260px;
    margin-left: 270px;
}
.window{
    position: absolute;
    height: 60px;
    margin-top: -50px;
    margin-left: 0px;
}
.sun{
    position: absolute;
    height: 35px;
    margin-top: 55px;
    margin-left: 0px;
}
.clover{
    position: absolute;
    height: 30px;
    margin-top: 565px;
    margin-left: 230px;
}
/* -----------------------------SIDE TOP-------------------- */
.top {
   
    height: 200px;
    background-color: #f18ba0;
    border: #ea5d88 1px solid;
     width: 1000px;
    margin-left: 10px;
    border-radius: 10px;
    margin-top: 20px;
    
}
.talking{
    font-family:  'basic';
    color: #b43056;
    margin-left: 10px;
    margin-right: 20px;
    width: 100%;

}
.linha-vertical {
  height: 200px;/*Altura da linha*/
  border-left: 1px #ea5d88 dashed;/* Adiciona borda esquerda na div como ser fosse uma linha.*/

}
.bottom {
    width: 500px;
    height: 1030px;

}
.flex{
    display: flex;
}
.maruqeetop{
position: absolute;
margin-top: -85px;
    margin-left: 200px;
    width: 800px;
    color: #ea5d876e;
}
/* ----------------------BOTTOM------------------- */
.bottom1 h1{
    font-family: panic;
    color: #ef804b;
    font-weight: 100;
    font-size: 40px;
}
.bottom1p{
    font-family: rainy;
    color: #d86835;
    margin-left: 10px;
    margin-bottom: -20px;
    margin-right: 20px;
    margin-top: 10px;
}
.linha{
    color: #d86835;
}

.bottom2 h1{
    font-family: panic;
    color: #856986;
    font-weight: 100;
    font-size: 40px;
    
}
.bottom3 h1{
    font-family: panic;
    color: #65accc;
    font-weight: 100;
    font-size: 40px;
    z-index: 2;
}
.bottom3p{
    font-family: rainy;
    color: #4d8fad;
    margin-left: 10px;
    margin-bottom: -20px;
    margin-right: 20px;
    margin-top: -80px;
    width: 350px;
}
.linha-vertical2 {
    margin-left: 120px;
     margin-top: -100px;
  height: 343px;/*Altura da linha*/
  border-left: 1px #77b8d5 dashed;/* Adiciona borda esquerda na div como ser fosse uma linha.*/
  z-index: 1;

}
.strawberry{
    background-image: url('https://64.media.tumblr.com/32f50a14b2b5dab78bd3f881f1d16b2b/de4fe35055db1685-25/s400x600/d6e8ef7ad38944cd17e6ee859c456635aeafecd3.gifv');
    height: 22px;
    margin-top: 15px;
    margin-bottom: 5px;
    width: 100%;
    background-repeat: repeat;
}

.grid{
    width: 400px;
    height: 200px;
    opacity: 0.8;
    border: #65accc 1px solid;
    margin-left: 20px;
    margin-top: 10px;
}
.maruqee{
position: absolute;
margin-top: -170px;
    margin-left: 550px;
    width: 450px;
    color: #77b8d5;
}
.strawberrypixel{
    height: 25px;
    position: absolute;
    margin-top: 50px;
    margin-left: 480px;
}
/* ------------------FUTURE---------------- */
.project{
    height: 180px;
    margin: 20px;
    margin-top: 10px;
    border: 2px solid #a182a2;
   width: 140px;
    transition: transform 0.5s ease;
   

}
.project:hover{

   transform: scale(1.05);
   position: relative;
 z-index: 1;

}
.text{
    margin-top: -7px;
  visibility: hidden;
    font-family: basic;
    text-align: center;
}
.project:hover + .text{
    position: relative;
    visibility: visible;
    font-family: basic;
    text-align: center;
    z-index: 5;
    
}
.linha-vertical {
    position: absolute;
  height: 200px;/*Altura da linha*/
  margin-top: 0px;
  margin-left: 210px;
  rotate: calc(0deg);
  border-left: 1px #ea5d88 dashed;/* Adiciona borda esquerda na div como ser fosse uma linha.*/

}
.linha-vertical2 {
    margin-left: 120px;
     margin-top:  -100px;
   rotate: calc(0deg);
  height: 343px;/*Altura da linha*/
  border-left: 1px #65accc dashed;/* Adiciona borda esquerda na div como ser fosse uma linha.*/
  z-index: 1;

}



/* ----------------FLEX STICKERS--------------- */
.patches{
    width: 100px;
    height: 100px;
    transition: 1s ease;
}
.patches12{
    width: 100px;
    height: 100px;
    transition: 1s ease;
}
.patches2{
    width: 100px;
    height: 100px;
    transition: 1s ease;
}
.patches22{
    width: 100px;
    height: 100px;
    transition: 1s ease;
}
.buttons{
    width: 100px;
    height: 100px;
    transition: 1s ease;
}
.buttons2{
    width: 100px;
    height: 100px;
    transition: 1s ease;
}
.card {
  
  margin: 50px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}



.card-back {

  transform: rotateY(180deg);
}
.morangos{
    position: absolute;
    width: 290px;
    margin-top: -145px;
    margin-left: 550px;
}

/* ---------------------------STICKERS--------------------- */
.stickersbetween1{
     position: relative;
    inset: 0;
    height: 0;
}
.lacestrawberry{
     position: relative;
    inset: 0;
    height: 0;
}
.strawberrytop{
    position: absolute;
    width: 450px;
    margin-top: -10px;
    z-index: 5;
}
.strawberryleft{
    position: absolute;
    margin-top: 100px;
    margin-left: -90px;
    height: 25px;
    rotate: -90deg;
    z-index: 5;
}
.strawberryright{
    position: absolute;
    position: absolute;
    margin-top: 100px;
    margin-left: 315px;
    height: 25px;
    rotate: -270deg;
    z-index: 5;
}
.strawberrybottom{
    position: absolute;
 
    width: 450px;
    margin-top: 190px;
    z-index: 5;
}
.pixel1{
    position: absolute;
    height: 25px;
    margin-top: -10px;
    margin-left: -5px;
}
.pixel2{
    position: absolute;
    height: 30px;
    margin-top: -10px;
    margin-left: 990px;
}

  .bottom {
    width: 1000px;
    margin-left: 10px;
    border-radius: 10px;
    margin-top: 20px;
}
.bottom1 {
    width: 100%;
    height: 343px;
    background-color: #f6ba71;
    border: #f98e60 1px solid;
    border-radius: 8px 8px 0 0;
    
}
.bottom2 {
    width: 100%;
    height: 343px;
    background-color: #b89eb3;
    border: #a182a2  1px solid;
    
    
}
.bottom3 {
    width: 100%;
    height: 343px;
    background-color: #86d0d9;
    border: #65accc 1px solid;
    border-radius: 0 0 8px 8px ;
    
}

.bottom2-flex{
    width: 100%;
   margin-left: -1px;
    height: 243px;
    background-color: #b89eb3;
    border: #a182a2  1.1px solid;
    border-top: none;
    scrollbar-color:  #a68eae #a182a2;
  scrollbar-width: thin; 
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
 
}
.flex1{
    display: flex;
}
.machine{
    height: 150px; margin-top: -20px;
}
}
@media screen and (max-width: 1000px) {

    footer {
    background-image: url(patterns/knitting.png);
    background-size: 50%;
    height: 150px;
    display: flex;
    text-align: center;
   margin-top: 20px;
    border: #65accc 2px dashed;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}
    .top {
    width: 497px;
    height: 300px;
    margin-left: 10px;
    border-radius: 10px;
    margin-top: 20px;
  }
  .grannysqaure{
    height: 100px;
    margin-left: 10px;
}
.linha-vertical {
    position: absolute;
  height: 496px;/*Altura da linha*/
  margin-top: -240px;
  margin-left: 249px;
  rotate: calc(90deg);
  border-left: 1px #ea5d88 dashed;/* Adiciona borda esquerda na div como ser fosse uma linha.*/

}
.bottom {
    width: 497px;
    height: 1359px;
    margin-left: 10px;
    border-radius: 10px;
    margin-top: 20px;
    background-color: #5c3b5e;
}
.bottom1 {
    width: 100%;
    height: 453px;
    background-color: #f6ba71;
    border: #f98e60 1px solid;
    border-radius: 8px 8px 0 0;
    
}
.bottom2 {
    width: 100%;
    height: 453px;
    background-color: #b89eb3;
    border: #a182a2  1px solid;
    
    
}
.bottom3 {
    width: 100%;
    height: 453px;
    background-color: #86d0d9;
    border: #65accc 1px solid;
    border-radius: 0 0 8px 8px ;
    
}

.bottom1 h1{
    font-family: panic;
    color: #ef804b;
    font-weight: 100;
    font-size: 30px;
}
.bottom1p{
    font-family: rainy;
    color: #d86835;
    margin-left: 10px;
    margin-bottom: -20px;
    margin-right: 20px;
    margin-top: -10px;
}
.linha{
    color: #d86835;
}

.bottom2 h1{
    font-family: panic;
    color: #856986;
    font-weight: 100;
    font-size: 30px;
    
}
.bottom3 h1{
    font-family: panic;
    color: #65accc;
    font-weight: 100;
    font-size: 30px;
    z-index: 2;
}
.bottom3p{
    font-family: rainy;
    color: #4d8fad;
    margin-left: 10px;
    margin-bottom: -20px;
    margin-right: 20px;
    margin-top: -495px;
    max-width: 450px;
}
.bottom2-flex{
    width: 100%;
   margin-left: -1px;
    height: 353px;
    background-color: #b89eb3;
    border: #a182a2  1.1px solid;
    border-top: none;
    scrollbar-color:  #a68eae #a182a2;
  scrollbar-width: thin; 
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
 
}
.patches{
    width: 70px;
    height: 70px;
    transition: 1s ease;
}
.patches12{
    width: 70px;
    height: 70px;
    transition: 1s ease;
}
.patches2{
    width: 70px;
    height: 70px;
    transition: 1s ease;
}
.patches22{
    width: 70px;
    height: 70px;
    transition: 1s ease;
}
.buttons{
    width: 70px;
    height: 70px;
    transition: 1s ease;
}
.buttons2{
    width: 70px;
    height: 70px;
    transition: 1s ease;
}
.flex1{
    display: flex;
}
.bottom3p{
    width: 600px;
 
}
.maruqee{
    display: none;
}
.maruqeetop{
       display: none;
}
.pixel2{
  
    margin-top: -10px;
    margin-left: 470px;
}
.machine{
    height: 100px; margin-top: -20px;
}
.project{
    height: 300px;
    margin: 20px;
    margin-top: 10px;
    border: 2px solid #a182a2;
   width: 220px;
    transition: transform 0.5s ease;
   

}
.project:hover{

   transform: scale(1.05);
   position: relative;
 z-index: 1;

}
.text{
    margin-top: -7px;
  visibility: hidden;
    font-family: basic;
    text-align: center;
}
.project:hover + .text{
    position: relative;
    visibility: visible;
    font-family: basic;
    text-align: center;
    z-index: 5;
    
}
.linha-vertical2 {
    margin-left: -5px;
     margin-top: 20px;
  height: 495px;/*Altura da linha*/
  border-left: 1px #77b8d5 dashed;/* Adiciona borda esquerda na div como ser fosse uma linha.*/
  z-index: 1;

}

.grid{
    width: 200px;
    height: 100px;
    opacity: 0.8;
    border: #65accc 1px solid;
    margin-left: 20px;
    margin-top: 10px;
}
.maruqee{
position: absolute;
margin-top: -170px;
    margin-left: 550px;
    width: 450px;
    color: #77b8d5;
}
.strawberrytop{
    position: absolute;
    width: 230px;
    margin-top: -5px;
    margin-left: 5px;
    z-index: 5;
}
.strawberryleft{
    position: absolute;
    margin-top: 60px;
    margin-left: -42px;
    height: 14px;
    rotate: -90deg;
    z-index: 5;
}
.strawberryright{
    position: absolute;
    position: absolute;
    margin-top: 60px;
    margin-left: 160px;
    height: 14px;
    rotate: -270deg;
    z-index: 5;
}
.strawberrybottom{
    position: absolute;
 
    width: 230px;
    margin-top: 100px;
    margin-left: 5px;
    z-index: 5;
}
.morangos{
    position: absolute;
    width: 200px;
    margin-top: 25px;
    margin-left: 0px;
}
}


@media screen and (min-width: 1600px) {
header p{
    margin-left: 70%;
}
  .top {
    width: 1247px;
    margin-left: 10px;
    border-radius: 10px;
    margin-top: 20px;
  }
  .bottom {
    width: 1247px;
    margin-left: 10px;
    border-radius: 10px;
    margin-top: 20px;
}
.bottom1 {
    width: 100%;
    height: 343px;
    background-color: #f6ba71;
    border: #f98e60 1px solid;
    border-radius: 8px 8px 0 0;
    
}
.bottom2 {
    width: 100%;
    height: 343px;
    background-color: #b89eb3;
    border: #a182a2  1px solid;
    
    
}
.bottom3 {
    width: 100%;
    height: 343px;
    background-color: #86d0d9;
    border: #65accc 1px solid;
    border-radius: 0 0 8px 8px ;
    
}
.flex1{
    display: flex;
}
.bottom3p{
    width: 600px;
 
}
.maruqee{
    width: 690px;
}
.maruqeetop{
    width: 1040px;
}
.pixel2{
  
    margin-top: -10px;
    margin-left: 1220px;
}
.machine{
    height: 150px; margin-top: -20px;
}
}