@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Neucha&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root,
:host,
.sl-theme-light {
    --color-primary: #f8f8f2;
    --color-secondary: #282a36;
    --color-tertiary: #e5e5e5;
    --color-purple-primary: #6F2DBD;
    --color-purple-secondary: #B298DC;
    --color-blue-primary: #9CBDE3;
    --color-gray-primary: #4a4e69;
    --color-text-secondary: #f8f8f2;

    --font-family-serif: 'Neucha', cursive;
    --font-family-sans-serif: 'Lato', sans-serif;

    /* Change primary theme colour to --color-purple-primary. */
    --sl-color-primary-50: rgb(251 249 253);
    --sl-color-primary-100: rgb(240 234 248);
    --sl-color-primary-200: rgb(229 217 243);
    --sl-color-primary-300: rgb(217 200 238);
    --sl-color-primary-400: rgb(201 176 230);
    --sl-color-primary-500: rgb(179 145 220);
    --sl-color-primary-600: rgb(156 111 210);
    --sl-color-primary-700: rgb(135 80 200);
    --sl-color-primary-800: rgb(116 52 191);
    --sl-color-primary-900: rgb(84 34 143);
    --sl-color-primary-950: rgb(52 21 89);
}

:host,
.sl-theme-dark {
    --color-primary: #282a36;
    --color-secondary: #f8f8f2;
    --color-tertiary: #44475a;
    --color-purple-primary: #3B1867;
    --color-purple-secondary: #893EF4;
    --color-blue-primary: #4080c9;
    --color-gray-primary: #dee2ff;
    --color-text-secondary: #e5e5e5;
}

/* || Animations .......................................................... */
@keyframes ripple {
    from {
        stroke-width: 0;
    }
    to {
        stroke-width: 6;
    }
}

@keyframes signal {
    from {
        fill: var(--color-primary);
    }
    to {
        fill: var(--color-purple-secondary);
    }
}

@keyframes aeroplane-interaction-primary {
    from {
        fill: var(--color-primary);
    }
    to {
        fill: var(--color-purple-secondary);
    }
}

@keyframes aeroplane-interaction-secondary {
    from {
        fill: var(--color-primary);
    }
    to {
        fill: var(--color-blue-primary);
    }
}

/* ........................................................................ */

/* || General Styles ...................................................... */

html {
    scroll-behavior: smooth;
    background-color: var(--color-purple-primary);
}

body {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    font-family: var(--font-family-sans-serif);
    line-height: var(--sl-line-height-normal);
}

section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sl-spacing-large);
    z-index: var(--sl-z-index-drawer);
    padding: var(--sl-spacing-large);
}

img {
    padding: var(--sl-spacing-x-small);
}

aside {
    position: absolute;
    width: 100vw;
    min-height: 100%;
}

h1 {
    display: none;
}

h2 {
    display: none;
    z-index: var(--sl-z-index-drawer);
}

h3 {
    align-self: flex-start;
}

p {
    line-height: var(--sl-line-height-loose);
    text-align: left;
    width: 100%;
}

a {
    text-decoration: none;
}

span {
    z-index: 1;
    font-size: 80%;
    color: var(--color-blue-primary);
}

footer {
    background-color: var(--color-purple-primary);
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-large);
}

footer img {
    width: 120px;
}

/* ........................................................................ */

/* || Header and Main Navigation .......................................... */

/* Code sourced and adapted from:
   https://stackoverflow.com/questions/45530235/positionsticky-is-not-working
*/

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: var(--sl-z-index-tooltip);
    padding: var(--sl-spacing-large);
}

header, nav, .header, .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header img, nav img {
    width: 70px;
}

/* Code sourced and adapted from:
   https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
   https://stackoverflow.com/questions/17900122/stretch-child-div-height-to-fill-parent-that-has-dynamic-height
   https://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-element
*/

nav {
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    position: fixed;
    color: var(--color-blue-primary);
    background-color: var(--color-purple-primary);
    overflow: hidden; /* Disable scrolling for content. */
    transition: .7s;
    z-index: var(--sl-z-index-tooltip);
}

nav sl-icon-button {
    color: var(--sl-color-primary-900);
}

nav ul {
    list-style: none;
    padding: var(--sl-spacing-large);
    min-width: 500px;
    font-size: 300%;
}

/* Code sourced and adapted from:
   https://stackoverflow.com/questions/13397135/stretch-list-items-li-to-fill-the-width-of-ul
*/

nav ul li {
    display: flex;
    flex-direction: column;
}

nav ul li a {
    padding: var(--sl-spacing-x-small) 0;
    flex: 1; /* Set flex-grow to grow the element to the size of its parent. */
    transition: .7s;
    color: var(--sl-color-primary-900);
}

nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
    color: var(--color-blue-primary);
}


/* ........................................................................ */

/* || Custom IDs .......................................................... */
#home > h2 {
    display: block;
    font-weight: var(--sl-font-weight-light);
    font-size: var(--sl-font-size-medium);
    letter-spacing: var(--sl-letter-spacing-looser);
}

#home h2 > span {
    font-size: var(--sl-font-size-medium);
    color: var(--color-secondary);
}

#partsAndFunction {
    background-color: var(--color-tertiary);
}

/* Code sourced and adapted from:
   https://www.w3schools.com/howto/howto_css_flip_image.asp
   https://stackoverflow.com/questions/13324643/absolute-image-position-dont-allow-to-image-go-outide-the-div
*/

#aerodynamics aside > .clouds {
    position: absolute;
    top: 0;
    transform: rotateZ(180deg);
}

