@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;500;600;700;800;900&family=Open+Sans:wght@300;500;600;700;800&family=Heebo:wght@100;200;300;500;600;700;800;900&display=swap");
body, h1, h2, h3, h4, h5, h6, p{
    all: unset;
}
:root{
    font-size: 8px;    
    --dark-blue: 19, 38, 56;
    --mid-blue: 19, 38, 56;
    
    /*Brand Variables*/
    
    /*Colors*/
    --primary-color: 0, 111, 159;
    --accent-color: 197, 32, 51;
    --shades: 238, 238, 238;
    
    /*Typography*/
    --primary-font: "Open Sans";
    --secondary-font: "Heebo";
}
*{
    box-sizing: border-box;
}
body{
    display: block;
    font-size: 2rem;
    line-height: 1.3;
    height: 100vh;
    width: 100vw;
    background: rgb(var(--dark-blue));
    overflow: clip;
    font-family: Inter;
    main{
        width: 100%;
        height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        section{
            box-shadow: 0.5rem 0.5rem 1rem #00000080;
            position: relative;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            margin: auto;
            width: 11in;
            height: 8.5in;
            aspect-ratio:1.294 / 1;
            overflow: clip;
            background-color: white;
            padding: 6rem 8rem;
            background-image:url(bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            break-after: page;
            &:after{
                content:'';
                position: absolute;
                inset:0;
                width: 100%
                height: 100%;
                background-image:url(frame.webp);
                background-repeat: no-repeat;
                background-size: cover;
            }
            .header{
                display: grid;
                grid-template-columns: 1fr 2fr 1fr;
                font-size: 3rem;
                gap: 4rem;
                z-index: 2;
                .brand-title{
                    border-bottom: 2px solid rgb(var(--dark-blue));
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                }
                .guide-title{
                    font-size: 6rem;
                    font-weight: 700;
                }
            }
            .content{
                flex: 1;
                display: flex;
                z-index: 2;
                gap: 4rem;
                
                .column{
                    display: flex;
                    flex-basis: 100%;
                    flex-direction: column;
                    justify-content: center;
                    h1{
                        font-size: 9rem;
                        font-weight: 900;
                    }
                    .color-swatches{
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        grid-template-rows: 1fr 1fr;
                        gap: 2rem;
                        .swatch{
                            display: flex;
                            aspect-ratio: 1 / 1;
                            flex-basis: 100%;
                            gap: 1rem;
                            .color-main{
                                flex: 1;
                                height: 100%;
                                display: flex;
                                align-items:flex-end;
                                padding: 2rem;
                                .color-code{
                                    text-transform: uppercase;
                                    font-weight: 600;
                                }
                            }
                            .color-variations{
                                display: grid;
                                grid-template-columns: 1fr;
                                grid-template-rows: repeat(4, 1fr);
                                gap: 1rem;
                                .color-block{
                                    aspect-ratio: 1 / 1;
                                    position: relative;
                                }
                                .color-block:after{
                                    content:'';
                                    position: absolute;
                                    inset: 0;
                                }
                                .color-40:after{
                                    background: rgba(0,0,0,0.4);
                                }
                                .color-20:after{
                                    background: rgba(0,0,0,0.2);
                                }
                                .color-20-l:after{
                                    background: rgba(255,255,255,0.2);
                                }
                                .color-40-l:after{
                                    background: rgba(255,255,255,0.4);
                                }
                                .shade-10:after{
                                    background: rgba(0,0,0,0.1);
                                }
                                .shade-30:after{
                                    background: rgba(0,0,0,0.3);
                                }
                                .shade-60:after{
                                    background: rgba(0,0,0,0.6);
                                }
                                .shade-90:after{
                                    background: rgba(0,0,0,0.9);
                                }
                            }
                        }
                        #swatch1{
                            .color-main, .color-block{
                                background: rgb(var(--primary-color));
                            }
                        }
                        #swatch2{
                            .color-main, .color-block{
                                background: rgb(var(--accent-color));
                            }
                        }
                        #swatch3{
                            grid-column: span 2;
                            aspect-ratio: unset;
                            .color-main, .color-block{
                                background: rgb(var(--shades));
                            }
                        }
                    }
                }
                #color-wheel-container{
                    #color-wheel{
                        position: absolute;
                        height: 100%;
                        aspect-ratio: 1 / 1;
                        inset:0;
                        margin-inline: auto 0;
                        .color-section{
                            position: absolute;
                            inset:0 -50% 0 50%;
                            border-color: transparent;
                            border-style: solid;
                            border-width: 150px;
                            border-radius: 50%;
                        }
                        #primary-color{
                            transform: rotate(180deg);
                            border-bottom-color: rgb(var(--primary-color));
                        }
                        #accent-color{
                            transform: rotate(90deg);
                            border-bottom-color: rgb(var(--accent-color));
                        }
                        #shade-light{
                            transform: rotate(45deg);
                            border-bottom-color: rgb(var(--shades));
                        }
                        #shade-dark{
                            transform: rotate(0deg);
                            border-bottom-color: rgba(var(--shades), 1);
                            filter:brightness(9.5%);
                        }
                    }
                }
            }
            .footer{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                font-size: 3rem;
                gap: 2rem;
                z-index: 2;
                img{
                    width:100%;
                }
            }
        }
        #cover-page{
            .column{
                h1{
                    color: rgb(var(--dark-blue));
                }
                img{
                    width: 100%;
                    max-height: 150px;
                    width: auto;
                    object-fit: contain;
                    object-position: left;
                }
            }
        }
        #typography-page{
            .column{
                gap: 1.5rem;
                background-color: rgb(var(--shades));
                padding: 2rem;
                border-radius: 2rem;
                color: rgb(var(--primary-color));
                line-height: 1;
                h1{
                    font-size: 72px;
                    font-weight: 700;
                    font-family: Open Sans;
                }
                h2{
                    font-size: 56px;
                    font-weight: 700;
                    font-family: Open Sans;
                }
                h3{
                    font-size: 48px;
                    font-weight: 600;
                    font-family: Open Sans;
                }
                h4{
                    font-size: 40px;
                    font-weight: 600;
                    font-family: Open Sans;
                }
                h5{
                    font-size: 32px;
                    font-weight: 600;
                    font-family: Open Sans;
                }
                h6{
                    font-size: 24px;
                    font-weight: 600;
                    font-family: Open Sans;
                }
                p{
                    font-size: 16px;
                    font-weight: 400;
                    font-family: Heebo;
                }
                a{
                    font-size: 16px;
                    font-weight: 500;
                    font-family: Heebo;
                    text-decoration: underline;
                    color: rgb(var(--accent-color));
                }
                .font-details{
                    font-size: 12px;
                    line-height:1;
                    font-style: italic;
                    font-weight: 200;
                    margin-top: 0.7rem;
                    font-family: Inter;
                }
            }
            .alt-typography{
                color: rgb(var(--shades));
                background-color: rgb(var(--primary-color));
                a{
                    color: rgb(var(--shades));
                }
            }
        }
        #elements-page{
            .column{
                gap: 3rem;
                h2{
                    font-weight: 700;
                    font-size: 5rem;
                    color: rgb(var(--dark-blue));
                    position: relative;
                    &:after{
                        content: '';
                        display: block;
                        position: relative;
                        width: 13rem;
                        height: 2px;
                        background-color: rgb(var(--dark-blue));
                    }
                }
                .buttons{
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;
                    width: max-content;
                    .action-wrapper{
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr;
                        gap: 2rem;
                        align-items: center;
                    }
                }
                
            }
        }
        /*
* Action Elements
*/
.action-button{
    padding: 1rem 3rem;
    border-radius: 2rem;
    position: relative;
    overflow: clip;
    text-transform: uppercase;
    font-weight: 600;
    font-family: Open Sans;
    &:not(.hovered):after{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(#00000000, #00000033);
        z-index: 0;
    }
}
#primary{
    border: 2px solid rgb(var(--accent-color));
    background: rgb(var(--accent-color));
    color: #fff;
    &.hovered{
        background: transparent;
        color: rgb(var(--accent-color));
    }
}
#secondary{
    border: 2px solid rgb(var(--primary-color));
    background: rgb(var(--primary-color));
    color: #fff;
    &.hovered{
        background: transparent;
        color: rgb(var(--primary-color));
    }
}

.loop-items{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    .loop{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        .listing{
            background: rgb(var(--shades));
            padding: 4rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            font-family: Heebo;
            border-radius: 4rem;
            img{
                order: 1;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            & > div{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 1rem;
                & > div{
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    h3{
                        font-size: 48px;
                        font-weight: 600;
                        font-family: Open Sans;
                    }
                }
            }
        }
    }
}    }
}
@media print{
    @page{
        size: 11in 8.5in;
        margin: 0mm;
    }
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body{
        overflow:initial;
        main{
            overflow: initial;
            gap: 0;
            section{
                <!--max-height: 8.4in;-->
                width: 100%;
                margin: unset;
            }
        }
    }
}