/* panel code */

body {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: repeating-linear-gradient(
        90deg,
        rgb(249, 253, 200),
        rgb(249, 253, 200) 100px,
        rgb(251, 252, 244) 100px,
        rgb(251, 252, 244) 200px
    );
    padding: 10px;
}

.body {
    padding: 10px;
    display: none;
}
#title {
    width: 15%;
    margin-right: 10px;
}
.header {
    justify-content: center;
    display: flex;
    align-items: center;
    font-family: 'Comic Neue'
}
h3{
    margin-bottom: 0px;
}
h4{
    font-family: 'Comic Neue';
    margin-bottom: 35px;
}

#page-1, #page-2 {
    position: relative;
    width: 750px;
    background-color: white;
    display: flex;
    padding-right: 80px;
    padding-bottom: 50px;
    border: black solid 3px;
    border-radius: 15px;
}
/* kitty code panel-1 */

.eyes{
    position: absolute;
    width: 1%;
}
#eye-1 {
    left: 750px;
    rotate: -90deg;
    top: 485px
}
#eye-2 {
    left: 865px;
    rotate: -90deg;
    top: 485px
}

#tuna-thought {
    position: absolute;
    
    width: 15%;
    top: 190px;
    left: 590px;
    rotate: 10deg;
    z-index: 1;

}

#chicken-thought {
    position: absolute;
    width: 13%;
    top: 220px;
    left: 410px;
    rotate: -70deg;
    z-index: 1;

}

.treats {
    cursor: pointer;
    opacity: 0;
}

#treat-thought {
    /* display: block; */
    position: absolute;
    /* text-align: center; */
    width: 8%;
    top: 130px;
    left: 520px;
    /* rotate: 10deg; */
    z-index: 1;
}
/* kitty surronding page */

#face {
    width: 600px;
}
.paws {
    position: absolute;
    width: 25%;
    z-index: 1;
}
#right-paw {
    left: -90px;
    
    rotate: -90deg;
    transform: scaleY(-1);
    transform: scaleX(-1);
    
    top: 420px
}
#left-paw {
    right: -90px;
    rotate: 90deg;
    top: 330px
}

#head-1 {
    display: block;
}

#kitty-1 {
    position: relative;
    width: 35%;
    margin-top: 10px;
    padding: 0 10px;
    display: block;
    z-index: 1000;

}
#kitty-2 {
    position: relative;
    width: 35%;
    padding: 0 10px;
    display: block;
    bottom: 39px;
    left: 4px
    
    
}



#buttons {
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
#thought-bubble-1{
    display: relative;
    position: absolute;
    width: 52%;
    /* height: 100%; */
    bottom: 745px;
    left: 315px
}
#eyes-1 {
    width:75%;
}
#eyes-1-kitty {
    position: relative;
    bottom: 541px;
    right: 221px;
    width:15%;
    cursor: default;
    z-index: 9999;


    
}
#eyes-2 {
    width:75%;
}
#eyes-2-kitty {
    position: relative;
    bottom: 542px;
    right: 221px;
    width:15%;
    cursor: default;
    z-index: 9999;


    
}
#eyes-3 {
    width:75%;
}
#eyes-3-kitty {
    position: relative;
    bottom: 410px;
    right: 200px;
    width:40%;


    
}
#eyes-4 {
    width:75%;    
}
#eyes-4-kitty {
    position: relative;
    bottom: 361px;
    right: 222px;
    width:15%;
}

.side-eye {
    opacity: 1;
    transition: opacity 3s ease-in-out;
    
}
#happy-kitty-1 {
    display: block;
    position: absolute;
    width: 18%;
    
    left: 468px;
    top: 278.5px;
    opacity: 0;
    transition: opacity 1s ease-in-out;



}
#treatbagopen {
    width: 22%;
    position: absolute;
    z-index: 1;
    left: 130px;
    bottom: 49px;
    rotate: -12deg;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    

}
#treatbagcounter { 
    width: 8%;
    position: absolute;
    z-index: 1;
    left: 305px;
    top: 487px;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
