@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('./fonts.css');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Jakarta', sans-serif;
}

.cape-image {  
    image-rendering: pixelated;
    user-drag: none;  
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
 }

.mc-button{
    position: relative;
    box-shadow: inset 0 4px #6bc349, inset 0 -4px #166534, 0 4px rgb(0 0 0 / 1%);
    color: #fff;
    text-shadow: 0 1px 0 #2a631c;
}

.mc-button::before{
    content: "";
    position: absolute;
    left: 0;
    background: #166534;
    height: 100%;
    width: 5px;
    border-bottom: 5px solid #111827;
    border-top: 5px solid #111827;
}

.mc-button::after{
    content: "";
    position: absolute;
    right: 0;
    background: #166534;
    height: 100%;
    width: 5px;
    border-bottom: 6px solid #111827;
    border-top: 6px solid #111827;
}

.mc-button-secondary{
    position: relative;
    box-shadow: inset 0 4px #538aff, inset 0 -4px #163365, 0 4px rgb(0 0 0 / 1%);
    color: #fff;
    text-shadow: 0 1px 0 #2a631c;
}

.mc-button-secondary::before{
    content: "";
    position: absolute;
    left: 0;
    background: #1e40af;
    height: 100%;
    width: 5px;
    border-bottom: 5px solid #111827;
    border-top: 5px solid #111827;
}

.mc-button-secondary::after{
    content: "";
    position: absolute;
    right: 0;
    background: #1e40af;
    height: 100%;
    width: 5px;
    border-bottom: 6px solid #111827;
    border-top: 6px solid #111827;
}

.uuid-text {
    font-size: clamp(18px, 2.5vw, 22px);
}

.sibling-tooltip:hover + span {
    opacity: 1 !important;
}

.mc-error{
    box-shadow: inset 0 4px #fba0a0, inset 0 -4px #bb3c3c, 0 4px rgb(0 0 0 / 1%);
    color: #fff;
}