:root {
    --orange: #F68B1F;
    --black: #000000;
    --white: #ffffff;
}

body {
    font-size: 1.45rem;
}

.tig-welcome {
    font-size: 3.2rem;
}

.main-content h1 {
    font-size: 2.6rem;
}

.main-content h2 {
    font-size: 2.2rem;
}

.main-content h3 {
    font-size: 1.8rem;
}

.main-content a {
    cursor: pointer;
    color: var(--orange);
    transition: 600ms;
}

.main-content a:hover {
    cursor: pointer;
    color: #A35C14;
}

body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--white);
    color: var(--black);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, .tig-welcome {
    font-family: 'Saira', sans-serif;
    font-weight: 600 !important;
    font-style: normal;
}

header {
    background-color: var(--white);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--orange);
}

header img {
    height: 90px;
}

main {
    flex: 1;
    padding: 2rem;
}

footer {
    background-color: var(--black);
    color: var(--white);
    text-align: center;
    padding: 1rem;
}

.scratch-bg {
    background-image: url('data:image/svg+xml;utf8,<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 C50 90, 90 10, 130 90 S 210 10, 250 90" stroke="orange" stroke-width="10" fill="none" stroke-linecap="round"/><path d="M50 20 C90 100, 130 20, 170 100 S 250 20, 290 100" stroke="orange" stroke-width="10" fill="none" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-black {
    background-image: url('./tiger-claws-black_small.jpg');
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: top 5% right 10%;">
}

.shadow-dance-text {
    font-size: 4rem;
    color: #fff;
    text-shadow: 2px 2px 0 #333, 5px 5px 0 #8E430D;
    animation: shadow-dance 10s infinite;
}

.big-num {
    font-size: 3rem;
}

.mask-image-scratch {
    -webkit-mask-image: url('./mask_small.png');
    mask-image: url('./mask_small.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/*.orange-background {*/
/*    background-color: orange;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    padding: 2rem;*/
/*    color: white;*/
/*}*/

/*.orange-background::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: -50%;*/
/*    left: -50%;*/
/*    width: 200%;*/
/*    height: 200%;*/
/*    background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, transparent 60%);*/
/*    transform: rotate(25deg);*/
/*    animation: glare 4s infinite;*/
/*}*/

/*@keyframes glare {*/
/*    0% { transform: translateX(-100%) rotate(25deg); }*/
/*    100% { transform: translateX(100%) rotate(25deg); }*/
/*}*/

/*@keyframes shadow-dance {*/
/*    0%, 100% {*/
/*        text-shadow: 2px 2px 0 #333, 5px 5px 0 #8E430D;*/
/*    }*/
/*    50% {*/
/*        text-shadow: -2px -2px 0 #333, -5px -5px 0 #8E430D;*/
/*    }*/
/*}*/

/*.orange-background {*/
/*    background-color: orange;*/
/*    background-image: url("data:image/svg+xml,%3Csvg width='40' height='35' viewBox='0 0 86 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43 0L86 25V75L43 100L0 75V25L43 0Z' fill='white' fill-opacity='0.05'/%3E%3C/svg%3E");*/
/*    background-size: 40px 35px;*/
/*    padding: 2rem;*/
/*}*/

.orange-background {
    background-image: url("./tiger_pattern_opacity_10.png");
    background-repeat: repeat;
}

.images-box img {
    max-height: 160px;
}