#tunacounter {
    width: 9%;
    position: absolute;
    z-index: 1;
    left: 313px;
    top: 472px;
    opacity: 0
}
#tunaempty{
    width: 25%;
    position: absolute;
    z-index: 1;
    left: 105px;
    bottom: 55px;
    opacity: 0;
    /* rotate: -5deg; */
    
    transition: opacity 1.5s ease-in-out;

}
#riptext {
    left: 345px;
    bottom: 345px;
    opacity: 0;
}

#riptuna{
    width: 20%;
    position: absolute;
    z-index: 1;
    left: 160px;
    top: 760px;
    opacity: 0
}

#ripbag {
    width: 20%;
    position: absolute;
    opacity: 1;
    bottom: 250px;
    left: 160px;
    rotate: 15deg;
    opacity: 0
}

#ripbox {
    width: 20%;
    position: absolute;
    opacity: 1;
    bottom: 246px;
    left: 160px;
    /* rotate: 15deg; */
    opacity: 0
}


#chickenbox {
    width: 7%;
    position: absolute;
    z-index: 1;
    left: 315px;
    top: 475px;
    
    rotate: 1.3deg;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    

}

#chickenboxripped {
    width: 28%;
    position: absolute;
    z-index: 1;
    left: 115px;
    bottom: 49px;
    rotate: -5deg;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

#chickenbone {
    width: 8%;
    position: absolute;
    z-index: 1;
    left: 210px;
    bottom: 64px;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.body-button {
   
    cursor: pointer;
    padding-bottom: 30px;
}

.body-button:hover {
    color: gray
}
#panel-container {
    display: flex;
    align-items: center;
    
}
#small-container {
    display: flex;
    flex-direction: column;
}
.panel {
    border-radius: 5px;
    
}
/* .panel:hover {
    background-color: rgb(241, 241, 241);

} */
#panel-1 {
    width: 656px;
    height: 300px;
    margin-top: 87px;
    border: 2px solid black;
    
    
}

#floor {

    width: 100.3%;
    position: relative;
    bottom: 70px;
    z-index: 0;
    /* clip-path: inset(0 0 32% 0); */
    right: 1.5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 6.5px;
    
}
#panel-2 {
    margin-top: 50px;
    margin-right: 50px;
    width: 300px;
    height: 600px;
    border: 2px solid black
}
#panel-3 {
    margin-top: 50px;
    width: 300px;
    height: 272px;
    border: 2px solid black;
   

    
}
#panel-4 {
    margin-top: 50px;
    width: 300px;
    height: 272px;
    border: 2px solid black;
    

}

#panel-5 {

    /* margin-left: 90px; */
    margin-top: 50px;
    width: 375px;
    height: 136px;
    border: 2px solid black;

}
#panel-6 {

    /* margin-left: 90px; */
    position: relative;
    margin-top: 50px;
    width: 420px;
    height: 400px;
    border: 2px solid black;
    margin: auto;
    margin-top: 15px;

}

#panel-10 {
    

    display: flex;

    margin-top: 50px;
    width: 270px;
    height: 312px;
    border: 2px solid black;
    margin-right: 26px
    
}

#kitty-walking {
    position: relative;
    width: 100.25%;
    height: 100.25%;
    border-radius: 3.5px;
    bottom: .5px;
    right: .5px;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;

    
    
}

#kicking-door {
    position: relative;
    width: 100%;
    height: 100.25%;
    bottom: .5px;
    border-radius: 3.5px;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;

}

#panel-11 {
    
    display: flex;
   margin-top: 50px;
   width: 300px;
   height: 312px;
   border: 2px solid black;
   margin-left: 26px

   
   
}

#angry-at-door {
    position: relative;
    width: 100%;
    height: 100.5%;
    /* top: 63px; */
    margin: auto;
    border-radius: 5px;
}

#page2panels-container {
    display: flex;

}
#kitty-satisfied {
    top: 0px;
    right: 0px;
    position: absolute;
    height: 100%;
    width: 100%;   
    opacity: 0;
    transition: opacity 3s ease-in-out;
    border-radius: 5px;

}

