@layer theme {
    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }
    }
}
@layer addon {
    
}
@layer addon {
    
    .title {
        color: var(--color2);
        font-size: var(--xl-fontsize);
        line-height: 0.85;
        font-style: italic;
        text-transform: uppercase;
        -webkit-hyphens: none;
                hyphens: none;
        font-weight: 400;
        @media (max-width: 56em) {
            font-size: calc(var(--l-fontsize) - 0.25rem);
        }
        @media (--max-fablet) {
            font-size: calc(var(--l-fontsize) - 0.25rem);
        }
    }

    .container {
        .inner {
            gap: calc(var(--gutter) * 2);
            .intro {
                .title + .content {
                    margin-top: calc(var(--gutter) * 2);
                }
            }
        }
    }
            
}
@layer addon {
    body {
        font-size: var(--s-fontsize);
        line-height: var(--s-lineheight);
        background-color: var(--color1);
        background-image: url(../images/rails-background.png);
        background-position: top center;
        background-repeat: no-repeat;
    }
    section {
        background-color: initial;
        overflow: hidden;
    }

    .themeColor1 + .themeColor1 {
        padding-top: var(--section);
    }
}
@layer addon {
    :root {
        --color1:    #5F00BA;
        --color2:    #FFFB00;
        --color3:    #440086;

        --color-grey1: #CED7E4;
        --color-grey1-off: #EEF2F8;

        --color-grey2: #486284;

        --color-dark: #1A202C;
        --color-dark-off: #767980;

        --color-light: #fff;
        
        /*DEFAULT FONT*/
        --font-basic:   'Chakra Petch', sans-serif;
        --font-sub:     'Changa One',sans-serif;
        --font-color:   var(--color-light);

        --s-lineheight: 1.2;

        --border-radius: 16px;
    }

    @media (max-width: 56em) {
        :root {
            --section:				64px;
        }
    }

    @media (--max-fablet) {
        :root {
            --section:				64px;
        }
    }
    @media (min-width: 56em) {
        :root {
            --section:				100px;
        }
    }
    @media (--min-fablet) {
        :root {
            --section:				100px;
        }
    }
    @media (min-width: 90em) {
        :root {
            --section:				100px;
        }
    }
    @media (--min-desktop) {
        :root {
            --section:				100px;
        }
    }

}
@layer addon {
    .button {
        gap: 0;
        font-size: var(--s-fontsize);
        font-weight: 600;

        @media (max-width: 56em) {
            width: 100%;
        }

        @media (--max-fablet) {
            width: 100%;
        }

        .icon {
            width: 0;
            margin-right: 0;
            opacity: 0;
            transition: var(--transition);
        }

        &:hover {
            @media (hover: hover) {
                .icon {
                    width: 24px;
                    margin-right: 8px;
                    opacity: 1;
                }
            }
        }

        &.outline {
            box-shadow: inset 0 0 0 2px var(--color2);
            background-color: var(--color1);
            color: var(--color2);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color1);
                    color: var(--color2);
                }
            }
        }
        &.primary {
            color: var(--color1);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color2);
                    color: var(--color1);
                }
            }
        }
    }
}
@layer addon {
    .homepage {
        header {
            display: none;
        }
    }
    .homepage:not(.hasCover) {
        main {
            margin-top: 0;
        }
    }
}
@layer addon {
    footer {
        border-top: 1px solid var(--color2);
        background-color: initial;
        .logo {
            svg {
                width: initial;
                @media (max-width: 56em) {
                    width: 250px;
                }
                @media (--max-fablet) {
                    width: 250px;
                }
            }
        }
        .footerRight {
            gap: var(--padding);
            font-size: var(--s-fontsize);
            @media (max-width: 56em) {
                justify-content: center;
                flex-direction: column-reverse;
                font-size: var(--fontsize);
            }
            @media (--max-fablet) {
                justify-content: center;
                flex-direction: column-reverse;
                font-size: var(--fontsize);
            }
            .copyright {
                text-align: center;
            }
            a {
                color: var(--color2);
                &:hover {
                    @media (hover: hover) {
                        color: var(--color-light);
                    }
                }
            }
        }
    }
}
@layer addon {
    section:first-of-type {
        min-height: 100vh;
    }
    
}
html { 
    scroll-behavior: smooth;
}