:root {
    --black: #000000;
    --white: #FFFFFF;
    --q-red: #E30011;
    --q-pink: #FC3544;
    --q-yellow: #FFBE00;
    --joe-pink: #D92884;
    --joe-cyan: #0082DC;
    --joe-blue: #074DA3;
    --circle-size: 95%;
    --circle-size--md: 45%;
    --circle-size--lg: 60%;
    --circle-size--xl: 65%;
    --circle-size--xxl: 70%;
}


@font-face {
    src: url("../fonts/sippinsummer-webfont.woff2") format("woff2"),
        url("../fonts/sippinsummer-webfont.woff") format("woff");
    font-family: "Sippinsummer";
}
@font-face {
    src: url("../fonts/geomanist-medium-webfont.eot") format("eot"), 
    url("../fonts/geomanist-medium-webfont.woff2") format("woff2"),
        url("../fonts/geomanist-medium-webfont.woff") format("woff");
    font-family: "Geomanist-Medium";
}

html,
body {
    position: relative;
    width: 100%;
    min-width: 320px;
    background-color: var(--white);
    color: var(--black);
    font-size: 16px;
    line-height: 1.3rem;
    font-family: 'Poppins', 'Arial', sans-serif;
    font-weight: 300;
    word-break: break-word;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
}

#container--buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2rem;
}
.return {
    position: relative;
    padding-left: 1.35rem;
    text-decoration: none;
    color: var(--white);
    font-family: 'Poppins', 'Arial', sans-serif;
    font-size: .85rem;
    background-color: var(--q-red);
    border-radius: 6px;
    padding: .5rem 1rem .5rem 1.5rem;
}
.return.q {
    background-color: var(--q-red);
}
.return.joe {
    background-color: var(--joe-blue);
}
.return:before {
    content: '';
    position: absolute;
    left: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: .75rem;
    height: .75rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='203' viewBox='0 0 176 203'%3E%3Cpath d='M88.506,22.531a15,15,0,0,1,25.988,0l75.534,130.975A15,15,0,0,1,177.034,176H25.966a15,15,0,0,1-12.994-22.494Z' transform='translate(0 203) rotate(-90)' fill='%23fff'/%3E%3C/svg%3E");
}

/* ITEM GENERAL */
.item {
    position: relative;
    width: var(--circle-size);
    border-radius: var(--circle-size);
    background-color: orange;
    text-decoration: none;
    border: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate(0px, 100px);
}

.item:before {
    content: '';
    display: block;
    padding-bottom: 100%;
    height: 0;
    width: 100%;
}

.item.visible {
    opacity: 1;
    visibility: visible;
}

.item:hover .item--content .btn {
    transform: scale(1.05);
}

a.item:hover {
    cursor: pointer;
}

/* ITEM Q */
.item#item--q {
    background: linear-gradient(to right, var(--q-red) 40px, var(--q-pink) 40px);
    background-color: var(--q-red);
    background-position: 0 center;
    background-size: 80px;
    animation: bg 30s infinite linear;
}

/* ITEM JOE */
.item#item--joe {
    position: relative;
    overflow: hidden;
    background-color: var(--joe-cyan);
}
.item#item--joe .item--content--extra:before,
.item#item--joe .item--content--extra:after {
    z-index: 0;
    position: absolute;
    top: 55%;
    left: -20%;
    width: calc(var(--circle-size) / 1.6);
    height: calc(var(--circle-size) / 1.6);
    border: 80px solid var(--joe-blue);
    border-radius: 50%;
    animation: circle1 25s infinite linear;
    content: '';
}

.item#item--joe .item--content--extra:after {
    top: -10%;
    right: -30%;
    left: auto;
    width: calc(var(--circle-size) / 1.2);
    height: calc(var(--circle-size) / 1.2);
    border: 100px solid var(--joe-blue);
    animation: circle2 30s infinite linear;
}

/* ITEM CONTENT */
.item .item--content {
    display: flex;
    z-index: 100;
    position: absolute;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    top: 50%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.item .item--content:only-child {
    justify-content: center;
}

/* LOGOS */
.item--content #logo--q-beach-house-2025 {
    width: auto;
    height: 40%;
}