.mini-panel {
    height: 99px;
    border-bottom: 1px solid black;
}
#mini-panel-lg{
    height: 200px;
}
#mini-panel-bottom{
    height: 60px;
    border-bottom: none;
}

.draggable.dragging {
    opacity: .5;
}
#zzz {
    display: block;
    position: relative;
    right: 50px;
    width: 120%;
}
#wall-sneak {
    display: block;
    position: relative;
    
    right: .5px;
    width: 100.7%;
    border-top-left-radius: 1.5%;
    border-top-right-radius: 1.5%;
    bottom: 1px

}
#rip {
    display: block;
    position: relative;
    margin: auto;
    top: 2px;
    left: -4px;
    
    width: 81%;
}
#mad {
    display: block;
    position: relative;
    margin: auto;
    top: 143px;
    border-radius: 1%;
    
    width: 100%;
}
#knock {
    display: block;
    position: relative;
    margin: auto;
    /* top: 10px; */
    width: 100.5%;
    height: 100.5%;
    right: 1px;
    border-radius: 1.5%;
    transition: opacity 1.5s ease-in-out;
}




/* NAVIGATION */

#page-2-button, #page-1-button, #reset-button, #clearCanvas, #save-button, #removeOutline {
    margin: 10px;
    background-color: white;
    border-radius: 3px;
    border: solid black 1px;
}

#page-2-button:hover, #page-1-button:hover, #reset-button:hover, #clearCanvas:hover, #save-button:hover, #removeOutline:hover {
    background-color: lightgray;
    cursor: pointer;
}

/* PANEL 2 TEXT AND DROPDOWN */

#p-text {
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Comic Neue';
    right: 75px;
    bottom: 15px;
    margin: 0;
    padding: 0;
}

/* text-select-container{
    position: absolute;
} */

#text-select{
    /* display: block;
    position: relative; */
    /* right: 83px; */
    width: 25%;
    margin: auto;
    padding: 0;

}
#text-select-label{
    /* display: block;
    position: relative; */
    /* right: 195px; */
    margin: 0;
    padding: 0;

}

#drawingCanvas {
    border: 2px solid black;
    border-radius: 5px;
    background-color: #fff;
    cursor: crosshair;
    margin: 50px 0 0
}

/* tutorials */

.tutorial {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

#congrats {
    position: absolute;
    font-family: 'Comic Neue';
    font-size: large;   
    left: 217px;
    bottom: 5px;
    opacity: 0;
}
#scratchtutorial {
    top: 0;
    position: absolute;
    font-family: 'Comic Neue';
    right: 140px;

    
}

#tutorial-1 {
    position: absolute;
    left: 40px;
    top: -10px;
    font-family: 'Comic Neue';
    font-size: large;
    text-align: left;
    opacity: 1;

}

#tutorial-2 {
    
    position: absolute;
    left: 445px;
    top: -10px;
    font-family: 'Comic Neue';
    font-size: large;
    text-align: left;
}

#tutorial-3 {
    position: absolute;
    left: 15px;
    bottom: 260px;
    font-family: 'Comic Neue';
    font-size: medium;
    text-align: center;
    
}

#tutorial-4 {
    position: absolute;
    left: 50px;
    bottom: -10px;
    font-family: 'Comic Neue';
    font-size: large;
    text-align: center;
    
}
#tutorial-5 {
    position: absolute;
    right: 30px;
    top: 538px;
    font-family: 'Comic Neue';
    font-size: large;
    text-align: right;
    
}
#tutorial-6 {
    position: absolute;
    left: 70px;
    bottom: 210px;
    font-family: 'Comic Neue';
    font-size: large;
    text-align: left;
    
}

html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.kitty-outline {
    position: absolute;
    width: 100%;
    height: 100%;
    
}



#canvas-container {
  position: relative;
}

/* #kitty-outline {
    position: absolute;
    width: 300px;
    left: 270px;
    top: 454px;
    z-index: 0;
} */



#comic-output {
    font-family: 'Bangers';
    font-size: 50px;
    rotate: -25deg;
    color: #000;
    text-shadow: 2px 2px #f00, -2px -2px #ff0;
    
    max-width: 400px;
    left: 100px;
    bottom:330px;
    z-index: 1000; /* Ensure it's above any other elements */
    position: absolute; 
}

