@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    word-spacing: .3rem;
    --header-height: 5rem;
    --header-color: rgba(246, 246, 246, .5);
    --background-a: rgb(246, 246, 246);
    --background-b: rgb(154, 113, 151);
    --color-a: black;
    --color-b: white;
    --secondary-color: #bba14f;
    --default-state-color: #bba14f;
    --hover-state-color: #d4af37
}

html,
body,
#root {
    height: 100%
}

html {
    font-size: 16px
}

body {
    background-color: var(--background-a);
    color: var(--color-a)
}

a {
    color: var(--default-state-color);
    text-decoration: none;
    transition: all .3s ease 0s
}

a:hover {
    color: var(--hover-state-color)
}

.bttn {
    padding: 1rem;
    color: var(--color-b);
    background-color: var(--default-state-color);
    border: none;
    border-radius: 0rem;
    cursor: pointer;
    transition: all .3s ease 0s;
    margin: .5rem 0
}

.bttn:hover {
    background-color: var(--hover-state-color)
}

img {
    display: block;
    margin: auto;
    width: 100%;
    height: 500px;
    object-fit: scale-down
}

#name {
    color: var(--secondary-color)
}

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .8rem .5rem;
    background-color: var(--header-color);
    backdrop-filter: blur(10px);
    box-shadow: 0 11px 30px -20px #c6a63a80;
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height)
}

header a {
    color: var(--color-a)
}

.logoContainer {
    display: block;
    z-index: 1
}

.logoObj {
    z-index: -1;
    pointer-events: none
}

nav ul,
aside ul {
    list-style: none
}

nav ul li {
    display: inline-block;
    padding: .5rem 2vw
}

aside ul li {
    margin: 1rem 0
}

aside {
    background-color: var(--default-state-color);
    position: fixed;
    bottom: 10%;
    right: 0%;
    padding: 1rem;
    border-radius: 0rem;
    transition: all .3s ease 0s
}

aside:hover {
    background-color: var(--hover-state-color)
}

aside a:hover {
    text-shadow: 0 0 5px #FFFFFF
}

#menuToggle {
    display: block;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none
}

#menuToggle a {
    text-decoration: none;
    color: #f5f5f5;
    transition: color .3s ease
}

#menuToggle a:hover {
    color: #87ceeb
}

#menuToggle input {
    width: 35px;
    height: 25px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    background: var(--color-a);
    border-radius: 0;
    margin: 5px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease
}

#menuToggle span:first-child {
    transform-origin: 0% 0%
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: var(--background-b)
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0) scale(.2)
}

#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translateY(-1px)
}

#menuContainer {
    position: fixed;
    top: 5rem;
    left: 0;
    width: 320px;
    padding: 50px;
    background: var(--default-state-color);
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%);
    transition: transform .5s cubic-bezier(.77, .2, .05, 1)
}

#menuContainer li {
    padding: 10px 0;
    font-size: 1.5rem;
    list-style: none
}

#menuContainer li a:hover {
    color: var(--background-b)
}

#menuToggle input:checked~ul {
    transform: none
}

main {
    min-height: 100%;
    background-color: var(--background-a);
    box-shadow: 0 11px 30px -20px #00000059;
    margin: var(--header-height) 2% 0 2%;
    padding: 2rem 8% 5rem
}

section {
    border-left: 5px solid var(--secondary-color);
    overflow: auto;
    margin: 1.5rem 0 1rem;
    padding: 2rem 1rem 1rem 2rem
}

section.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: space-around
}

section article {
    background-color: #fff;
    box-shadow: 0 11px 30px -20px #00000059;
    border-radius: 0rem;
    margin: 0 1rem 1rem 0;
    padding: 1rem 2rem
}

section.flexbox article {
    flex-basis: 25rem;
    flex-grow: 1
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .3rem;
    word-spacing: initial
}

h1 {
    margin-top: .5rem
}

h2 {
    font-size: medium
}

p {
    margin-bottom: 1rem
}

section li:first-child {
    margin-top: 1rem
}

section li:last-child {
    margin-bottom: 1rem
}

section ol li::marker,
section ul li::marker {
    font-weight: 500;
    color: var(--secondary-color)
}

section ol ol li::marker,
section ul ul li::marker {
    font-weight: 300;
    color: var(--secondary-color)
}

section ul,
section ol {
    list-style-position: outside;
    padding-left: 1rem
}

section ul ul,
section ol ol {
    list-style-position: inside;
    padding-left: 2rem
}

section ul {
    list-style-type: disc
}

section ul ul {
    list-style-type: circle
}

section ol {
    list-style-type: decimal
}

section ol ol {
    list-style-type: lower-alpha
}

footer {
    margin-top: auto;
    padding: .8rem .5rem;
    background-color: var(--background-b);
    color: var(--color-b);
    font-size: small;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center
}

footer a {
    text-decoration: none;
    color: var(--color-b)
}

footer div {
    margin: 4px
}

.menu {
    font-size: calc(4vw + 1rem);
    font-weight: 500
}

.menu a {
    color: var(--color-a)
}

.menu a:hover {
    color: var(--hover-state-color)
}

.menu ul {
    list-style: none
}

.menu ul li {
    padding: 0 1rem
}

section.home-container {
    overflow: auto;
    border-left: none;
    margin: 0rem 0 1rem;
    padding: 1rem 1rem 1rem 0rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: space-around
}

section.home-container article {
    background-color: initial;
    box-shadow: none;
    margin: 0 0rem 0rem 0;
    padding: 1rem;
    flex-basis: 25rem;
    flex-grow: 1
}

section.home-container article.intro {
    background-color: var(--background-b);
    color: var(--color-b);
    font-size: calc(.5vw + 1rem)
}

@media screen and (min-width: 0px) and (max-width: 768px) {
    #menuToggle {
        display: block
    }

    #navText {
        display: none
    }
}

@media screen and (min-width: 769px) {
    #menuToggle {
        display: none
    }

    #navText {
        display: block
    }
}