@font-face {
    font-family: 'Coolvetica';
    src: url('coolvetica.woff2') format('woff2');
}
body {
  background-color: white;
  color: #f70243;
  font-family: 'Coolvetica';
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('slike/index/1316580.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#naslov-sajta{
  color: #f7c202;
  position: absolute;
  top: 90px;
  right: 190px;
  font-size: 90px;
  text-shadow: 4px 4px 1px #9c1136;
}
.hello-kitty{
  position:relative;
  height:190px;
  left:7000px;
  top:220px;
  width:700px;
}
.hk1{
  position:absolute;
  right:650px;
  width:450px;
  transition: opacity 0.6s ease;
}
.hk2{
  position:absolute;
  right:650px;
  width:450px;
  opacity:0;
  transition: opacity 0.6s ease;
}
.hello-kitty:hover .hk1{
  position:absolute;
  right:650px;
  width:450px;
  opacity:0; 
}
.hello-kitty:hover .hk2{
  position:absolute;
  right:650px;
  width:450px;
  opacity:1; 
  filter: brightness(40%);
}
.sonikdiv{
  display:flex;
  flex-direction:column;
  position:absolute;
  left:0px;
  width:5500px;
  height:150px;
  bottom:0px;
}
.go{
  left: 1740px;
  position: sticky;
  width: 90px;
  text-shadow: 0.5px 0.5px 1px #2e0812;
  background: #6e1029;
  opacity:0;
  transition: opacity 0.6s ease;
}
.sonik{
  left: 1740px;
  position: sticky;
  width: 90px;
}
.sonikdiv:hover .go{
  left: 1740px;
  position: sticky;
  width: 90px;
  text-shadow: 0.5px 0.5px 1px #2e0812;
  background: #6e1029;
  opacity:1;
}











.menubody{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('slike/menu/orang.jpg');
    background-size: cover; 
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
}
.banneroff{
  display:none;
}
.banner{
  display: flex;
  position:absolute;
  height:50px;
  width:100%;
  top:0px;
  justify-content: space-between;
}
.oblacic{
  position:absolute;
  left:1600px; 
  height:250px;
  top:400px;
}
#ob{
  position:absolute;
  font-size:15px; 
  color:white;
  left:1620px;
  top:680px;
}
#ob1{
  position:absolute;
  font-size:25px; 
  color:white;
  left:1650px;
  top:655px;
}
#ob2{
  position:absolute;
  font-size:40px; 
  color:white;
  left:1680px;
  top:600px;
}
#ob3{
  position:absolute;
  font-size:50px;
  color:white;
  left:1700px;
  top:550px;
}
.ja{
  height:580px;
  width:250px;
  position:fixed;
  left:1300px;
  bottom:0;
}
.j{
  position: absolute;
  bottom:0px;
  height:550px;
  transition: opacity 1s ease;
}
.j1{
  position: absolute;
  bottom:0px;
  height:550px;
  opacity:0;
  transition: opacity 1s ease;
}
.ja:hover .j{
  position: absolute;
  bottom:0px;
  height:550px;
  opacity:0;
}
.ja:hover .j1{
  position: absolute;
  bottom:0px;
  height:550px;
  opacity:1;
}
.jaa{
  height:580px;
  width:250px;
  position:fixed;
  left:1300px;
  bottom:0;
}
.jaa:hover .j{
  position: absolute;
  bottom:0px;
  height:550px;
  opacity:1;
  transition: opacity 1s ease;
}
.jaa:hover .j1{
  position: absolute;
  bottom:0px;
  height:550px;
  opacity:0;
  transition: opacity 1s ease;
}
.sakriveno{
  display: none;
}

