body{
    background-color:rebeccapurple;
    color:white;
    margin:10px auto;
    min-width:100vw;
    min-height:100vh;
    text-align: center;
    background-image: url(Images/TikTokScreen.png);
    background-size: cover;
    background-attachment: fixed;
    font-family: "Ultrakill";
    font-size:larger;
    cursor: url(Images/Cursors/cursor.png), auto;
}

img{
    image-rendering:pixelated;
}

a {
    text-decoration: none;
    color: palevioletred;
    transition-duration: 0.06ms;
}

a:hover{
    cursor: url(Images/Cursors/cursorHover.png), auto;
    text-decoration:underline;
}

a:active{
    cursor: url(Images/Cursors/cursorclick.png), auto;
}

.goober{
    position:fixed;
    bottom:0;
    right:0;
}

.pettable:hover{
    cursor: url(Images/Cursors/PetTheCat/0000.png), auto;
    -webkit-animation: cursorPet 400ms infinite;
    animation: cursorPet 400ms infinite;
}


.textContent{
    width:fit-content;
    margin: 0 auto;
    background-color: black;
    border-radius: 30px;
}

.container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 250px);
    justify-content: space-around;
}

.logo{
    width : min(50%, 300px)
}

.button{
    border-radius: 4px;
    background-image: url(Images/Buttons/buttonPurple.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: white;
    font-size:x-large;
    border: hidden;
    transition-duration: 0.06s;
    padding: 20px;
    margin:10px;
    font-family:"Balatro";
}

.button:hover{
    background-image: url(Images/Buttons/button.png);
    cursor: url(Images/Cursors/cursorHover.png), auto;
    scale: 1.2;
    transform: rotate(-5deg)
}

.button:active{
    background-image: url(Images/Buttons/buttonPressed.png);
    scale: 0.8;
    cursor: url(Images/Cursors/cursorclick.png), auto;
}

.buttonDisabled{
    border-radius: 4px;
    background-image: url(Images/Buttons/buttonPurplePressed.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: white;
    border: hidden;
    transition-duration: 0.15s;
    padding: 20px;
    margin:10px;
    font-family:"Balatro";
    font-size: medium;
    opacity: 0.6;

}

.buttonDisabled:hover{
     cursor: url(Images/Cursors/CantInteract/0000.png) 20 20, auto;
    -webkit-animation: cursorDisabled 400ms infinite;
    animation: cursorDisabled 400ms infinite;
}

@-webkit-keyframes cursorDisabled{
    0% {cursor: url(Images/Cursors/CantInteract/0000.png) 20 32, auto;}
    10% {cursor: url(Images/Cursors/CantInteract/0001.png) 20 32, auto;}
    20% {cursor: url(Images/Cursors/CantInteract/0002.png) 20 32, auto;}
    30% {cursor: url(Images/Cursors/CantInteract/0003.png) 20 32, auto;}
    40% {cursor: url(Images/Cursors/CantInteract/0004.png) 20 32, auto;}
    50% {cursor: url(Images/Cursors/CantInteract/0005.png) 20 32, auto;}
    60% {cursor: url(Images/Cursors/CantInteract/0006.png) 20 32, auto;}
    70% {cursor: url(Images/Cursors/CantInteract/0007.png) 20 32, auto;}
    80% {cursor: url(Images/Cursors/CantInteract/0008.png) 20 32, auto;}
    90% {cursor: url(Images/Cursors/CantInteract/0009.png) 20 32, auto;}
    100% {cursor: url(Images/Cursors/CantInteract/0010.png) 20 32, auto;}
}

@keyframes cursorDisabled {
    0% {cursor: url(Images/Cursors/CantInteract/0000.png) 20 32, auto;}
    10% {cursor: url(Images/Cursors/CantInteract/0001.png) 20 32, auto;}
    20% {cursor: url(Images/Cursors/CantInteract/0002.png) 20 32, auto;}
    30% {cursor: url(Images/Cursors/CantInteract/0003.png) 20 32, auto;}
    40% {cursor: url(Images/Cursors/CantInteract/0004.png) 20 32, auto;}
    50% {cursor: url(Images/Cursors/CantInteract/0005.png) 20 32, auto;}
    60% {cursor: url(Images/Cursors/CantInteract/0006.png) 20 32, auto;}
    70% {cursor: url(Images/Cursors/CantInteract/0007.png) 20 32, auto;}
    80% {cursor: url(Images/Cursors/CantInteract/0008.png) 20 32, auto;}
    90% {cursor: url(Images/Cursors/CantInteract/0009.png) 20 32, auto;}
    100% {cursor: url(Images/Cursors/CantInteract/0010.png) 20 32, auto;}
}

@-webkit-keyframes cursorPet{
    0% {cursor: url(Images/Cursors/PetTheCat/0000.png) 32 32, auto;}
    10% {cursor: url(Images/Cursors/PetTheCat/0001.png) 32 32, auto;}
    20% {cursor: url(Images/Cursors/PetTheCat/0002.png) 32 32, auto;}
    30% {cursor: url(Images/Cursors/PetTheCat/0003.png) 32 32, auto;}
    40% {cursor: url(Images/Cursors/PetTheCat/0004.png) 32 32, auto;}
    50% {cursor: url(Images/Cursors/PetTheCat/0005.png) 32 32, auto;}
    60% {cursor: url(Images/Cursors/PetTheCat/0006.png) 32 32, auto;}
    70% {cursor: url(Images/Cursors/PetTheCat/0007.png) 32 32, auto;}
    80% {cursor: url(Images/Cursors/PetTheCat/0008.png) 32 32, auto;}
    90% {cursor: url(Images/Cursors/PetTheCat/0009.png) 32 32, auto;}
    100% {cursor: url(Images/Cursors/PetTheCat/0010.png) 32 32, auto;}
}

@keyframes cursorPet{
    0% {cursor: url(Images/Cursors/PetTheCat/0000.png) 32 32, auto;}
    10% {cursor: url(Images/Cursors/PetTheCat/0001.png) 32 32, auto;}
    20% {cursor: url(Images/Cursors/PetTheCat/0002.png) 32 32, auto;}
    30% {cursor: url(Images/Cursors/PetTheCat/0003.png) 32 32, auto;}
    40% {cursor: url(Images/Cursors/PetTheCat/0004.png) 32 32, auto;}
    50% {cursor: url(Images/Cursors/PetTheCat/0005.png) 32 32, auto;}
    60% {cursor: url(Images/Cursors/PetTheCat/0006.png) 32 32, auto;}
    70% {cursor: url(Images/Cursors/PetTheCat/0007.png) 32 32, auto;}
    80% {cursor: url(Images/Cursors/PetTheCat/0008.png) 32 32, auto;}
    90% {cursor: url(Images/Cursors/PetTheCat/0009.png) 32 32, auto;}
    100% {cursor: url(Images/Cursors/PetTheCat/0010.png) 32 32, auto;}
}

@-webkit-keyframes cursorCall{
    0% {cursor: url(Images/Cursors/CallMe/0000.png) 32 32, auto;}
    10% {cursor: url(Images/Cursors/CallMe/0001.png) 32 32, auto;}
    20% {cursor: url(Images/Cursors/CallMe/0002.png) 32 32, auto;}
    30% {cursor: url(Images/Cursors/CallMe/0003.png) 32 32, auto;}
    40% {cursor: url(Images/Cursors/CallMe/0004.png) 32 32, auto;}
    50% {cursor: url(Images/Cursors/CallMe/0005.png) 32 32, auto;}
    60% {cursor: url(Images/Cursors/CallMe/0006.png) 32 32, auto;}
    70% {cursor: url(Images/Cursors/CallMe/0007.png) 32 32, auto;}
    80% {cursor: url(Images/Cursors/CallMe/0008.png) 32 32, auto;}
    90% {cursor: url(Images/Cursors/CallMe/0009.png) 32 32, auto;}
    100% {cursor: url(Images/Cursors/CallMe/0010.png) 32 32, auto;}
}

@keyframes cursorCall{
    0% {cursor: url(Images/Cursors/CallMe/0000.png) 32 32, auto;}
    10% {cursor: url(Images/Cursors/CallMe/0001.png) 32 32, auto;}
    20% {cursor: url(Images/Cursors/CallMe/0002.png) 32 32, auto;}
    30% {cursor: url(Images/Cursors/CallMe/0003.png) 32 32, auto;}
    40% {cursor: url(Images/Cursors/CallMe/0004.png) 32 32, auto;}
    50% {cursor: url(Images/Cursors/CallMe/0005.png) 32 32, auto;}
    60% {cursor: url(Images/Cursors/CallMe/0006.png) 32 32, auto;}
    70% {cursor: url(Images/Cursors/CallMe/0007.png) 32 32, auto;}
    80% {cursor: url(Images/Cursors/CallMe/0008.png) 32 32, auto;}
    90% {cursor: url(Images/Cursors/CallMe/0009.png) 32 32, auto;}
    100% {cursor: url(Images/Cursors/CallMe/0010.png) 32 32, auto;}
}

@-webkit-keyframes twistedCafeName{
    0% {transform: translateY(-10px);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(-10px);}
}

@keyframes twistedCafeName{
    0% {transform: translateY(-10px);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(-10px);}
}

#borderimg {
    border: 30px solid transparent;
    border-image: url(Images/borderPurple.png);
    border-image-slice: 20%;
    image-rendering: pixelated;
}

#borderimg2 {
    border: 20px solid transparent;
    border-image: url(Images/borderPhone.png);
    border-image-slice: 15%;
    image-rendering: pixelated;
}

#borderimg3 {
    border: 30px solid transparent;
    border-image: url(Images/borderMaroon.png);
    border-image-slice: 15%;
    image-rendering: pixelated;
}

#borderimg4 {
    border: 30px solid transparent;
    border-image: url(Images/borderGreen.png);
    border-image-slice: 15%;
    image-rendering: pixelated;
}

#borderimgapp{
    border: 50px solid transparent;
    border-image: url(Images/borderApp.png);
    border-image-slice: 35%;
    image-rendering: pixelated;
}

@font-face {
    font-family: "Balatro";
    src: url(Fonts/m6x11.ttf);
}

@font-face {
    font-family: "Ultrakill";
    src: url(Fonts/VCR_OSD_MONO_1.001.ttf);
}