@import url('/assets/css/partials/header.css');
@import url('/assets/css/partials/fly-out-menu.css');
@import url('/assets/css/partials/footer.css');

body *,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Poppins", sans-serif;
}


.title-div h1 {
    font-size: 2em;
    font-weight: 300;
    margin: 0;
    color: #0072ce;
}

.colorfull-lines {
    display: flex;
}

.colorfull-lines span {
    display: block;

    width: 25px;
    height: 4px;

    margin: 2px 0 36px;
}

.colorfull-lines .yellow {
    background-color: #FFC600;
}

.colorfull-lines .orange {
    background-color: #FF6A14;
}

.colorfull-lines .green {
    background-color: #97D700;
}

.colorfull-lines .dark-blue {
    background-color: #054E72;
}





/* Post */

#post {
    margin-top: 4rem;

    padding: 6rem 2rem;
}

.post {
    max-width: 1024px;

    margin: auto;
}

.post-options {
    display: flex;
    justify-content: space-between;
}

.copyLink {
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 4px;
    width: 290px;

    color: white;

    background-color: #25d333;
    border-radius: 20px;

    padding: 0.35rem 1rem;

    transition: 0.2s;
}

.copyLink ion-icon {
    font-size: 1.5rem;
}

.copyLink:hover {
    transform: scale(1.015);
}

.post-content img {
    margin: 1rem 0;
    width: 100%;
}

.post-content h2 {
    font-size: 1.75rem;

    color: #0072ce;
    font-weight: 600;

    margin: 1rem 0;
}

.post-final::before {
    content: '';
    display: block;
    background-color: black;
    height: 1px;
    width: 100%;

    margin: 2rem 0;
}

.post-final-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.post-final-content .copyLink {
    align-self: flex-end;
}

.post-final-content nav {
    display: flex;
    gap: 12px;
}

.post-final-content img {
    width: 24px;
    margin: 0;

    cursor: pointer;
}

.post-final-content nav ion-icon {
    font-size: 1.55rem;

    color: #0072ce;

    cursor: pointer;
}

@media (max-width: 600px) {
    .post-options .copyLink{
        display: none;
    }
    .title-div h1 {
        font-size: 1.7rem;
    }

    .post-content h2 {
        font-size: 1.5rem;

        color: #0072ce;
        font-weight: 600;

        margin: 1rem 0;
    }

    .post-content p{
        font-size: 0.95rem;
    }

    .post-final-content {
        flex-direction: column;
        align-items: center;

        gap: 12px;
    }

    .post-final-content .copyLink {
        align-self: center;
    }

    .post-final-content nav {
        align-items: center;
        justify-content: center;
    }


    .post-final-content nav ion-icon {
        font-size: 2rem;
    }
}