.vidljivo{
  background-image: url('slike/menu/Bookcase.png');
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 10px;
  position:absolute;
  top:90px;
  left:360px;
  height:800px;
  width:820px;
  z-index:1;
}
.bubm{
  height:120px;
  position:absolute;
  left:200px;
  top:10px;
  width:700px;
}
.bubamara{
  position:absolute;
  top:10px;
  height:80px;
  transition:opacity 1s ease;
}
.bubamaraa{
  position:absolute;
  top:0px;
  height:100px;
  opacity:0;
  transition:opacity 1s ease;
}
.bubm:hover .bubamara{
  height:80px; 
  position:absolute;
  top:10px;
  opacity:0;
  transition:opacity 1s ease;
}
.bubm:hover .bubamaraa{
  height:100px; 
  position:absolute;
  top:0px;
  opacity:1;
  transition:opacity 1s ease;
}
.bub{
  position:absolute;
  top:0px;
  padding:0px;
  margin:0px;
  left:110px;
  font-size: 60px;
  opacity:0; 
  transition:opacity 1s ease;
  color:#3234a8;
  text-shadow:0.5px 0.5px 1px #2e0812;
}
.bubm:hover .bub{
  position:absolute;
  top:0px;
  padding:0px;
  margin:0px;
  left:110px;
  font-size: 60px;
  opacity:1; 
  transition:opacity 1s ease;
  color:#3234a8;
  text-shadow:0.5px 0.5px 1px #2e0812;
}
.bagoff{
  display:none;
}
.bagon{
  height:340px;
  position:absolute;
  left:225px;
  top:175px;
  z-index:1;
}
.boxoff{
  display:none; 
}
.boxon{
  position:absolute;
  height:420px;
  width:420px;
  bottom:60px;
  left:100px;
}
.box{
  position:absolute;
  height:400px;
  transition:opacity 1s ease;
}
.box1{
  position:absolute;
  height:400px;
  opacity:0;
  transition:opacity 1s ease;
}
.boxon:hover .box{
  position:absolute;
  height:400px;
  opacity:0;
  transition:opacity 1s ease;
}
.boxon:hover .box1{
  position:absolute;
  height:400px;
  opacity:1;
  transition:opacity 1s ease;
}
#film{
  height:100px;
  position:absolute;
  left:60px;
  top:320px;
}
#kamera{
 height:170px;
 position:absolute;
 left:130px;
 top:270px;
}
#walkman{
  height:260px;
  position:absolute;
  top:190px;
  right:140px;
  z-index:1;
}
#gameboy{
  height:260px;
  position:absolute;
  right:40px;
  top:170px;
}
#snoopyker{
  height:280px;
  position:absolute;
  bottom:100px;
  left:20px;
}
#snoopykerr{
  height:280px;
  position:absolute;
  bottom:70px;
  left:20px;
  opacity:0;
}
.snoopyker-div{
  width:100%;
}
.snoopyker-div:hover #snoopyker{
  height:280px;
  position:absolute;
  bottom:100px;
  left:20px;
  opacity:0;
}
.snoopyker-div:hover #snoopykerr{
  height:280px;
  position:absolute;
  bottom:70px;
  left:20px;
  opacity:1;
}
#digi{
  height:170px;
  position:absolute;
  bottom:50px;
  left:240px;
  z-index:1;
}
#rkocka{
  height:140px;
  position:absolute;
  bottom:105px;
  left:400px;
}
#knjige{
 height:350px;
 position:absolute;
 bottom:75px;
 right:60px;
}
#boxer{
  height:220px;
  position:absolute;
  right:0px;
  bottom:165px;
}
#junkj{
  height:30px;
  position:absolute;
  top:80px;
  right:110px;  
}
#dive{
 position:absolute;
 left:300px;
 top:300px;
 height:700px;
}

















.snoopybody{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('slike/snoopy/cosak.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.keramickakutija{
  position:absolute;
  left:300px;;
  height:900px;
}
.cvcljk{
  height:210px;
  position:absolute;
  left:1200px;
  bottom:250px;
}
.jacvcljk{
  position:absolute;
  top:0px;
  height:190px;
  transition:opacity 1s ease;
}
.jacvcljko{
  position:absolute;
  top:0px;
  height:190px;
  opacity:0;
  transition:opacity 1s ease;
}
.cvcljk:hover .jacvcljk{
  height:190px; 
  position:absolute;
  top:0px;
  opacity:0;
  transition:opacity 1s ease;
}
.cvcljk:hover .jacvcljko{
  height:190px; 
  position:absolute;
  top:0px;
  opacity:1;
  transition:opacity 1s ease;
}
#upaljac{
  position:absolute;
  height:180px;
  left:500px;
  top:270px;
}
#sntntn{
  position:absolute;
  height:120px;
  left:560px;
  top:470px;
}
#pick{
  position:absolute;
  height:100px;
  left:720px;
  top:410px;
}
#ring{
  position:absolute;
  height:150px;
  left:660px;
  top:440px;
}
#kockice{
  position:absolute;
  height:150px;
  left:785px;
  top:385px;
}
#snale{
  position:absolute;
  height:150px;
  left:800px;
  top:270px;
}
#tamagoci{
  position:absolute;
  height:200px;
  left:600px;
  top:250px;
}
#bux{
  position:absolute;
  height:310px;
  left:530px;
  top:460px;
}
#poklopac{
  position:absolute;
  height:150px;
  left:590px;
  top:370px;
}










.bodybox{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('slike/box/pribl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.openbox{
 position:absolute;
 top:0px;
 height:900px;
 left:400px;
}
.boxja{
 height:250px; 
 position:absolute;
 top:50px;
 left:130px;
}





.ekspedicijebody{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('slike/ekspedicije/stars.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
}










.fridzbody{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('slike/frizider/plocice.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
}
.frizider{
  position:absolute;
  height:1800px;
  left:500px;
  padding-top:300px;
}
.jafridz{
  height:500px;
  position:absolute;
  left:600px;
  top:10px;
}
.jafr{
  height:480px; 
  position:absolute;
  transition:opacity 1s ease;
}
.jafr1{
  height:480px; 
  position:absolute;
  opacity:0;
  transition:opacity 1s ease;
}
.jafridz:hover .jafr{
  height:480px; 
  position:absolute;
  opacity:0;
  transition:opacity 1s ease;
}
.jafridz:hover .jafr1{
  height:480px; 
  position:absolute;
  opacity:1;
  transition:opacity 1s ease;
}
.saksija{
  height:600px;
  position:absolute;
  left:1250px;
  top:1550px;
}
.bubamara1{
  height:100px;
  position:absolute;
  left:250px;
  top:320px;
}
.back{
  position:absolute; 
}