@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');

/* Lucky Charms Moon - From Cursors-4U.com */
/* Lucky Charms Clover - From Cursors-4U.com */
* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/lucky-charms-clover-04406806-css.webp') 0 0, auto !important;
}



@font-face {
    font-family: 'basic';
    src: url(/fonts/basiic.ttf);
}

@font-face {
    font-family: 'web';
    src: url(/fonts/000webfont.ttf);
}



@font-face {
    font-family: 'virale';
    src: url(/fonts/virale.ttf);
}
html{
     scrollbar-color: rgb(75, 153, 165) #542e24  ;
}
body{
    background-color: #E7E0CE;
}
header {
    width: 100%;
    height: 100px;
    background-image: url('patterns/sixty.png');

    background-size: 40%;
    display: flex;
    border: #ff8000 2px dashed;
    border-radius: 10px;

}

header p {
    font-family: "basic", sans-serif;
    align-content: end;
    margin-left: 70%;
}
footer {
    background-image: url(patterns/circles.png);
    background-size: 100%;
    height: 150px;
    display: flex;
    text-align: center;
    margin-top: 220px;
    border: #b96619 5px solid;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}

footer p {

    font-family: basic;
    color: #5f2a07;
    font-size: 30px;
}

.main-content{
     width: 1300px;
    height: 1400px;
    background-color: #642A1B;
    border-right: #642A1B solid 2px;
    margin-top: 20px;
    border-radius: 20px;
}
.top-content{
     width: 680px;
    height: 680px;

    background-color: #9fd47a;
    margin-top: 20px;
margin-left: 40px;
    border-radius: 20px;
}
.bottom-content{
     width: 680px;
    height: 680px;

    background-color: #ff9148;
    margin-top: 40px;
    margin-left: 40px;
    border-radius: 20px;
}
#titulo{
    background-color: rgb(99, 216, 119);
    padding: 10px;
    font-family: basic;
    margin: 0%;
    width: 1280px;
    border-left: #391219 solid 1px;
  border-right: #391219 solid 1px;
   border-bottom: 1px solid rgb(71, 175, 89);
  border-top: 1px solid rgb(71, 175, 89);
    text-align: center;
    font-size: 20px;
    
}
/* ------------Main content------------- */
.main-top{
 
  width: 100%;
  height: 446px;
  background-color: #DB9126;
  scrollbar-color:  rgb(17, 161, 106) rgb(145, 62, 24);
  scrollbar-width: thin; 
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
   border-left: #391219 solid 1px;
  border-right: #391219 solid 1px;
}
.main-center{
 
width: 100%;
  height: 446px;
  background-color: #DB9126;
  scrollbar-color:  rgb(17, 161, 106) rgb(145, 62, 24);
  scrollbar-width: thin; 
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  border-left: #391219 solid 1px;
  border-right: #391219 solid 1px;
}
.main-bottom{
 
width: 100%;
  height: 446px;
  background-color: #DB9126;
  scrollbar-color:  rgb(17, 161, 106) rgb(145, 62, 24);
  scrollbar-width: thin; 
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  border-left: #391219 solid 1px;
  border-right: #391219 solid 1px;
  border-bottom: #391219 solid 1px;
}
.main-content ul {
    display: flex;
    list-style: none;
    justify-content: center;
}

li {
    margin-left: 35px;
    margin-top: 10px;
     font-family: "Cormorant Upright", serif;
    font-weight: 400;
    font-size: 35px;
}

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

li a:hover {
    color: rgb(236, 202, 117);
}
/* ---------movies--------- */
.movie{
    height: 350px;
    margin: 20px;
    margin-top: 25px;
    border: 2px solid #DF6228;
    box-shadow: 10px 10px #DF6228;
    transition: transform 0.5s ease;
   

}
.movie:hover{
  box-shadow: 15px 15px #c7541e;
   transform: scale(1.1);
   position: relative;
 z-index: 1;

}
.text{
    margin-top: 10px;
  visibility: hidden;
    font-family: basic;
    text-align: center;
}
.movie:hover + .text{
    position: relative;
    visibility: visible;
    font-family: basic;
    text-align: center;
    z-index: 5;
    
}

