@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
}

:root {
    --primary-clr: #303f9f;
    --secondary-clr: #fbc02d;
    --ternory-clr: #3f51b5;
    --white: #FFF;
    --tab-border: 0.3rem;
}

html {
    font-size: 62.5%;
}

li {
    list-style: none;
}

main {
    min-height: 100vh;

    background-color: var(--primary-clr);
    font-size: 2rem;
    letter-spacing: 0.05rem;
}




.container {
    display: flex;

    width: 100%;
    max-width: 94rem;
    padding: 2rem;
}

.container .navigations {
    width: 20%;
    color: var(--primary-clr);
}


.navigations li+li {
    margin-top: 1.6rem;
}

.navigations li label {
    padding: 1rem 1rem 1rem 2.3rem;
    position: relative;
    cursor: pointer;
    background-color: var(--ternory-clr);
    display: block;
}

.navigations li label::before,
.navigations li label::after {
    content: '';
    position: absolute;
    display: block;
}

.navigations li label::before {
    width: 0.8rem;
    height: 0.8rem;
    background: var(--primary-clr);

    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: 0.7rem;
    transition: all 0.5s;
}

input[name="radio"]:checked+label {
    color: var(--secondary-clr);
    border-top: var(--tab-border) solid var(--secondary-clr);
    border-bottom: var(--tab-border) solid var(--secondary-clr);
}

input[name="radio"]:checked+label::before {
    background: var(--secondary-clr);
    left: 0;
    height: 100%;
    border-radius: 0;
    width: var(--tab-border);
}

input[name="radio"]:checked+label::after {
    top: 0;
    right: calc(-1*var(--tab-border));
    width: var(--tab-border);
    height: 100%;
    background: var(--ternory-clr);
    z-index: 999;
}


.container .tab-content {
    flex: 1;
    color: var(--white);
    isolation: isolate;
}

.tab {
    display: none;
    transition: all 0.5s;
    padding: 1rem;
}

.tab-1 {
    display: block;
    border: var(--tab-border) solid var(--secondary-clr);
}

@media(min-width: 768px) {
    main {
        padding-top: 10%;
    }

    .container {
        margin-inline: auto;
    }
}

@media(max-width: 767px) {
    .container {
        flex-direction: column;
    }

    .container>ul {
        width: 100% !important;
    }

    .navigations {
        display: flex;
        gap: 1rem;
    }

    .navigations>li {
        flex: 1;
        margin: 0 !important;
    }

    input[name="radio"]:checked+label::before {
        height: 112%;
        z-index: 9999;
    }

    input[name="radio"]:checked+label {
        border-bottom: none;
        border-right: var(--tab-border) solid var(--secondary-clr);
    }

    input[name="radio"]:checked+label::after {
        top: unset;
        left: 0;
        bottom: calc(-1*var(--tab-border));
        right: unset;
        width: 100%;
        height: var(--tab-border);
    }
}