*,
*::before,
*::after {
  box-sizing: border-box;
}

:root{
    --bkg-colour: ivory;
    --c1: #faaa92;
    --c2: #f0b342;
    --c3: #71c5af;
    --c4: #84c4e9;
    font-family: 'Aleo', Georgia, 'Times New Roman', Times, serif;
}

.new-result::after {
    content:'Latest!';
    border-radius: 50%;
    background-color: var(--c1);
    border: 1px solid black;
    padding: 2px 5px;
    position:absolute;
    rotate:-20deg;
    top:-1rem;
    left:0px;
}
body {
    font-weight: 500;
    font-size: large;
    background-color: var(--bkg-colour);
}

.new-result {
    position:relative;
}

.race {
    display:flex;
    flex-direction:column;
    width: calc(100% - 2rem);
    margin: 0.1rem 0;
}

@media (min-width: 600px){
    .race {
        min-width: 13rem;
        max-width: fit-content;
        width: none;
    }
}

.result:nth-child(odd) {
    --even-row-color: var(--c1);
    --odd-row-color: white;
}
.result:nth-child(even) {
    --even-row-color: white;
    --odd-row-color: var(--c2);
}
.berth:nth-child(odd) {
    --even-row-color: var(--c3);
    --odd-row-color: white;
}
.berth:nth-child(even) {
    --even-row-color: white;
    --odd-row-color: var(--c4);
}

.category-name {
    width:calc(100% - 2rem);
    border-bottom: 1px solid #888;
    padding-bottom: 1rem;
    word-break: keep-all;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:0.3rem;
}

.category-name>:not(:last-child)::after{
    content:' ';
    flex-grow: 1;
}

.filters{
    position: sticky;
    top:0;
    display: flex;
    flex-direction: column;
    z-index: 1;
    gap:5px;
    background-color: var(--bkg-colour);
}

.selects{
    display:flex;
    flex-direction: row;
    gap:1rem;
    justify-content: space-between;
    text-align: center;
}

.footer {
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:0.5rem;
}

select {
    width:30%;
}

@media (min-width: 600px){
    select {
        font-size: 1.5rem;
    }
}

.time{
    margin:auto;
}

#search {
    width:100%;
    font-size: 1.6rem;
    border-radius: 5px;
    font-family: 'Aleo', Georgia, 'Times New Roman', Times, serif;
}

.category {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin:1rem;
    justify-content: center;
}

table {
    border:1px solid #888;
    border-collapse: collapse;
}

th {
    background-color: black;
    color:white;
    display:none;
}

td{
    padding: 0.2rem 0.5rem;
}

th:nth-child(odd) {
    text-align:right;
    padding-right: 0.5rem;
}

th:nth-child(even) {
    text-align:left;
    padding-left: 0.5rem;
}

tr:nth-child(even) {
    background-color: var(--even-row-color);
    --seperator-colour: var(--odd-row-color);
}

tr:nth-child(odd) {
    background-color: var(--odd-row-color);
    --seperator-colour: var(--even-row-color);
}

td:nth-child(odd) {
    text-align: right;
    font-weight: bold;
    width:1rem;
    border-right: 1px dotted var(--seperator-colour);
}

td:nth-child(even) {
    text-align: left;
}

h2 {
    width: fit-content;
    text-align: center;
}

h3 {
    margin:0 auto 0.1rem auto;
}

.radiogroup.tabs{
    display:flex;
    flex-direction: row;
    margin: 0.5rem 0 0 0;
}

.tabs input[type="radio"] {
    display:none;
}

.tabs label {
    padding: 0.5rem 1rem;
    border: 1px solid black;
    border-left:none;
    border-radius: 5px 5px 0 0;
    background-color: #eee;
    cursor: pointer;
    width:33.3%;
    text-align: center;
}
.tabs label:nth-child(1){
    border-left: 1px solid black;
}

.tabs  label.berth{
    background-color: var(--c4);
}

.tabs  label.result{
    background-color: var(--c2);
}

.tabs label:has(input[type="radio"]:checked) {
    background-color: var(--bkg-colour);
    border-bottom: none;
}

.feed {
    display:flex;
    flex-direction: column;
    border:1px solid black;
    border-radius: 0px 0px 5px 5px;
    border-top: none;
    z-index: 0;
    min-height: 75dvh;
    text-align: center;
    vertical-align: middle;
    transition: transform 0.3s ease-out;
}

.feed-wrapper{
    overflow: clip;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.swiping-right {
    transform: translateX(50%);
}

.swiping-left {
    transform: translateX(-50%);
}

.complete-swipe-left {
    transform: translateX(-100%);
}

.complete-swipe-right {
    transform: translateX(100%);
}
.fade-in {
    opacity: 0;
    animation: fade-in 0.3s ease-out forwards;
    transition: transform 0.01s ease-out;
}