style.css

@font-face{font-family:"Lato";font-style:normal;font-weight:400;src:url("../fonts/Lato-Regular.ttf")}*,*::before,*::after{box-sizing:border-box}*{margin:0}body{font-family:"Lato",sans-serif;line-height:1.5}.wrapper{display:flex;flex-wrap:wrap}.entry{flex:0 0 100%;max-width:100%;min-height:400px;position:relative}.header{color:#fafafa;background-color:#323133;padding:1.5rem 1rem}@media screen and (min-width: 768px){.header{display:flex;justify-content:space-between;align-items:center}}.header-title{font-size:1.25rem}.header-link{color:#fafafa}#one{--c1: #4cc65f;--c2: #122643;background:radial-gradient(circle at 27px 119px, var(--c1) 2px, transparent 3px),radial-gradient(circle at 69px 79px, var(--c1) 2px, transparent 3px),radial-gradient(circle at 163px 57px, var(--c1) 2px, transparent 3px),radial-gradient(circle at 119px 180px, var(--c1) 4px, transparent 5px),radial-gradient(circle at 33px 69px, var(--c1) 4px, transparent 5px),radial-gradient(circle at 71px 177px, var(--c1) 6px, transparent 7px),radial-gradient(circle at 159px 133px, var(--c1) 6px, transparent 7px),radial-gradient(circle at 183px 23px, var(--c1) 6px, transparent 7px),radial-gradient(circle at 24px 166px, var(--c1) 7px, transparent 8px),radial-gradient(circle at 114px 134px, var(--c1) 7px, transparent 8px),radial-gradient(circle at 82px 38px, var(--c1) 7px, transparent 8px),radial-gradient(circle at 176px 176px, var(--c1) 9px, transparent 10px),radial-gradient(circle at 66px 120px, var(--c1) 9px, transparent 10px),radial-gradient(circle at 180px 94px, var(--c1) 9px, transparent 10px),radial-gradient(circle at 126px 16px, var(--c1) 9px, transparent 10px),radial-gradient(circle at 121px 71px, var(--c1) 14px, transparent 15px),radial-gradient(circle at 25px 25px, var(--c1) 14px, transparent 15px);background-size:200px 200px;background-position:0 0;background-color:var(--c2)}#two{--s: 100px;--c1: #f7ba53;--c2: #490a3d;background:conic-gradient(var(--c2) 12.5%, var(--c1) 12.5% 25%, var(--c2) 25% 37.5%, var(--c1) 37.5% 50%, var(--c2) 50% 62.5%, var(--c1) 62.5% 75%, var(--c2) 75% 87.5%, var(--c1) 87.5%);background-size:var(--s) var(--s)}#three{--c1: #e4491c;--c2: #003246;--c3: #fef0d6;background:radial-gradient(circle at 165px 165px, var(--c2) 20px, transparent 21px),radial-gradient(circle at 195px 165px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 165px 195px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 135px 165px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 165px 135px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 55px 165px, var(--c3) 24px, transparent 25px),radial-gradient(circle at 81px 139px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 81px 191px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 29px 191px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 29px 139px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 165px 55px, var(--c3) 24px, transparent 25px),radial-gradient(circle at 191px 29px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 191px 81px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 139px 81px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 139px 29px, var(--c2) 24px, transparent 25px),radial-gradient(circle at 55px 55px, var(--c2) 20px, transparent 21px),radial-gradient(circle at 85px 55px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 55px 85px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 25px 55px, var(--c3) 20px, transparent 21px),radial-gradient(circle at 55px 25px, var(--c3) 20px, transparent 21px);background-color:var(--c1);background-size:220px 220px;min-height:440px}#four{--c1: #2e236c;--c2: #c8acd6;background:radial-gradient(circle at 75% 75%, var(--c1) 14px, transparent 15px),radial-gradient(circle at 25% 75%, var(--c2) 14px, transparent 15px),radial-gradient(circle at 75% 25%, var(--c2) 14px, transparent 15px),radial-gradient(circle at 25% 25%, var(--c1) 14px, transparent 15px),conic-gradient(var(--c1) 25%, var(--c2) 25% 50%, var(--c1) 50% 75%, var(--c2) 75%);background-position:0 0;background-size:100px 100px;background-color:var(--c2)}#five{--c1: #d9480f;--c2: #ffe7d5;background:radial-gradient(circle at 44px 44px, var(--c1) 3px, transparent 4px),radial-gradient(circle at 20px 20px, var(--c1) 3px, transparent 4px);background-position:0 0;background-size:48px 48px;background-color:var(--c2)}#six{--c1: #96d6e0;--c2: #e7562e;--c3: #1473b5;--c4: #fff;--th: 100px;--tw: 50px;--lh: 5px;--ps: 0 0 / var(--tw) var(--th);--space: calc(var(--th)/6);background:conic-gradient(from -45deg at 50% calc(var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% var(--space), var(--c1) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 1 + var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 1 + var(--space)), var(--c3) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 2 + var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 2 + var(--space)), var(--c3) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 3 + var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 3 + var(--space)), var(--c2) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 4 + var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 4 + var(--space)), var(--c1) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 5 + var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 5 + var(--space)), var(--c2) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 6 + var(--space) - var(--lh)), var(--c4) 0 90deg, transparent 0 100%) var(--ps),conic-gradient(from -45deg at 50% calc(var(--space) * 6 + var(--space)), var(--c1) 0 90deg, transparent 0 100%) var(--ps)}#seven{--c1: #086a5f;--c2: #fefae0;--s: 10px;--s-00: calc(var(--s) * 00);--s-01: calc(var(--s) * 01);--s-02: calc(var(--s) * 02);--s-03: calc(var(--s) * 03);--s-04: calc(var(--s) * 04);--s-05: calc(var(--s) * 05);--s-06: calc(var(--s) * 06);--s-07: calc(var(--s) * 07);--s-08: calc(var(--s) * 08);--s-09: calc(var(--s) * 09);--s-10: calc(var(--s) * 10);--s-11: calc(var(--s) * 11);--s-12: calc(var(--s) * 12);--s-13: calc(var(--s) * 13);--s-14: calc(var(--s) * 14);--layer-01: var(--s-03) var(--s-03) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-01) var(--s-01), var(--c1) 90deg, #fff0 90deg), var(--s-02) var(--s-02) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-03) var(--s-03), var(--c2) 90deg, #fff0 90deg), var(--s-01) var(--s-01) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-05) var(--s-05), var(--c1) 90deg, #fff0 90deg), var(--s-00) var(--s-00) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-07) var(--s-07), var(--c2) 90deg, #fff0 90deg);--layer-02: var(--s-03) var(--s-10) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-01) var(--s-01), var(--c2) 90deg, #fff0 90deg), var(--s-02) var(--s-09) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-03) var(--s-03), var(--c1) 90deg, #fff0 90deg), var(--s-01) var(--s-08) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-05) var(--s-05), var(--c2) 90deg, #fff0 90deg), var(--s-00) var(--s-07) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-07) var(--s-07), var(--c1) 90deg, #fff0 90deg);--layer-03: var(--s-10) var(--s-03) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-01) var(--s-01), var(--c2) 90deg, #fff0 90deg), var(--s-09) var(--s-02) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-03) var(--s-03), var(--c1) 90deg, #fff0 90deg), var(--s-08) var(--s-01) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-05) var(--s-05), var(--c2) 90deg, #fff0 90deg), var(--s-07) var(--s-00) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-07) var(--s-07), var(--c1) 90deg, #fff0 90deg);--layer-04: var(--s-10) var(--s-10) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-01) var(--s-01), var(--c1) 90deg, #fff0 90deg), var(--s-09) var(--s-09) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-03) var(--s-03), var(--c2) 90deg, #fff0 90deg), var(--s-08) var(--s-08) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-05) var(--s-05), var(--c1) 90deg, #fff0 90deg), var(--s-07) var(--s-07) / var(--s-14) var(--s-14) conic-gradient(from 270deg at var(--s-07) var(--s-07), var(--c2) 90deg, #fff0 90deg);background:var(--layer-04),var(--layer-03),var(--layer-02),var(--layer-01);min-height:420px}#eight{--c1: #212529;background:repeating-linear-gradient(-45deg, transparent 0 10px, var(--c1) 10px 15px)}#nine{--c1: #172f5c;--c2: #9edae7;--c3: transparent;--circle: var(--c3) 6px, var(--c2) 7px 8px, var(--c3) 9px 14px, var(--c2) 15px 16px, var(--c3) 17px 22px, var(--c2) 23px 24px, transparent 25px;background:radial-gradient(circle at 96px 56px, var(--circle)),radial-gradient(circle at 96px 0, var(--circle)),radial-gradient(circle at 48px 28px, var(--circle)),radial-gradient(circle at 0 56px, var(--circle)),radial-gradient(circle at 0 0, var(--circle));background-size:96px 56px;background-color:var(--c1);min-height:392px}/*# sourceMappingURL=style.css.map */