/* ---------------------------------------------- */
/* SACKBOY media queries */
/* ---------------------------------------------- */

   @media screen and (max-width: 2000px) {
        .sackboy{
          position: absolute;
          width: 20%;
          height: auto;
          z-index: 2;
          right: 5%;
          top: 5%;
          --webkit-animation: pulsate-bck 3s ease-in-out infinite both;
          animation: pulsate-bck 3s ease-in-out infinite both;
        }}
  @media screen and (max-width: 650px) {
        .sackboy{
           position: absolute;
           width: 25%;
           height: auto;
           z-index: 2;
           right: 1%;
           top: 1%;
           --webkit-animation: pulsate-bck 3s ease-in-out infinite both;
           animation: pulsate-bck 3s ease-in-out infinite both;
        }}
              /* ----------------------------------------------
           * Generated by Animista on 2025-4-1 17:16:0
           * Licensed under FreeBSD License.
           * See http://animista.net/license for more info. 
           * w: http://animista.net, t: @cssanimista
           * ---------------------------------------------- */

          @-webkit-keyframes pulsate-bck {
            0% { -webkit-transform: scale(1);     transform: scale(1);   }
            50% { -webkit-transform: scale(0.9); transform: scale(0.9);  }
            100% {-webkit-transform: scale(1);   transform: scale(1);} 
          }
          @keyframes pulsate-bck {
            0% { -webkit-transform: scale(1); transform: scale(1);}
            50% { -webkit-transform: scale(0.9);  transform: scale(0.9);}
            100% { -webkit-transform: scale(1); transform: scale(1); }
          }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/*CONTENT media queries */
