/* FUCHSIA HTML and CSS template by riflesniper on vgen | buy the template here: https://vgen.co/riflesniper/shop | do not remove credit! */

/* as is standard with webpages these days, this design follows a mobile-first layout. keep that in mind while editing this CSS. */

:root {
    /* you don't need to change the colours on all of the elements! simply changing the colours on these values will recolour (almost) the whole document. */
    --primary-gradient: linear-gradient(to right, #FF0099, #B70043);
    --secondary1: #1d1d1d;
    --secondary2: #4e4f51;
    --secondary3: #3c3c3c;
    --text: #fff;
}

/* creates the cube background | from https://css-pattern.com/cubes-illusion/ */
html {
    --s: 156px;
    /* control the size*/
    --c1: var(--secondary1);
    --c2: var(--secondary2);
    --c3: var(--secondary3);

    background:
        repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
        repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 50%);
    background-size: var(--s) calc(var(--s)*tan(30deg));
    font-family: 'Lexend';
    scrollbar-color: #B70043 var(--secondary1);
}

.inner-container {
    max-width: 800px;
    margin: 0 auto;
}

hgroup {
    background: var(--primary-gradient);
    color: var(--secondary1);
    min-height: 10rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 1rem;
}

main {
    background-color: #1d1d1d9a;
    backdrop-filter: blur(0.2rem);
    padding: 1rem 1rem 0 1rem;
}

h1,
h2,
h3 {
    font-family: 'Lexend Zetta';
    color: var(--secondary1);
}

h1 {
    font-size: 3rem;
    line-height: 1;
}

h1 a {
    text-decoration: none;
    color: var(--secondary1);
}

p {
    font-weight: 300;
}

/* this ensures that the last p element in a div doesnt add any extra space to the bottom of its parent element */
p:not(p:last-of-type) {
    margin-bottom: 1rem;
}

i {
    display: block;
    text-align: center;
    font-size: 2rem;
    line-height: 1;
    background-image: var(--primary-gradient);
    color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    /* if setting the primary value to a solid colour, ensure that you change color: transparent; and remove background-clip and background-image from any text/SVG elements */
    cursor: pointer;
}

/* styling for the navigation begins */
/* hide the navigation in mobile view */
.dropdown menu {
    content-visibility: hidden;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    margin: 0;
}

/* clicking the meatball menu expands it! */
.expanded menu {
    content-visibility: visible;
    padding: 0;
    margin-bottom: 1rem;
}

.navitem {
    display: block;
    text-align: center;
    padding: 1rem;
    background-color: var(--secondary2);
}

.navitem a {
    text-decoration: none;
    color: var(--text);
    transition: 0.4s ease-in-out;
}

.navitem a:hover {
    background-image: var(--primary-gradient);
    color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}

/* main body styling starts */

.primary {
    width: 100%;
}

.text-header {
    background: var(--primary-gradient);
    padding: 1rem;
    margin-bottom: 1rem;
}

.text-body {
    background-color: var(--secondary2);
    padding: 1rem;
    margin-bottom: 1rem;
}

.socials {
    display: flex;
    background-clip: text;
    justify-content: center;
    gap: 1rem;
}

/* now for the desktop layout */
@media screen and (min-width: 800px) {
    h1 {
        font-size: 4rem;
    }

    .toggle-btn {
        content-visibility: hidden;
    }

    .dropdown menu {
        content-visibility: visible;
        margin-bottom: 1rem;
        flex-flow: row;
        padding: 0;
    }

    .navitem {
        width: 100%;
    }
}