/* Pet contest style version 1.0 */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --brutal-blue:              #38dbff;
    --brutal-orange:            #ffb443;
    --brutal-orange-background: #f5ad41;
    --brutal-red:               #ff5d5d;
    --brutal-yellow:            #fff503;
    --brutal-green:             #00ff75;
    --brutal-purple:            #f49dff;
    --brutal-black:             #000000;
    --brutal-white:             #ffffff;
    --brutal-grey:              #f2f2f2;
}

body {
    margin: 0px;
    height: 100vh;
    padding: 0px;
    content: "";
    clear: both;
    box-sizing: border-box;
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: var(--brutal-black);
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100% - 100px);
    background-color: var(--brutal-orange);
}
.footer {
    min-height: 100px;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 4px solid var(--brutal-black);
}

.bg-container-pet {
    background-image: url('../img/2024/art-fair/shapes.jpg');
    background-position: bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 4px solid var(--brutal-black);
}

.striped-bg {
    background: repeating-linear-gradient(
                135deg,
                var(--brutal-orange),
                var(--brutal-orange) 10px,
                #f5ad41 10px,
                #f5ad41 20px
                );
}

.text-outlined {
    text-shadow: rgb(0 0 0) 4px 0px 0px, rgb(0 0 0) 3.87565px 0.989616px 0px, rgb(0 0 0) 3.51033px 1.9177px 0px, rgb(0 0 0) 2.92676px 2.72656px 0px, rgb(0 0 0) 2.16121px 3.36588px 0px, rgb(0 0 0) 1.26129px 3.79594px 0px, rgb(0 0 0) 0.282949px 3.98998px 0px, rgb(0 0 0) -0.712984px 3.93594px 0px, rgb(0 0 0) -1.66459px 3.63719px 0px, rgb(0 0 0) -2.51269px 3.11229px 0px, rgb(0 0 0) -3.20457px 2.39389px 0px, rgb(0 0 0) -3.69721px 1.52664px 0px, rgb(0 0 0) -3.95997px 0.56448px 0px, rgb(0 0 0) -3.97652px -0.432781px 0px, rgb(0 0 0) -3.74583px -1.40313px 0px, rgb(0 0 0) -3.28224px -2.28625px 0px, rgb(0 0 0) -2.61457px -3.02721px 0px, rgb(0 0 0) -1.78435px -3.57996px 0px, rgb(0 0 0) -0.843183px -3.91012px 0px, rgb(0 0 0) 0.150409px -3.99717px 0px, rgb(0 0 0) 1.13465px -3.8357px 0px, rgb(0 0 0) 2.04834px -3.43574px 0px, rgb(0 0 0) 2.83468px -2.82216px 0px, rgb(0 0 0) 3.44477px -2.03312px 0px, rgb(0 0 0) 3.84068px -1.11766px 0px, rgb(0 0 0) 3.9978px -0.132717px 0px;
}

.text-brutal-blue   {
    color: var(--brutal-blue) !important;
}
.text-brutal-orange {
    color: var(--brutal-orange) !important;
}
.text-brutal-red    {
    color: var(--brutal-red) !important;
}
.text-brutal-yellow {
    color: var(--brutal-yellow) !important;
}
.text-brutal-green  {
    color: var(--brutal-green) !important;
}
.text-brutal-purple {
    color: var(--brutal-purple) !important;
}
.text-brutal-black  {
    color: var(--brutal-black) !important;
}
.text-brutal-white  {
    color: var(--brutal-white) !important;
}