/* ---------------------------------------------- */

          /* ----------------------- */
          /*------ COMPUTER ---------*/
          /* ----------------------- */
      @media screen and (max-width: 2000px) {
                .intro{
                width: 36%;
                height: auto;
                    padding: 2%;
                background-color: rgba(48, 17, 30, 0.364);
                border: 3px solid var(--borderpink);
                color: #bbffcd;
                text-shadow: 1px 1px 10px #0cff4d;
                }
                    .cathi{
                    width: 50%; 
                    height: auto; 
                    }
            .content1-right{
                width: 56%;
                height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-content: center;
            }
                    #statuscafe{
                        width: 90%;
                        height: auto;
                            padding-top: 2%;
                            padding: 2%;
                            margin-left: 2%;
                            margin-bottom: 2%;
                        background-color: var(--bgpinkdark);
                        border: 3px dashed var(--borderpink);
                    }
                    #statuscafe-header{
                        margin-left: 5%;
                        font-size: 15px;
                        color: white;
                        text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.274);;
                    }
                    #statuscafe-username{
                        width: 80%; 
                        height: auto;
                            margin-left: 5%;
                    }
                    #statuscafe-content{
                        width: 60%;
                        height: auto;
                            margin-left: 5%;
                    }
            .content1-right2{ 
                width: 100%;
                height: auto;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
            }
                .webrings {
                    width: 40%;
                    height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 2%;
                        flex-wrap: wrap;
                    background-color: var(--bgpinkdark);
                    border: 3px outset var(--borderpink);
                        font-size: 12px;
                }
                .webrings2 {
                    width: 90%;
                    height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 2%;
                        flex-wrap: wrap;
                    background-color: var(--bgpinkdark);
                    border: 3px outset var(--borderpink);
                }
                    .webrings-img{
                        width: 70%;
                        height: auto;
                        padding: 2%;
                    }
                    .webrings-divider{
                        width: 100%;
                        height: auto;
                        padding-bottom: 3%;
                    }
                    .transring{
                        width: 40%;
                        height: auto;
                        margin: 5%;
                    }
                    .noai{
                        width: 20%;
                        height: auto;
                        margin: 5%;
                    }
                    #aperturewebring{
                        margin: 5%;
                    }
                .guestbook{
                    width: 45%;
                    height: auto;
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        align-items: center;
                    background-color: var(--bgpinkdark);
                    border: 3px outset var(--borderpink);
                }
                    .guestbook-link{
                        width: 80%;
                        height: auto;
                            display: flex;
                            justify-content: center;
                            padding: 1%;
                            padding-top: 10%;
                            padding-bottom: 10%;
                        background-color: var(--bgpinkdark);
                        border: 3px dashed var(--borderpink);
                    }
                    .guestbook-img{
                        width: 80%;
                        height: auto;
                                transition: 800ms;
                    }
                            .guestbook-img:hover{
                                width: 90%;
                                    transition: 800ms;
                            }
            .gifypet{
                width: 320px;
                height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 2%;
                background-color: var(--bgpinkdark);
                border: 3px dashed var(--borderpink);
            }
            .neocitieslinks{
                width: 50%;
                height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 2%;
                background-color: var(--bgpinkdark);
                border: 3px outset var(--borderpink);
            }
                .siteheader{
                    margin-bottom: 1%;
                    margin-top: 1%;
                        font-size: 15px;
                        color: white;  
                        text-shadow: 1px 1px 10px rgba(255, 145, 220, 0.749);;
                }
                .mybutton{
                    width: 81px;
                    height: auto;
                        margin-bottom: 1%;
                }
                .linkme-txtbox{
                    width: 200px;
                    height: 25px;
                    min-width: 200px;
                    max-width: auto;
                    max-height: 100px;
                    min-height: 25px;
                    margin-bottom: 5%;
                }
                .othersites{
                    width: 100%;
                    height: auto;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: space-evenly;
                }
                .other-sites-button{
                    width: 88px;
                    height: 31px;
                }

        }
          /* ----------------------- */
          /*------ MOBILE ---------*/
          /* ----------------------- */
      @media screen and (max-width: 600px) {
                .intro{
                width: 85%;
                height: auto;
                    padding: 2%;
                    margin: 2%;
                background-color: black;
                border: 3px solid var(--borderpink);
                    font-size: 12px;
                    color: #bbffcd;
                    text-shadow: 1px 1px 10px #0cff4d;
                }
                    .cathi{
                    width: 40%; 
                    height: auto; 
                    }
            .content1-right{
                width: 100%;
                height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
            }
                    #statuscafe{
                        width: 85%;
                            padding-top: 2%;
                            margin-bottom: 2%;
                            padding: 2%;
                            margin: 2%;
                        background-color: var(--bgpinkdark);
                        border: 3px dashed var(--borderpink);
                    }
                    #statuscafe-header{
                        margin-left: 5%;
                        font-size: 14px;
                        color: white;
                        text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.274);;
                    }
                    #statuscafe-username{
                        width: 80%; 
                        height: auto;
                            margin-left: 5%;
                    }
                    #statuscafe-content{
                        width: 60%;
                        height: auto;
                            margin-left: 5%;
                    }
                .webrings {
                    width: 85%;
                    height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 2%;
                        margin: 2%;
                    background-color: var(--bgpinkdark);
                    border: 3px outset var(--borderpink);
                        font-size: 14px;
                }
                .webrings2 {
                    width: 70%;
                    height: auto;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        align-items: center;
                        padding: 5%;
                    background-color: var(--bgpinkdark);
                    border: 3px outset var(--borderpink);
                }
                    .webrings-img{
                        width: 35%;
                        height: auto;
                        padding: 2%;
                    }
                    .webrings-divider{
                        width: 100%;
                        height: auto;
                        padding-bottom: 3%;
                    }
                    .transring{
                        width: 20%;
                        padding: 2%;
                        height: auto;
                    }
                    .noai{
                        width: 10%;
                        height: auto;
                    }
                .gifypet{
                    width: 320px;
                    height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 2%;
                    border: 3px dashed var(--borderpink);
                }
        }
        @media screen and (max-width: 420px) {
                .gifypet{
                    display: none;
                }
        }