/*me trying out stuff and failing: 
cursor:url("https://i770.photobucket.com/albums/xx342/lexibeexoxo/th_2.png"), auto;*/
        /*file:///Volumes/Seagate%20Bck/KABK/Graphic%20Design%2024px25pxcoding/sketch1pxcursor/content/jasna-bitmap_11zon.png*/  
         /*cursor: url("https://i770.photobucket.com/albums/xx342/lexibeexoxo/th_cursor17.png"), auto;*/
body{
    background-color: pink;
    background-image:url("../../content/images/4c2a2fdc78543b609b6fcd3ab772bd96.jpg");
    padding: 2.5rem;
    height:auto;
    cursor: url("../../content/images/tumblr_lx6zl395Zv1ql6slc.gif"), auto;
}

h1{
    background-color: pink;
    top: 0;
    right: 1;
    width: 20%;
    height: auto;
    padding: 0.5rem;
    position: fixed;
}

p{
    font-size: large;
}

.box{
    overflow: hidden;
    position: relative;
    float: left;
    clear:right;
    height: 12em;
    width: 12em;
}

.box1{
    cursor: url("../../content/images/tumblr_lyx36wff051qb1380.gif"), auto;
}

.box3{
    cursor: url("../../content/images/d1wfz08-4e724701-133f-42d9-91a0-0efcc73a0ddf.png"), auto;
    height: 15rem;
    width: 11em;
}



.box7{
    cursor: url("../../content/images/tumblr_lt8rj000331qf290m.gif"), auto;
}

.box9{
    cursor: url("../../content/images/d1n1dx3-b3cb4f55-0449-43a3-a296-dbe31144a3c2.gif"), auto;
    height: 22rem;
    width: 15em;
}

.box2{
    cursor:url("../../content/images/d2qc6uq-9c9d418f-43d2-4142-90b9-507ba5ebae65.png"), auto;
    height: 8rem;
    width: 20em;
}

.box4{
    cursor:url("../../content/images/tumblr_lx6zl395Zv1ql6slc.gif"), auto;
    height: 20rem;
    width: 8em;
}

.box5{
    cursor: url("../../content/images/tumblr_lufn8aoG6c1qapbyt.png"), auto;
}

.box6{
    cursor:url("../../content/images/tumblr_lt8rlhq4h91qf290m.gif"), auto;
}

.box8{
    cursor:url("../../content/images/tumblr_lt8rlhq4h91qf290m.gif"), auto;
    height: 25rem;
    width: 3em;
}

.box10{
    cursor:url("../../content/images/tumblr_lufn3iisVH1qapbyt.png"), auto;
    height: 8rem;
    width: 20em;
}


.box11{
    cursor:url("../../content/images/tumblr_lx6zl395Zv1ql6slc.gif"), auto;
    height: 8rem;
    width: 20em;
}

.box12{
    cursor:url("../../content/images/tumblr_lt8rjikWED1qf290m.gif"), auto;
}

.box13{
    cursor:url("../../content/images/popcorn_ii_by_blushing.gif"), auto;
}
.box14{
    cursor:url("../../content/images/popcorn_ii_by_blushing.gif"), auto;
}

.box15{
    cursor:url("../../content/images/pixel___tofu_cutie_by_firstfear.gif"), auto;
}

.box16{
    cursor:url("../../content/images/tumblr_lx6zl395Zv1ql6slc.gif"), auto;
}

.box17{
    cursor:url("../../content/dya7sn-79f766ec-4eea-46a4-ba17-82c2bab5814d.png"), auto;
    height: 8rem;
    width: 20em;
}

.box18{
    cursor:url("../../content/images/tumblr_lfhui3j4rh1qzvcyt.gif"), auto;
    /*cat*/
    height: 20rem;
    width:20rem;
    position: relative;
    outline: none;
    z-index: 1;
}

.box18:hover{
    /*cursor:url("https://64.media.tumblr.com/tumblr_lfhui3j4rh1qzvcyt.gif"), auto;
    cat
    cursor: grab;*/
    height: 80rem;
    width: 10rem;
    background-color: aliceblue;
}

.container{
    position: absolute;
    padding: 2rem;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    text-align: center;
    background-color: aliceblue;
    z-index: 2;
    opacity: 0;
    /*display: none;*/
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    border: 5px solid pink;
    border-style: dotted;
}
.box18:hover ~ .container, 
.box18:focus ~ .container{
    opacity: 1;
    visibility: visible;
     transition: opacity 0.3s ease, visibility 0s linear 0s;
    /*display: block;*/
}

/*.box18:focus-visible ~ .container {
    outline: none;
}*/

.video{
    position: absolute; /* Position video within the container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    /*opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    border: 2px solid blue;*/
}

/*.box18:hover ~ .container:hover ~ .video, 
.container:focus-visible ~ .video{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}*/


.background{
    z-index: -1;
    width: 100%;
    height:100%;
    position: fixed;
}