.item--content #logo--joe-paradise-2025 {
    width: auto;
    height: 35%;
} 

/* BUTTONS */
.item .item--content .btn {
    margin: 2rem 0 0 0;
    margin-bottom: 0; 
    padding: .5rem 1rem;
    border-radius: 50px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .1);
    text-decoration: none;
    transition: transform .25s ease-in-out;
}
 
.item--content #button--q-beach-house-2025 {
    padding: .5rem 1rem;
    background-color: var(--q-yellow);
    color: var(--q-red);
    font-size: 1.5rem;
    font-family: 'Sippinsummer', 'Arial', 'Helvetica', sans-serif;
}

.item--content #button--joe-paradise-2025 {
    background-color: var(--joe-pink);
    color: var(--white);
    color: var(--white);
    font-size: 1.4rem;
    font-family: 'Geomanist-Medium', 'Arial', 'Helvetica', sans-serif;
}

/* ANIMATION */
@keyframes bg {
    0% {
        background-position: 0 center;
    }

    100% {
        background-position: var(--circle-size) 0;
    }
}
@keyframes circle1 {
    0% {
        transform: rotate(0deg) translate(15px, 10px);
        }
        50% {
        transform: rotate(360deg) translate(0px, 0px);
        }
        100% {
        transform: rotate(0deg) translate(15px, 10px);
        }
}
@keyframes circle2 {
        0% {
        transform: rotate(0deg) translate(-10px, -10px);
        }
        50% {
        transform: rotate(360deg) translate(0px, 0px);
        }
        100% {
        transform: rotate(0deg) translate(-10px, -10px);
        }
}

/*
** RESPONSIVE
*/
@media only screen and (min-width: 768px) {
    #container--buttons {
        flex-direction: row;
    }
    .item#item--joe .item--content--extra:before,
    .item#item--joe .item--content--extra:after {
        top: 55%;
        left: -20%;
        width: calc(var(--circle-size--lg));
        height: calc(var(--circle-size--lg));
        border: 60px solid var(--joe-blue);
        border-width: 120px;
    }

    .item#item--joe .item--content--extra:after {
        top: -15%;
        right: -35%;
        left: auto;
        width: calc(var(--circle-size--lg) + 15%);
        height: calc(var(--circle-size--lg) + 15%);
        
    }
    /* LOGOS */
    .item--content #logo--q-beach-house-2025 {
        width: auto;
        height: 40%;
    }

    .item--content #logo--joe-paradise-2025 {
        width: auto;
        height: 33%;
    } 
}
/* MQ */
@media only screen and (min-width: 1200px) {}

/* MQ */
@media only screen and (min-width: 1400px) {
    .item {
        width: var(--circle-size--xl);
    }
    .item#item--joe .item--content--extra:before,
    .item#item--joe .item--content--extra:after {
        
        border-width: 80px;
    }
    /* LOGOS */
    .item--content #logo--q-beach-house-2025 {
        width: auto;
        height: 30%;
    }

    .item--content #logo--joe-paradise-2025 {
        width: auto;
        height: 30%;
    } 
}
/* MQ */
@media only screen and (min-width: 2000px) {
    .item {
        width: var(--circle-size--xxl);
    }
    .item#item--joe .item--content--extra:before,
    .item#item--joe .item--content--extra:after {
        top: 55%;
        left: -25%;
        width: calc(var(--circle-size--xxl) - 10%);
        height: calc(var(--circle-size--xxl) - 10%);
        border: 80px solid var(--joe-blue);
        border-width: 100px;
    }

    .item#item--joe .item--content--extra:after {
        top: -15%;
        right: -30%;
        left: auto;
        width: calc(var(--circle-size--xxl));
        height: calc(var(--circle-size--xxl));
        border-width: 110px;
    }
    /* LOGOS */
    .item--content #logo--q-beach-house-2025 {
        width: auto;
        height: 35%;
    }

    .item--content #logo--joe-paradise-2025 {
        width: auto;
        height: 30%;
    } 
}