#ellipseOne {
    animation: ripple infinite 2s ease alternate-reverse;
}

#ellipseTwo {
    animation: ripple infinite 2.2s ease alternate-reverse;
}

#ellipseThree {
    animation: ripple infinite 2.4s ease alternate-reverse;
}

#ellipseFour {
    animation: ripple infinite 2.6s ease alternate-reverse;
}

#ellipseFive {
    animation: ripple infinite 2.8s ease alternate-reverse;
}

#lineOne, #lineFour {
    animation: ripple infinite 2s ease alternate-reverse;
}

#lineTwo, #lineFive {
    animation: ripple infinite 2.5s ease alternate-reverse;
}

#lineThree, #lineSix {
    animation: ripple infinite 2.8s ease alternate-reverse;
}

#gallery {
    background-color: var(--color-purple-primary);
    color: var(--color-text-secondary);
}

#gallery a {
    color: var(--color-blue-primary);
}

#whatIsNext article .article-content > h3 {
    font-size: 250%;
    align-self: center;
}

/* ........................................................................ */

/* || Custom Classes ...................................................... */

.header, .footer {
    position: absolute;
    width: 100vw;
    padding: var(--sl-spacing-large);
}

.header {
    top: 0;
}

.footer {
    bottom: 0;
}

.hidden {
    display: none;
}

.visible {
    fill: var(--color-primary);
}

.serif {
    font-family: var(--font-family-serif);
    font-weight: 300;
    font-style: italic;
}

.signal {
    animation: signal 1s infinite;
    fill: var(--color-primary);
    width: 10px;
}

.radar {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ellipse {
    stroke: var(--color-tertiary);
    stroke-width: 6;
}

.line {
    stroke: var(--color-blue-primary);
    stroke-width: 6;
}

.paper-plane-motion-path svg {
    visibility: hidden;
    width: 100vw;
    height: 100vh;
}

.paper-plane-motion-path img {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
}

.clouds {
    position: absolute;
    bottom: 0;
    fill: var(--color-tertiary);
}

.clouds-purple {
    fill: var(--color-purple-primary);
    bottom: 0;
}

.airbus-319 {
    stroke: var(--color-gray-primary);
    stroke-width: 1px;
    width: 85vw;
}

.highlight-aeroplane-parts {
    fill: var(--color-purple-secondary);
}

.highlight-aeroplane-parts-components {
    fill: var(--color-blue-primary);
}

.highlight-aeroplane-parts-animation {
    animation: aeroplane-interaction-primary .5s infinite alternate;
}

.highlight-aeroplane-parts-components-animation {
    animation: aeroplane-interaction-secondary .5s infinite alternate;
}

.aerodynamics-svg {
    width: 80%;
    fill: none;
    stroke: var(--color-purple-secondary);
    stroke-width: 10px;
}

.aerodynamics-chart-y-axis {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--sl-spacing-x-small);
    text-align: center;
}

.aerodynamics-chart-x-axis {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--sl-spacing-x-small);
}

.aerodynamics-chart-x-axis > div {
    flex: 1;
}

.polygons-initial-state {
    opacity: 0;
    stroke-width: 0;
    transition: opacity 1s;
    fill: var(--color-purple-secondary)
}

.lines-initial-state {
    transition: opacity .5s;
    stroke-width: 5px;
    opacity: 1;
}

.display-polygon {
    opacity: 1;
}

.lift-div span, .weight-div span, .thrust-div span, .drag-div span {
    padding: var(--sl-spacing-x-small);
    cursor: pointer;
    color: var(--color-secondary);
}

.article-content {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);;
    width: 100%;
}

/* ........................................................................ */

/* || Shoelace Custom HTML tags and Classes ............................... */

sl-icon-button {
    font-size: 180%;
}

.icon-button::part(base):hover, .icon-button::part(base):active, .icon-button::part(base):focus {
    color: var(--color-blue-primary);
}

.switch-off::part(control) {
    background-color: var(--color-purple-primary);
    border-color: var(--color-blue-primary);
}

.switch-on::part(control) {
    background-color: var(--color-blue-primary);
    border-color: var(--color-blue-primary);
}

.switch-off::part(thumb), .switch-on::part(thumb) {
    background-color: var(--color-purple-primary);
    border-color: var(--color-blue-primary);
}

.tab-group {
    align-self: start;
    max-width: 85vw;
}

sl-card {
    max-width: 100vw;
}

.sl-card {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
}

.card-header [slot='header'] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-x-small);
}

.card-header::part(base) {
    border-color: var(--color-tertiary);
    background-color: var(--color-primary);
}

.card-header::part(header) {
    border-bottom-color: var(--color-purple-secondary);
}

.card-header::part(body) {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-x-small);
}

.card-header h3 {
    margin: 0;
}

.card-header sl-icon-button {
    font-size: var(--sl-font-size-medium);
    color: var(--color-purple-secondary);
}

/* ........................................................................ */

/* || Splide Custom HTML tags and Classes ................................. */

.splide {
    background: var(--color-tertiary);
}

.splide__arrow {
    background: none;
}

.splide__arrow--next svg, .splide__arrow--prev svg {
    fill: var(--color-primary);
}

.splide__pagination__page {
    display: none;
}

.splide__slide > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.slider-progress {
    background: var(--color-primary);
}

.slider-progress-bar {
    background: var(--color-secondary);
    height: 2px;
    transition: width 400ms ease;
    width: 0;
}

/* ........................................................................ */