#comic-text {
    z-index: 1000; /* Ensure it's above any other elements */
    position: relative;
    bottom: 10px;
    
    /* top: 120px; */
    /* left: 80px; */
    font-family: 'Comic Neue';
    
    max-width: 120px;
    font-size: 15px;
    color: #000;
    
    
}

#comic-text-fun {
    position: absolute;
    
}

#add-text {
    z-index: 1000; /* Ensure it's above any other elements */
    position: relative;
    right: 120px;
    top: 70px;
    
}
#add-text:hover {
    cursor: pointer;
    
}
#reset-text {
    z-index: 1000; /* Ensure it's above any other elements */
    position: relative;
    right: 197px;
    top: 95px;
}

#save-button {
    margin: auto
}





#qrContainer {
    display: flex !important;
    margin-top: 80px;
    justify-content: center
    
}

.qr {
    padding: 25px;
    font-family: 'Comic Neue';
    
}

#door-scratch {
    width: 100%;
    height: 100.431%;
    border-radius: 1%;
    bottom: 1px;
    transition: opacity 1.5s ease-in-out;
}

.storyText {
    position: absolute;
    font-family: 'Comic Neue';
    font-size: large;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;

}

#text1 {
    left: 120px
}

#text2 {
    bottom: 182.5px;
    left: 150px;
    opacity: 0;
}

#text3 {
    left: 626.5px;
    bottom: 55px;
    font-size: larger;
}

#text4 {
    left: 441px;
    bottom: 313px;
}
#text5 {
    left: 138px;
    top: 75px;
    z-index: 9999;
}
#text6 {
    left: 510px;
    top: -4px;
}
#text7 {
    left: 490px;
    top: 413px;
    text-align: left;
}
#text8 {
    left: 233px;
    bottom: 370px;
    font-size: xx-large;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    z-index: 9999;

}
#text9 {
    left: 655px;
    top: 60px;
}
.comic-output {
    font-family: 'Bangers';
    font-size: 60px;
    rotate: -25deg;
    color: #000;
    text-shadow: 2px 2px #f00, -2px -2px #ff0;
    
    max-width: 400px;
  
    z-index: 1000; /* Ensure it's above any other elements */
    position: absolute; 
}

#snatch {
    font-size: 35px;
    position: absolute;
    left: 324px;
    top: 504px;
    rotate: -12deg;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.wall {

    position: relative;
    width: 99.5%;
    height: 69.2%;
    top: -374px;
    left: 0px;
    z-index: 0;
}

#credits {
    font-size: large;
    position: absolute;
    font-family: 'Comic Neue';
    bottom: -145px;
    text-align: center;
    left: 160px
}

#bulb {
    position: absolute;
    width: 4%;
    z-index: 9999;
    left: 180px;
    top: 54px;
    rotate: 15deg;
    /* opacity: 0; */
}





/* For iPad Air and similar devices (max-width: 820px) */
@media only screen and (max-width: 820px) {
    /* Styles specific to this screen size */
    
    body {
        font-size: 14px; /* Adjust the font size */
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #container {
        /* width: 100%; Make the container full width */
        padding: 20px;
        
    }

    #face {
        position: relative;
        top: 20px
    }

    

    #eyes-1, #eyes-2 {
        position: relative;
        left: 6px
    }

    /* #comic-text {
          right: 0px  
    } */

    img {
        max-width: 100%; /* Ensure images are responsive */
        height: auto;
    }

    /* Any buttons or elements that need resizing */
    /* button {
        width: 100%;
        padding: 15px;
        font-size: 1.2em;
    } */

    /* Any other adjustments to fit within 820 x 1180 */
    #yourOtherElements {
        /* Example */
        width: 100%;
        margin: 0 auto;
    }

    #tutorial-3 {
        
        left: 19px;
        
    }
}

@media only screen and (max-width: 390px) {
    /* Styles specific to this screen size */
    
    body {
        font-size: 14px; /* Adjust the font size */
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    
}