/* Variáveis */
:root {
    /* Cores de Destaque */
    --highlightColor: #6f4bd1;
    --highlightColor2: #235cd4;

    /* Cores */
    --backgroundColor: rgba(33, 26, 78);
    --darkerBackgroundColor: rgba(24, 18, 58, 0.75);
    --mainBackground: rgba(255, 255, 255, 0.75);
    --windowBackground: rgba(49, 40, 100, 0.75);
    --secondaryColor: rgba(50, 40, 116, 0.5);
    --blackBackground: rgba(26, 26, 26, 0.75);

    /* Bordas para as cores */
    --backgroundBorder: rgb(52, 41, 122);
    --darkerBackgroundBorder: rgba(39, 30, 92, 0.5);
    --mainBackgroundBorder: rgba(255, 255, 255, 0.5);
    --windowBackgroundBorder: rgba(77, 61, 167, 0.5);
    --secondaryBorder: rgba(83, 68, 182, 0.5);
    --blackBackgroundBorder: rgba(59, 59, 59, 0.5);

    --defaultShadowColor: rgba(0, 0, 0, 0.25);

    /* Tamanhos */
    --defaultDivPadding: 32px;
    --defaultMargin: 32px;
    --defaultPadding: 20px;
    --buttonBorderRadius: 8px;
    --uiBorderRadius: 12px;
    --borderSize: 3px;
    --defaultGap: 24px;

    /* Miscelânea (eu não sei se essa palavra existe no português.) */
    --defaultShadow: 0px 2px 8px 0px var(--defaultShadowColor);
}

@font-face {
    font-family: 'MainFont';
    src: url('fonts/DepartureMonoNerdFontPropo-Regular.otf');
}

/* Reset e Elementos Globais */
* {
    font-family: 'MainFont';
    color: white;
    line-height: 1.5;
    transition: all 0.5s ease-in-out;
    text-shadow: var(--defaultShadow);
}

html {
    height: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--backgroundColor);
    margin: 0;
    padding: 0;
}

h1 {
    font-weight: bolder;
}

p {
    text-align: justify;
}

hr {
    border: var(--borderSize) solid var(--highlightColor);
    margin: var(--defaultDivPadding) 0;
    border-radius: var(--uiBorderRadius);
}

/* Botões */
button {
    padding: var(--defaultPadding);
    border-radius: var(--buttonBorderRadius);
    border-style: none;
    cursor: pointer;
}

button.alternative {
    outline: 4px solid var(--highlightColor);
    outline-offset: -4px;
    background: none;
    color: var(--highlightColor);
    font-weight: bolder;
}

.navDownload,
.menuIcon,
button {
    background: linear-gradient(90deg, var(--highlightColor), var(--highlightColor2));
    background-size: 200% 100%;
}

a.navDownload {
    border-radius: var(--buttonBorderRadius);
    color: white !important;
    font-weight: medium;
}

button:hover {
    animation: gradientMove 0.5s linear infinite;
    transform: scale(1.05);
}

/* Animações */
.SlideUp {
    animation-name: SlideUp;
    animation-duration: 1s;
}

.SlideDown {
    animation-name: SlideDown;
    animation-duration: 1s;
}