.text-oscars{
    margin-top: 10px;
  visibility: hidden;
    font-family: basic;
    text-align: center;
}
.movie:hover + .text-oscars{
    position: relative;
    visibility: visible;
    font-family: basic;
    text-align: center;
    z-index: 5;
    
}

/* ---------------------top side content---------------- */
.box01{
background-image:url(patterns/sixty2.jpg);
box-shadow:0 1px 3px #000; /* 影 */
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:20px;
width:80% /* 幅 */
}
.box-inner{
background:url(images-movies/back02.gif);
box-shadow:0 1px 3px #000; /* 影 */
padding:20px;
color: #5f2a07;
font-family: basic;
}

.box02{
background-image:url(https://i.pinimg.com/736x/99/28/e1/9928e12a39891797024190823e995a40.jpg);
box-shadow:0 1px 3px #000; /* 影 */
box-sizing:border-box;
margin-left: 100px;
padding:20px;
width:80% /* 幅 */
}
.box-inner2{
background:url(images-movies/back02.gif);
box-shadow:0 1px 3px #000; /* 影 */
padding:20px;
color: #5f2a07;
font-family: basic;
}

/* ----------------------------STICKERS----------------- */
.stickers-topcontent{
    position: relative;
    inset: 0;
    height: 0;

}
.stickers-bottomcontent{
    position: relative;
    inset: 0;
    height: 0;

}
.stickers-menu{
    position: relative;
    inset: 0;
    height: 0;

}
.sofa{
    position: absolute;
    top: -50px;
    height: 450px;
    margin-left: -10px;
}
.jeannie{
    position: absolute;
    top: -291px;
    margin-left: 520px;
}
.mesa{
     position: absolute;
    top: 60px;
    margin-left: 407px;
}
.tableclock{
     position: absolute;
    top: 170px;
    margin-left: 590px;
}

.spacecraft{
    position: absolute;
    top: -75px;
    margin-left: 30px;
}
.yellowclock{
    position: absolute;
    top: 20px;
    margin-left: 10px;
    z-index: 2;
}
.orangelamp{
    position: absolute;
    top: 25px;
    margin-left: 300px;
    z-index: 1;
}
.walldecor{
    position: absolute;
    top: -30px;
    margin-left: 20px;
    z-index: 1;
}

.eggchair{
    position: absolute;
    top: 230px;
    margin-left: 70px;
    z-index: 1;
}
.phone{
    position: absolute;
    top: 340px;
    margin-left: 20px;
    z-index: 3;
}
.groundlamp{
    position: absolute;
    top: 230px;
    margin-left: -60px;
    z-index: 1;
}
.recordplayer{
    position: absolute;
    top: 380px;
    margin-left: 300px;
    z-index: 2;
}
.orangelamps{
    position: absolute;
    top: 40px;
    margin-left: 100px;
    z-index: 1;
}
.blueclock{
    position: absolute;
    top: -130px;
    margin-left: 10px;
    z-index: 1;
}
.comoda{
    position: absolute;
    top: 280px;
    margin-left: 450px;
    z-index: 2;
}
.plant{
    position: absolute;
    top: 240px;
    margin-left: 500px;
    z-index: 3;
}
.tv{
    position: absolute;
    top: 153px;
    margin-left: 440px;
    z-index: 1;
}
.planetlamp{
    position: absolute;
    top: 210px;
    margin-left: 540px;
    z-index: 1;
}

.mirror{
    position: absolute;
    top: 10px;
    margin-left: 430px;
    z-index: 1;
}
.eggcat{
    position: absolute;
    top: 180px;
    margin-left: -10px;
    z-index: 1;
}
.chaircat{
    position: absolute;
    top: -20px;
    margin-left: 10px;
    z-index: 1;
}
.tvcat{
    position: absolute;
    top: 80px;
    margin-left: 10px;
    z-index: 1;
}
.carpet{
    position: absolute;
    top: 350px;
    margin-left: 450px;
    z-index: 1;
}
.lavalamp{
    position: absolute;
    top: -90px;
    margin-left: 1140px;
    z-index: 1;
}
.orangebookcase{
     position: absolute;
    top: 200px;
    margin-left: 220px;
    z-index: 1;
}