@font-face {
    font-family: ThirdStreet;
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/ThirdStreetBold-Latin.woff2) format("woff2");
}

:root {
    --color-bg: #ffffff;
    --color-primary: #9e45b4;
    --color-secondary: #161616;
    --color-socials: #961284;
    --color-borders: #0e0d0d;
    --color-gradient-1: #9714a3;
    --color-gradient-2: #5c0783;
    --color-gradient-3: #490696;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-primary);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

#google-map {
    padding-bottom: 50%;
    position: relative;
}

#google-map iframe {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

svg {
    pointer-events: none;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
}

h1 h2 article p {
    font: monospace;
    pointer-events: none;
    ;
    justify-content: left;
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-container {
    width: 60vw;
}

.section-header {
    font-family: monospace;
    font-weight: 100;
    font-size: 4.5em;
    background: linear-gradient(to right,
            var(--color-socials),
            var(--color-primary),
            var(--color-primary));
    background-size: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-shadow: 0 0 6px var(--color-socials); */
    text-transform: uppercase;
    text-decoration: none;
    padding: 0;
    margin: 0 0 0.5em 0;
    width: 100%;
}

.li {
    list-style: none;
}

.section-article {
    font-weight: 600;
    font-size: 1.2em;
    width: 100%;
    padding: 0;
    margin: 0;
}

.section-article:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7); /* Sombra mais intensa no hover */
}

#sidenav * {
    padding: 0;
}

#sidenav {
    position: fixed;
    left: auto;
    height: 94vh;
    width: 7vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1;
}

#page-logo {
    width: 9em;
    position: sticky;
    height: auto;
    aspect-ratio: 1;
    overflow: auto;
    margin: 0;
    margin-left: 6em;
    border-radius: 50%;
    transition: box-shadow 0.3s ease; /* Transição suave para efeitos */
    box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);
}

#page-logo img {
    width: 7em;
    transition: all linear .5s
}

#page-logo.fixed-logo img {
    width: 5em;
}

#background-image {
    width: 50em;
    height: auto;
}

#background-image:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7);
}

#page-logo:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7);
}

#navlinks {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 2;
    width: 100%;
}

#navlinks a {
    flex-direction: row;
    display: flex;
    justify-content: center;
}

.sidenav-button {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--color-primary);
    will-change: opacity;
    opacity: 0.3;
    margin: 0.7em 0;
}

.active-menu {
    opacity: 0.8;
}

.glowing-title {
    font-family: ThirdStreet;
    font-size: 7em;
    background: linear-gradient(to right,
            var(--color-gradient-1),
            var(--color-gradient-2),
            var(--color-gradient-3),
            var(--color-gradient-1));
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    /* text-shadow: 0 0 6px var(--color-primary); */
    margin: 0;
    padding: 0;
}

.social-icon {
    color: var(--color-primary);
    height: 2em;
    opacity: 0.6;
    transition: all 0.8s ease;
}

#socials-container {
    display: flex;
    flex-direction: row;
    margin-top: 0em;
    gap: 1.5em;
    font-size: 25px;
    font-weight: bolder;
}

.about{}
.about:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7);
}

#socials-container a:hover>.social-icon {
    opacity: 1;
    color: var(--color-socials);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7);
}

.scrolling-container {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-auto-rows: 1fr;
    overscroll-behavior-inline: contain;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.scrolling-container>a {
    height: 100%;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
}

.snaps-inline>* {
    scroll-snap-align: start;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-secondary);
    border-radius: 12px;
    padding: 2em;
    margin-bottom: 2em;
}

.card h2 {
    padding: 0 0 0.5em 0;
    margin: 0;
    color: var(--color-socials);
    font-size: 1.5em;
    word-wrap: break-word;
}

.card article {
    color: var(--color-primary);
    padding: 0;
    margin: 0;
    font-size: 1em;
    font-weight: 700;
}

footer {
  background-color: #6A0DAD;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  position: relative;
  bottom: 0;
  width: 100%;
}

@media screen and (orientation: portrait) {
    .section{
        height: 60em;
        align-items: self-end;
    }

    body {
        margin: 1em;
        overflow-x: hidden;
    }

    #background-image {
        width: 20em;
        height: auto;
        /* background-image: url('escola_fiore_vert.webp'); */
    }

    #page-logo img {
        width: 7em;
        transition: all linear .5s
    }

    .glowing-title {
        width: 60vw;
        word-wrap: break-word;
        font-size: 3em;
        text-orientation: upright;
    }

    #sidenav {
        margin: 0.5em;
    }

    .section-container {
        width: 85vw;
    }

    .section-header {
        font-size: min(1em, 10vw);
    }

    #socials-container {
        display: inline-block;
        box-sizing: border-box;
    }

    #socials-container a {
        margin-right: 0.6em;
        font-size: 15px;
    }

    .social-icon {
        margin-top: 0.8em;
    }
}