@font-face {
    font-family: 'Aeonik';
    font-weight: normal;
    src:  url('../fonts/Aeonik-Regular.woff2') format('woff2'),
          url('../fonts/Aeonik-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    font-weight: 500;
    src:  url('../fonts/Aeonik-Medium.woff2') format('woff2'),
          url('../fonts/Aeonik-Medium.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    font-weight: bold;
    src:  url('../fonts/Aeonik-Bold.woff2') format('woff2'),
          url('../fonts/Aeonik-Bold.woff') format('woff');
    font-display: swap;
}

:root {
    --color-black: #000;
    --color-white: #fff;
    --color-lightgrey: #fafafa;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 62.5%; 
}

body {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-family: 'Aeonik', sans-serif;
}

p {
    margin: 0;
}

.app {
    margin: 5rem 1rem;
}

.app_header {
    margin-bottom: 3.3rem;
    text-align: center;
}

.app_content {
    max-width: 83rem;
    margin: 0 auto;
}

.app_number {
    text-align: end;
    font-size: 1.3rem;
    margin-bottom: .5rem;
    margin-right: 1rem;
}

.app_flights {
    background-color: var(--color-lightgrey);
    padding: 1.5rem;
    border-radius: 1rem;
}

.flyblock {
    background-color: var(--color-white);
    position: relative;
    padding: 2.6rem 1.4rem .4rem;
    border-radius: .4rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-bottom: 1.5rem;
}

.flyblock:hover {
    background-color: var(--color-lightgrey);
}

.flyblock:last-child {
    margin-bottom: 0;
}

.flyblock_date {
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 500;
    display: block;
    font-size: 1rem;
    padding: .2rem .6rem;
    border-radius: 0 0 .3rem .3rem;
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    width: fit-content;
}

.flyblock_airline {
    width: 8.2rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    margin: 1rem auto 0;
}

.flyblock_airline img {
    height: 100%;
    width: 100%;
}

.flyblock_direction {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    grid-gap: 1.2rem;
    gap: 1.2rem;
}

.flyblock_origin {
    justify-self: flex-end;
    text-wrap: nowrap;
}

.flyblock_divider {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.3rem;
}

.flyblock_icon {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8654 6.73746C14.8428 6.70583 14.2983 5.95743 13.3352 5.76042C12.4621 5.58187 10.4711 5.57176 10.3869 5.57143C10.2499 5.57095 10.1236 5.56084 10.0638 5.55313C10.006 5.50608 9.88885 5.39112 9.81152 5.29574L5.90479 0.475577C5.82039 0.37137 5.64838 0.174999 5.53907 0.099854C5.35194 -0.0292404 4.87224 0.00223038 4.81823 0.00624452L4.71197 0.0141122C4.56712 0.0248701 4.30541 0.0537718 4.18066 0.126829C4.10671 0.170021 3.88198 0.301684 4.08935 0.940734C4.08935 0.940734 5.57829 5.52792 5.58424 5.54815C5.56205 5.54944 3.44246 5.55024 3.44246 5.55024C3.30244 5.55024 3.17352 5.54045 3.11371 5.53306C3.05488 5.4881 2.93238 5.37426 2.85232 5.28017L1.47447 3.66103C1.46466 3.64963 1.23526 3.38116 1.09026 3.29301C0.896061 3.17516 0.522943 3.23537 0.519245 3.23601C0.412824 3.25592 0.262997 3.3065 0.16815 3.37458C-0.00289584 3.49757 -0.031993 3.767 0.0819843 4.17532C0.391443 5.28338 0.832884 6.92596 0.865517 7.17741C0.832884 7.42885 0.391282 9.07143 0.0819843 10.1795C0.0578706 10.266 -0.0192931 10.5607 0.00449902 10.7137C0.0533694 11.0282 0.500276 11.1153 0.519245 11.1188C0.63065 11.1397 0.782245 11.1463 0.879503 11.1347C1.11244 11.1066 1.41595 10.7623 1.47447 10.6938L2.85232 9.07449C2.94202 8.96932 3.03269 8.87827 3.07626 8.83862C3.14892 8.82352 3.31643 8.80458 3.44246 8.80458C3.44246 8.80458 5.56254 8.8049 5.58344 8.80554C5.57781 8.82705 4.08951 13.4141 4.08951 13.4141C4.04482 13.5518 3.97264 13.8043 3.99242 13.9465C4.02425 14.1752 4.26635 14.3076 4.71213 14.3407L4.81823 14.3486C4.88575 14.3535 4.98542 14.3585 5.08428 14.3585C5.18186 14.3585 5.27848 14.3537 5.34294 14.3399C5.56511 14.2921 5.87087 13.9213 5.90495 13.8792L9.81169 9.05907C9.89785 8.95278 9.98498 8.86045 10.0282 8.81871C10.1009 8.80313 10.2641 8.78386 10.3869 8.78338C10.4711 8.78306 12.4623 8.77294 13.3353 8.5944C14.2984 8.39722 14.8429 7.64899 14.8656 7.6172C15.0448 7.36639 15.0448 6.98826 14.8654 6.73746Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 1.5rem;
    height: 1.5rem;
}

.flyblock_destination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-self: flex-start;
    text-wrap: nowrap;
    gap: 1rem;
}

.flyblock_flag {
    width: 1.5rem;
    height: 1.5rem;
}

.flyblock_flag img {
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    user-select: none;
}

.flyblock_like {
    display: none;
}

.btn {
    display: block;
    margin: 0 auto;
    background-color: var(--color-lightgrey);
    padding: .8rem 2.3rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-black);
    border: none;
    border-radius: 0 0 1rem 1rem;
    cursor: pointer;
    text-decoration: none;
    width: -moz-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .flyblock {
        flex-direction: row;
        justify-content: space-between;
        padding: 2rem 3.4rem;
    }

    .flyblock_airline {
        height: 3.8rem;
        margin: 0;
        justify-content: start;
    }

    .flyblock_airline img {
        height: auto;
        width: auto;
    }

    .flyblock_divider::before {
        content: '';
        display: block;
        width: 5rem;
        height: .1rem;
        border-top: .1rem dashed var(--color-black);
    }
    
    .flyblock_divider::after {
        content: '';
        display: block;
        width: 5rem;
        height: .1rem;
        border-top: .1rem dashed var(--color-black);
    }

    .flyblock_like {
        width: 8.2rem;
        display: flex;
        justify-content: flex-end;
    }

    .flyblock_like img {
        cursor: pointer;
        user-select: none;
        transition: all .2s ease;
    }

    .flyblock_like img:hover {
        scale: 1.1;
    }

    .flyblock_like img.liked {
        filter: brightness(0);
        scale: 1.1;
    }
}