.btn:focus, .btn:active {
    outline: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.brutal-btn {
    border-radius: 8px;
    border: 2px solid var(--brutal-black);
    border-bottom: 4px solid var(--brutal-black);
    border-right: 4px solid var(--brutal-black);
    padding-bottom: 8px;
    font-weight: 800;
    transition: 0.08s;
}

.brutal-btn:hover {
    background-color: var(--brutal-grey);
    border: 2px solid var(--brutal-black);
    border-top: 4px solid var(--brutal-black);
    border-left: 4px solid var(--brutal-black);
    line-height: 34px;
}

.brutal-btn-sm {
    border-radius: 8px;
    border: 1px solid var(--brutal-black);
    border-bottom: 2px solid var(--brutal-black);
    border-right: 2px solid var(--brutal-black);
    padding-bottom: 4px;
    font-weight: 800;
    transition: 0.08s;
}

.brutal-btn-sm:hover {
    background-color: var(--brutal-grey);
    border: 1px solid var(--brutal-black);
    border-top: 2px solid var(--brutal-black);
    border-left: 2px solid var(--brutal-black);
    line-height: 22px;
}

.bg-brutal-blue   {
    background-color: var(--brutal-blue) !important;
}
.bg-brutal-orange {
    background-color: var(--brutal-orange) !important;
}
.bg-brutal-red    {
    background-color: var(--brutal-red) !important;
}
.bg-brutal-yellow {
    background-color: var(--brutal-yellow) !important;
}
.bg-brutal-green  {
    background-color: var(--brutal-green) !important;
}
.bg-brutal-purple {
    background-color: var(--brutal-purple) !important;
}
.bg-brutal-black  {
    background-color: var(--brutal-black) !important;
}
.bg-brutal-white  {
    background-color: var(--brutal-white) !important;
}

.brutal-card {
    position: relative;
    border-radius: 16px;
    border: 4px solid var(--brutal-black);
    background-color: var(--brutal-white);
    padding: 32px;
}

.brutal-card .brutal-card-header {
    position: absolute;
    background-color: var(--brutal-yellow);
    border-radius: 8px;
    border: 4px solid var(--brutal-black);
    top: -27px;
    left: 19px;
    padding: 8px;
    font-size: 32px;
}

.brutal-card .brutal-card-body {
    font-size: 24px;
    margin-top: 20px;
}

.brutal-card-small {
    margin: 0 auto;
    width: 650px;
}

.brutal-card-input {
    position: relative;
    border-radius: 16px;
    border: 2px solid var(--brutal-black);
    border-bottom: 3px solid var(--brutal-black);
    border-right: 3px solid var(--brutal-black);
    background-color: var(--brutal-white);
    padding: 32px;
}

.brutal-card-input label {
    position: absolute;
    background-color: var(--brutal-white);
    border-radius: 8px;
    border: 2px solid var(--brutal-black);
    top: -27px;
    left: 19px;
    padding: 8px;
    font-size: 18px;
}

.brutal-card-input input {
    font-size: 24px;
    margin-top: 20px;
    border: none;
    border-bottom: 2px solid var(--brutal-black);
    outline: none;
    box-shadow: none;
    width: 100%;
}

.brutal-card-input small {
    margin-top: 5px;
}

.brutal-table {
    background-color: var(--brutal-white);
    border-left: 4px solid var(--brutal-black);
    border-right: 4px solid var(--brutal-black);
    padding: 16px;
}

.brutal-table th {
    background-color: var(--brutal-purple);
    border-bottom: 4px solid var(--brutal-black);
    font-size: 24px;
}

.brutal-border {
    border-radius: 8px;
    border: 4px solid var(--brutal-black);
    border-bottom: 6px solid var(--brutal-black);
    border-right: 6px solid var(--brutal-black);
}

.header-row {
    background-color: var(--brutal-yellow);
    border-top: 4px solid var(--brutal-black);
    border-bottom: 4px solid var(--brutal-black);
    padding: 24px;
}

.header-row-bottom {
    background-color: var(--brutal-yellow);
    border-bottom: 4px solid var(--brutal-black);
    padding: 24px;
}

.header-row .header-text, .header-row-bottom .header-text {
    font-size: 32px;
    padding-top: 4px;
}

.image-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the gap between items as needed */
}

.image-container {
    flex: 1 1 calc(33.333% - 10px); /* 3 columns layout */
    box-sizing: border-box;
}

.image-container img {
    width: 100%;
    height: auto;
}

.faq-question {
    width: 50%;
    height: 75px;
    font-size: 18px;
}

.faq-answer {
    width: 50%;
    border-radius: 0px 0px 8px 8px;
    border-left: 4px solid var(--brutal-black);
    border-right: 4px solid var(--brutal-black);
    border-bottom: 4px solid var(--brutal-black);
    background-color: var(--brutal-white);
    padding-top: 16px;
    padding-bottom: 12px;
    margin-top: -4px;
    margin-left: auto;
    margin-right: auto;
}
.exhibitor-rules-text {
    font-size: 18px;
}

.bg-envelope {
    position: relative;
}

.bg-envelope img {
    position: relative;
    z-index: 1;
}

.bg-envelope .bi {
    position: absolute;
    font-size: 194px;
    color: var(--brutal-black);
    opacity: 0.1;
    top: -80px;
    right: 93px;
    rotate: 45deg;
    z-index: 0;
}

table tr {
    border: none;
    color: rgb(47, 47, 47);
}

table tr td {
    border: none;
}

.schedule-table .header-text {
    border-top: 4px solid var(--brutal-black);
    border-bottom: 4px solid var(--brutal-black);
    padding: 12px;
    font-size: 16px;
    height: 55px;
}
.schedule-table .header-text:before {
    content: '';
    padding-top: 8px;
}
.schedule-table .header-text:after {
    content: '';
    padding-bottom: 8px;
}

.schedule-table tr td {
    font-size: 14px;
    padding-left: 32px;
    height: 80px;
    align-content: center;
    /* text-shadow: 0px 4px 2px rgba(0,0,0,0.6); */
}

.schedule-table td.time-schedule {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}


@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .image-container {
        flex: 1 1 calc(100% - 10px);
    }
}
@media (min-width:641px)  {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .image-container {
        flex: 1 1 calc(50% - 10px);
    }
}
@media (min-width:961px)  {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .image-container {
        flex: 1 1 calc(33.333% - 10px);
    }
}

@keyframes dropAnimation {
    0% {
        transform: rotate(20deg) scale(1.5);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}