@import 'scss/variables';
@import 'scss/grid';

@import 'scss/normalize';

@import 'nav';
@import 'aside';
@import 'wrapper';
@import 'footer';

h1 {
    margin: 0;
    padding: 0;

    font-size: 2rem;
    text-align: center;
    font-weight: 600;
}

h2 {
    margin: 0;
    padding: 0;

    font-size: 1.5rem;
    font-weight: 600;
}

h3 {
    margin: 0;
    padding: 0;

    font-size: 1rem;
    font-weight: 600;
}

.title {
    margin: 0;
    padding: 2rem 0;

    position: relative;

    img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        filter: grayscale(100%);

        transition: all 0.2s ease-in-out;

        &:hover {
            filter: grayscale(0%);
        }
    }
}

.btn {
    margin: 0;
    padding: 0;

    width: 100%;
    height: auto;

    background-color: transparent;
    color: $white;

    text-decoration: none;

    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5rem;

    border: none;

    transition: all 0.2s ease-in-out;
    cursor: pointer;

    i {
        opacity: 0;
        transform: translateX(1rem);
        transition: all 0.2s ease-in-out;
        filter: blur(0.1rem);
    }

    &:hover {
        i {
            opacity: 1;
            transform: translateX(0);
            filter: blur(0);
        }
    }
}

#funny {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
}