:root{
    --bkgd:#002E63;
    --color:#DDD;
    --theme:#fde400;
}
*{box-sizing:border-box;}
html{
    background:var(--bkgd);
    body{
        color:var(--color);
        height:max-content;
        font-family:Arial;
        font-size:1rem;
        margin:0;
        min-height:100vh;
        width:100vw;
        main{
            display:flex;
            flex-direction:column;
            justify-content:center;
            width:100%;
            section{
                align-items:center;
                display:flex;
                flex-direction:column;
                justify-content:center;
                height:max-content;
                &:first-child{
                    padding:20px;
                    div[list]{
                        align-items:flex-start;
                        display:flex;
                        flex-direction:column;
                        margin-top:20px;
                        max-width:442px;
                        div{
                            display: flex;
                            flex-direction: row;
                            align-items: flex-start;
                            justify-content: center;
                            margin-bottom:10px;
                            width:100%;
                            span{
                                height:max-content;
                                padding:0 0 0 2px;
                                /* line-height:40px; */
                                width:100%;
                            }
                            x{
                                height:100%;
                                margin-top:2px;
                                text-align:center;
                                /* width:20px; */
                                svg{
                                    fill:var(--theme);
                                    height:1rem;
                                    width:1rem;
                                }
                            }
                        }
                    }
                    h2{
                        margin-top:40px;
                    }
                }
                &:last-child{
                    padding:20px;
                    icon{
                        margin:0 0 40px;
                        svg{fill:var(--theme);}
                    }
                }
                ciya{
                    color:var(--theme);
                    font-weight:bold;
                }
                form{
                    align-items:center;
                    display:flex;
                    flex-direction:column;
                    gap:20px;
                    margin:40px 0 40vh 0;
                    max-width:400px;
                    width:100%;
                    button{
                        height:40px;
                        background:var(--theme);
                        border:0;
                        color:#111111;
                        margin-top:20px;
                        width:100%;
                    }
                    label{
                        /* height:90px; */
                        max-width:100%;
                        width:100%;
                        div{
                            font-size:14px;
                            height:30px;
                            line-height:30px;
                            width:100%;
                        }
                        .month{
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            total{
                                display:inline-block;
                                margin-left:auto;
                            }
                        }
                        input{
                            background:var(--color);
                            border:0;
                            color:#111;
                            height:40px;
                            outline:0;
                            padding:0 8px;
                            width:100%;
                            &[type='range']{
                                accent-color:var(--theme);
                            }
                        }
                    }
                    thanks{
                        text-align:center;
                        h3{
                            font-size:20px;
                            margin-bottom:20px;
                        }
                        div{
                            width:70%;
                            margin:0 15%;
                        }
                    }
                }
                h1,h2,h3{
                    margin:0;
                    padding:0;
                }
                h2{font-size:16px;}
                h3{font-size:20px;}
                icon{
                    height:40px;
                    width:40px;
                    svg{
                        height:40px;
                        fill:var(--color);
                        width:40px;
                    }
                }
                p{
                    font-size:1rem;
                    line-height:1.5rem;
                    max-width:424px;
                }
                top{
                    align-items:center;
                    display:flex;
                    flex-direction:row;
                    gap:20px;
                    height:60px;
                    justify-content:center;
                    margin:40px 0 40px;
                    width:100%;
                }
                wide{
                    svg{
                        fill:var(--color);
                    }
                }
            }
        }
    }
}