@keyframes SlideDown {
    from {
        transform: translateY(-256px) scale(1);
    }

    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes SlideUp {
    from {
        transform: translateY(256px) scale(1);
    }

    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes bounce {
    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(0) scale(1.05);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* Links */
.link {
    color: var(--highlightColor);
}

/* Estrutura Principal */
div.main {
    display: inline-table;
}

div.textToImage {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* Grupo de Sombras */
button,
.subDiv,
.slides,
.next,
.prev,
.dotsContainer,
.downloadBox,
.mainVideo,
.videoCard {
    box-shadow: var(--defaultShadow);
}

.AeroTheme {
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}

/* Elementos da NavBar */
nav.nav {
    position: fixed;
    top: 8px;
    right: 8px;
    display: flex;
    border-radius: var(--uiBorderRadius);
    padding: 8px;
    z-index: 1000;
    background: rgba(26, 26, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Links */
nav.nav .navBtn {
    cursor: pointer;
    text-decoration: none;
    padding: 8px;
    border-radius: var(--buttonBorderRadius);
    transition: all 0.3s ease;
    margin: 0 4px;
}

/* Hover */
nav.nav .navBtn:hover:not(.navDownload) {
    background: linear-gradient(45deg, var(--highlightColor), var(--highlightColor2));
    color: white;
    transform: translateY(-2px);
}

span {
    color: var(--highlightColor);
    font-weight: bolder;
}

.menuIcon {
    position: fixed;
    top: 16px;
    right: 24px;
    display: none;
    align-self: center;
    font-size: smaller;
    background-color: var(--highlightColor);
    cursor: pointer;
    z-index: 9999;
    -webkit-user-select: none;
    user-select: none;
}

.closebtn {
    display: none;
}

/* Elementos do Footer */
footer {
    background: rgba(26, 26, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 16px;
    text-align: center;
    margin: 12px;
    border-radius: var(--uiBorderRadius);
}

/* Personalizando a ScrollBar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--darkerBackgroundColor);
}

::-webkit-scrollbar-thumb {
    background: var(--highlightColor);
    border-radius: 16px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--highlightColor2);
}

/* Carrossel de Imagens/Videos */
.slideshowContainer {
    position: relative;
    text-align: center;
    max-width: 100%;
}

.slides {
    display: none;
    border-radius: var(--uiBorderRadius);
    background: var(--darkerBackgroundColor);
    border: 1px solid var(--darkerBackgroundBorder);
    z-index: 20;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    padding: 16px;
    transition: 0.75s ease;
    border-radius: var(--uiBorderRadius);
    font-size: x-large;
    height: 25%;
    background-color: var(--secondaryColor);
    align-content: center;
    -webkit-user-select: none;
    user-select: none;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.prev:hover,
.next:hover {
    background-color: var(--highlightColor);
    height: 35%;
}

.dotsContainer {
    width: fit-content;
    margin: -32px auto var(--defaultMargin);
    background: var(--secondaryColor);
    border-radius: var(--uiBorderRadius);
    height: auto;
}

div.text {
    margin: auto;
    width: 75%;
    min-height: 170px;
    font-size: 16px;
    border-radius: 16px;
    flex-shrink: 0;
    text-align: justify;
    text-indent: 0.75cm;
}

.numbertext {
    font-size: 16px;
    font-weight: bold;
    color: var(--highlightColor2);
    -webkit-user-select: none;
    user-select: none;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    background-color: #6f4bd131;
    border-radius: 128px;
    display: inline-block;
    transition: background-color 1s ease;
    padding: 8px;
}

.active {
    background-color: var(--highlightColor);
}

div.dotsContainer:hover {
    transform: scale(1.25);
}

/* Responsividade Geral (Ou tentativa) */
@media (max-width: 900px) {
    .menuIcon {
        display: block;
    }

    nav.nav {
        height: 0px;
        background: rgba(26, 26, 26, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.25);
        transition: 0.75s;
        flex-direction: column;
        justify-content: flex-end;
        width: 95%;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        max-height: auto;
    }

    .nav a {
        padding: 16px;
        color: white !important;
    }

    div.textToImage {
        flex-direction: column;
        align-items: flex-start;
    }

    div.text {
        width: 90%;
    }
}

@media screen and (max-width: 720px) {
    .slideshowContainer {
        max-width: 90%;
    }

    div.text {
        font-size: small;
        min-height: 256px;
        flex-shrink: 0;
        align-content: center;
    }

    img.slideImage {
        max-width: 200%;
        width: 95%;
        align-content: center;
    }

    .dot {
        width: 18px;
    }
}