/* Fonts & Imports */
@font-face {
font-family: 'Blacksword';
src: url(/assets/fonts/Blacksword.otf);
}

@font-face {
font-family: 'Caviar';
src: url(/assets/fonts/CaviarDreams.ttf);
}
@font-face {
    font-family: 'Designer';
    src: url(/assets/fonts/DESIGNER.otf);
}

/* Universal */
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Designer', sans-serif;
}

/* Root */
:root {
    --theme__clr__lavender: #a6a6ed;
    --theme__clr__gold: #ffc425;
    --theme__clr__black: rgb(23, 23, 52);
    --theme__clr__white: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: var(--theme__clr__black);
    position: relative;
}
header {
    width: 100%;
    height: auto;
    background: var(--theme__clr__black);
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
nav {
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.nav-logo-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2rem;
}
.logo-wrapper {
    display: inline-block;
    margin: 0 1rem;
}
.logo-wrapper img {
    width: 64px;
    height: auto;
}
.logo-title {
    display: inline-block;
}
.logo-title h2 {
    color: #ffc425;
    font-size: 2rem;
    font-family: 'Blacksword', sans-serif;
    letter-spacing: .75rem;
    word-spacing: -1rem;
}
.nav-link-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    margin: auto;
    padding: 0;
    background: transparent;
}
.mega-wrapper {
    display: inline-block;
    margin: 0 2rem;
    position: relative;
}
.subscribe-wrapper {
    display: inline-block;
    margin-left: auto;
    margin-right: 1rem;
}
.subscribe-wrapper button {
    background: transparent;
    border: none;
    color: white;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'Designer', sans-serif;
    letter-spacing: .75rem;
    padding: .5rem 2rem;
    cursor: pointer;
    transition: all 700ms ease;
}
.subscribe-wrapper button:hover {
    transform: scale(105%);
    color: var(--theme__clr__gold);
}
.subscribe-menu-wrapper {
    display: none;
}

.main-animate1 {
    transform: translateX(-100%);
    transition: all 3s ease;
}
.main-animate2 {
    transform: translateX(-100%);
    transition: all 2s ease;
}
.main-animate3 {
    transform: translateX(-100%);
    transition: all 1s ease;
}
.show-animate1 {
    transform: translateX(0);
}
.show-animate2 {
    transform: translateX(0);
}
.show-animate3 {
    transform: translateX(0);
}
.mega-wrapper a {
    text-decoration: none;
    background: transparent;
    border: none;
    color: white;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'Designer', sans-serif;
    letter-spacing: .75rem;
    padding: .5rem 2rem;
    cursor: pointer;
    transition: all 700ms ease;
}
.mega-wrapper a:hover {
    transform: scale(105%);
    color: var(--theme__clr__gold);
}
.mega-wrapper button {
    background: transparent;
    border: none;
    color: white;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'Designer', sans-serif;
    letter-spacing: .75rem;
    padding: .5rem 2rem;
    cursor: pointer;
    transition: all 700ms ease;
}
.mega-wrapper button:hover {
    transform: scale(105%);
    color: var(--theme__clr__gold);
}
.mega-wrapper button:hover ~ .mega-menu {
    display: grid;
}
.mega-menu {
    width: 120%;
    display: none;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem;
    position: absolute;
    top: 2rem;
    z-index: 3;
    margin: 0;
    padding: .5rem 1rem;
    background: var(--theme__clr__lavender);
    transition: all 700ms ease;
}
.mega-menu a {
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px 2px black;
    display: block;
    margin: 0 auto 1rem;
    transition: all 700ms ease;
}
.mega-menu a:hover {
    color:var(--theme__clr__gold);
}
.mega-menu span {
    color: var(--theme__clr__black);
    text-shadow: 1px 1px 2px white;
    font-weight: 700;
    letter-spacing: .2rem;
    width: fit-content;
    display: block;
    margin: 0 0 1.25rem;
    padding: 0;
}
.mega-link-wrapper {

}
.mega-sidebar-wrapper {

}
.about-me-wrapper {
    width: 100%;
    height: auto;
    margin: 6rem auto 0;
    padding: 2rem 1rem;
    background: var(--theme__clr__lavender);
}
.about-me-wrapper h2 {
    color: var(--theme__clr__gold);
    text-shadow: 2px 2px 2px black;
    font-size: 2.5rem;
    letter-spacing: .3rem;
    margin: 0 0 2rem;
    text-align: center;
}
.about-me-wrapper h3 {
    color: white;
    font-size: 2rem;
    letter-spacing: .75rem;
    text-shadow: 2px 2px 2px black;
}
.about-me-text-wrapper {
    display: flex;
    align-items: center;
}
.about-me-text-wrapper h3 {
    display: inline-block;
    width: 50%;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.25rem;
    letter-spacing: .3rem;
    text-shadow: 2px 2px 2px black;
}
.about-me-wrapper p {
    width: 50%;
    letter-spacing: .3rem;
    line-height: 2rem;
    color: white;
    font-size: 1.25rem;
    text-shadow: 2px 2px 2px black;
}
.about-me-wrapper .about-img-wrapper {
    width: 375px;
    height: 375px;
    display: flex;
    overflow-x: hidden;
}
.about-img-wrapper img {
    width: 375px;
    height: 375px;
    object-fit: cover;
    display: none;
    border-radius: 10px;
    box-shadow: 2px 2px 4px black;
}
img.show-img {
    display: block;
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}
.inspiration-wrapper {
    width: 100%;
    height: auto;
    margin: 6rem auto 0;
    padding: 2rem 1rem;
    background: var(--theme__clr__gold);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 4rem;
}
.inspiration-col-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4rem;
}
.inspiration-text-wrapper {
    width: 100%;
    grid-column: 1 / 4;
    margin-bottom: 2rem;
    color: var(--theme__clr__lavender);
    text-shadow: 2px 2px 3px black;
    letter-spacing: .3rem;
    font-size: 2rem;
}
.inspiration-wrapper h4 {
    font-size: 2rem;
    letter-spacing: .3rem;
    color: var(--theme__clr__lavender);
    text-shadow: 2px 2px 3px black;
    margin-bottom: 2rem;
}
.inspiration-wrapper .img-wrapper {
    width: 100%;
    margin-bottom: 4rem;
}
.img-wrapper .img-carousel-wrapper {
    width: 100%;
    margin-bottom: 1rem;
}
.img-carousel-wrapper img {
    width: 187.5px;
    height: 187.5px;
    border-radius: 10px;
    object-fit: cover;

}

/* Pop Text  */
.pop1 {color: var(--theme__clr__gold)}
.pop2 {color: var(--theme__clr__black);}
.pop3 {color: #33ae33;}
.pop4 {color:blue;}

.video-wrapper {
    width: 100%;
    height: auto;
    background: var(--theme__clr__lavender);
    padding: 8rem 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
footer {
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    margin: 0;
    padding: 2rem 1rem;
}
footer a {
    width: 100%;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 1rem 0 0;
}
footer a img {
    width: 64px;
    height: auto;
    object-fit: cover;
}
footer span {
    display: block;
    color: white;
    margin: 1rem 0 0;
}
.social-links {
    width: 33%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    color: white;
    text-align: center;
}
.legal-links {
    width: 33%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    color: white;
    text-align: center;
}
.more-links {
    width: 33%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    color: white;
    text-align: center;
}