@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,700;1,500&family=Roboto+Condensed:wght@700&family=Roboto:wght@300;500&display=swap');

body {font-size: 16px; line-height: 1.5em; padding: 0; margin: 0; background: #f5f5f5; color: #111;}
main {width: 100%;}
main>div {width: 75%; margin: auto;}

h1, h2 {font-family: 'Raleway', sans-serif; text-transform: uppercase;}
h1 {font-size: 3em; line-height: 1.5em;}
h2 {font-size: 2em; line-height: 1.5em;}
h3 {font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 2em;}

h2 a {text-decoration: none;;}

p, ul {font-family: 'Roboto', sans-serif; font-size: 1em}

article {margin: 1em 0 1.5em;}
article ul {list-style-type: none;}

header {text-align: center; overflow: auto; margin-bottom: 5em; padding-bottom: 4em; color: #f7f7f7; background: linear-gradient(90deg, rgba(163,47,166,1) 0%, rgba(46,15,103,1) 100%);}
header h1 {display: inline-block; padding: 1em; background: linear-gradient(90deg, rgba(204,22,157,1) 0%, rgba(148,6,127,1) 100%);}
header h1 span {display: inline-block; font-size: 2.8em; line-height: 1.1em; width: 50%; color: #FEF976;}
header p {font-size: 1.8em; font-style: italic; width: 75%; display: inline-block; line-height: 1.3em;}

header a { color: #FEF976; }

.flex {display: flex; flex-wrap: wrap;}

.overview article {flex-grow: 1; width: 27%; margin: 2.5em 3%; padding: 0.5em; box-sizing: border-box; box-shadow: -16px 0px 19px -16px rgba(0, 0, 0 , 0.4); border-radius: 1em; position: relative; background: #fbfbfb; text-transform: uppercase; line-height: 2em; font-size: 1.2em}
.overview h2 {position: absolute; top: -2.2em; font-size: 1em;}
.overview h2 span {position: absolute; left: -0.45em; top: 0.5em; font-size: 9em; font-variant-numeric: lining-nums; z-index: -1; color: #bbb;}

.moderndayjames {margin: 8em auto 12em auto;}
.moderndayjames article div {vertical-align: baseline; column-count: 2; column-fill: balance; column-gap: 2.6em}
.moderndayjames article p {display:inline-block;}
.moderndayjames h2 {text-align: center; text-transform: lowercase; font-weight: normal; line-height: 1.6em;}
.moderndayjames strong {text-transform: capitalize; display: block; font-size: 1.6em;}

.instructions {width: 100%; overflow: auto; margin-top: 6em; padding-bottom: 4em; background: linear-gradient(0deg, rgba(163,47,166,1) 0%, rgba(46,15,103,1) 100%);}
.instructions div {width: 75%; margin: auto;}
.instructions article {text-align: center; margin-bottom: 7em;}
.instructions h2, .resources h2, .resources h3 {color: #f7f7f7; text-transform: capitalize; text-align: center;}
.instructions p {color: #f7f7f7; text-align: center;}
.instructions h2 strong {display: block; font-size: 2em; line-height: 1.4em; letter-spacing: 3px; color: #E91CB7;}
.instructions h2:nth-child(2) strong {display: inline; padding: 0 0.2em; color: #5CA4F9;}
.instructions h2:nth-child(2) strong:last-of-type {color: #FDBF49;}
.instructions div.flex:last-of-type p {line-height: 2em;;}
.instructions div.flex:last-of-type p strong {font-size: 2em; display: block;}

.instructions div:nth-child(2) h2:nth-child(4) strong:first-child {color: #5CA4F9;}
.instructions div:nth-child(2) h2:nth-child(4) strong:last-child {color: #FEF976;}

article.round {flex-grow: 1; width: 27%; margin: 2.5em 3%; background: #f7f7f7; border-radius: 1em; overflow: hidden;}
article.circle h2 {background: #5CA4F9; padding: 1em; margin-top: 0; box-sizing: border-box; text-transform: uppercase; font-size: 1.1em; font-weight: normal; line-height: 1.5em; width: 100%}
.instructions article.circle h2 strong {font-size: 2.4em; color: #f7f7f7}
article.round p {color: #111; padding: 1em;}

.curriculum {margin-top: 10em; width: 100%; box-sizing: border-box;}
.curriculum>div {padding: 1.5em 12.5%; position: relative;}
.curriculum h2 {margin-bottom: 2em; text-align: center; text-transform: capitalize; font-weight: normal;}
.curriculum h2 strong {display: block; font-size: 3em; line-height: 1em;}

.curriculum article {position: relative; z-index: 2; margin: 4em 0 4em 3em; overflow: hidden; border-radius: 1em; box-shadow: 0px 10px 17px 0px rgba(0, 0, 0, 0.25);}
.curriculum article section {width: 33%; float: left; box-sizing: border-box; padding: 0.8em 1.6em;}
.curriculum article section.footer {float: none; clear: both; overflow: auto; width: 100%;}

.curriculum article h2 {font-size: 2.22em; margin-bottom: 1em; padding-left: 0.8em; text-align: left; text-transform: uppercase;}
.curriculum article p:first-child a {font-size: 2em; line-height: 1.4em; font-weight: 500; text-decoration: none;}
.curriculum article h3 {font-size: 1em; font-family: 'Roboto', sans-serif; margin: 0;}
.curriculum article ul {padding: 0; margin-top: 0;}
.curriculum ul ul {padding: 0 0 0.5em 1em;}
.curriculum article p {margin-top: 0;}

.curriculum section.challenge {border-radius: 1em; margin-right: 1em; width: 31%; margin-bottom: 1.5em; padding-top: 2.8em; position: relative;}
section.challenge h3 {position: absolute; top: -1em; left: -1em; padding: 0.8em; letter-spacing: 1px; text-transform: uppercase; border-radius: 2em;}

.one::before, .two::before, .three::before, .four::before, .five::before, .six::before, .seven::before, .eight::before, .nine::before{font-family: 'Roboto', sans-serif; font-weight: 500; position: absolute; z-index: 1; top: 0.7em; left: 6%; font-size: 20em; }

.one {background: #FFF9FF;}
.one::before {content: "1"; color: #DE0D7D;}
.one article {background: #f7f7f7; color: #565656;}
.one h2 {color: #58ACB7;}
.one a {color:  #565656;}
.one article p:first-child a {color: #DE0D7D;}
.one .challenge {background: #FEEFFE;}
.one .challenge h3, .one .footer {background: #018291; color: #f7f7f7}

.two {background: #273251;}
.two::before {content: "2"; color: #7CD4FF;}
.two article {background: #374168; color: #C3C6D2;}
.two h2 {color: #C3C6D2;}
.two a {color:  #C3C6D2;}
.two article p:first-child a {color: #7CD4FF;}
.two .challenge {background: #F5F5F5; color: #0F0F0F;}
.two .challenge h3 {background: #E86B77; color: #F5F5F5}
.two .footer {background: #838FBE; color: #F5F5F5;}

.three {background: #FFF2FB;}
.three::before {content: "3"; color: #55BBAE;}
.three article {background: #f7f7f7; color: #4D4D4D;}
.three h2 {color: #55BBAE;}
.three a {color: #4D4D4D;}
.three article p:first-child a {color: #55BBAE;}
.three .challenge {background: #FFEEF9}
.three .challenge h3, .three .footer {background: #A4927E; color: #F5F5F5;}

.four {background: #2E282A;}
.four::before {content: "4"; color: #F68A63;}
.four article {background: #544747; color: #f7f7f7;}
.four h2 {color: #AEA7A7;}
.four a {color: #f7f7f7;}
.four article p:first-child a {color: #F68A63;}
.four .challenge {background: #F5F5F5; color: #626262;}
.four .challenge h3 {background: #52B0AF; color: #f7f7f7;}
.four .footer { color: #F5F5F5; background: #AC8678;}

.five {background: #EDE7F4;}
.five::before {content: "5"; color: #758EE2;}
.five article {background: #f7f7f7; color: #402D2C;}
.five h2 {color: #A99190;}
.five a {color: #402D2C;}
.five article p:first-child a {color: #758EE2;}
.five .challenge {background: #F5F5F5;}
.five .challenge h3, .five .footer {background: #9E5753; color: #E7D5D4;}

.six {background: #302125;}
.six::before {content: "6"; color: #DD5B7F;}
.six article {background: #44363A; color: #f7f7f7;}
.six h2 {color: #A69FA1;}
.six a {color: #f7f7f7;}
.six article p:first-child a {color: #DD5B7F;}
.six .challenge {background: #EFEFEF; color: #0F0F0F;}
.six .challenge h3 {background: #D89528; color: #F5F5F5;}
.six .footer {background: #AC788B; color: #F5F5F5;}

.seven {background: #F7F8EA;}
.seven::before {content: "7"; color: #C0C662;}
.seven article {background: #f7f7f7; color: #4F4F4F;}
.seven h2 {color: #996477;}
.seven a {color: #4F4F4F;}
.seven article p:first-child a {color: #C0C662;}
.seven .challenge {background: #f5f5f5;}
.seven .challenge h3, .seven .footer {background: #6D213C; color: #f5f5f5;}

.eight {background: #270D3B;}
.eight::before {content: "8"; color: #9687CC;}
.eight article {background: #332B4A; color: #EFEFEF;}
.eight h2 {color: #B7B4BE;}
.eight a {color: #EFEFEF;}
.eight article p:first-child a {color: #9687CC;}
.eight .challenge {background: #EFEFEF; color: #111;}
.eight .challenge h3 {background: #FFD178; color: #270D3B;}
.eight .footer {background: #6D658A; color: #f5f5f5;}

.nine {background: #F0F3FF;}
.nine::before {content: "9"; color: #6B7FD7;}
.nine article {background: #f7f7f7; color: #7b7b7b;}
.nine h2 {color: #A7A7A7;}
.nine a {color: #7b7b7b;}
.nine article p:first-child a {color: #6B7FD7;}
.nine .challenge {background: #F5F5F5; color: #7b7b7b;}
.nine .challenge h3, .nine .footer {background: #E2827C; color: #F5F5F5;}

.resources {margin-top: 4em; padding-bottom: 12em; width: 100%; overflow: auto; box-sizing: border-box; background: linear-gradient(145deg, rgba(251,60,172,1) 0%, rgba(141,73,162,1) 48%, rgba(70,106,187,1) 100%);}
.resources>div {padding: 1.5em;}
.resources h2 {font-size: 6em; margin-top: 1.5em;}
.resources h3 {font-weight: normal; font-size: 3em; margin-top: 2.6em;}

.resources ul {column-count: 3; box-sizing: border-box;}
.resources ul, .resources a {color: #f7f7f7; list-style-type: none; line-height: 1.6em;}
.resources li {padding: 0.8em;}
.resources a {font-size: 1.1em;}
.resources p {text-align: center; color: #f7f7f7;}
.resources div {width: 75%; box-sizing: border-box; border-radius: 1em; margin: auto; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0.2em 0.3em 0 rgba(50, 50, 50, 0.2), inset 0 0 0.5em rgba(255, 255, 255, 0.6);}

footer {padding: 1.4em 12.5%; box-sizing: border-box; background:  rgba(46,15,103,1); overflow: auto; width: 100%;}
footer p, footer a {color: #B7B4BE;}

.banner { width: 100vw; background: #f7f7f7; color: #333; font-size: 0.6em; font-style: normal; display: flex; padding: 0 10vw; box-sizing: border-box; box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.1); }
.banner figure { width: 80px; }
.banner figure img { width: 100%; height: auto; }
.banner p { text-align: left; line-height: 1.6em; }

@media screen and (max-width: 1024px) {
    header h1 span {display: inline; font-size: 1em;}
    .overview article {width: 30%;}
    article.round {width: 44%;}

    .curriculum article section {width: 50%;}
    .curriculum section.challenge {width: 100%; margin: 3em 0 0 0; border-radius: 0;}
    section.challenge h3 {left: 1em; top: -2em; border-radius: 0;}

    .resources h2 {margin-top: 0.5em;}
    .resources h3:first-of-type {margin-top: 0;}
    .resources ul {column-count: 2;}
}

@media screen and (max-width: 700px) {
    h1 {font-size: 2em;}
    header h1 {margin-top: 0;}
    header h1 span {display: inline; font-size: 1em;}

    .overview {display: block;}
    .overview article {width: 100%;}

    .moderndayjames {margin-bottom: 2em;}
    .moderndayjames article div {column-count: 1;}

    .flex {display: block;}

    article.round {width: 100%;}
    .instructions article {margin-top: 4em; margin-bottom: 4em; margin-left: 0;}
    .instructions article.round {margin-top: 2em;}
    .instructions h2 strong {font-size: 1.5em;}

    .curriculum h2 strong {font-size: 1.6em;}

    .curriculum>div {padding: 1em 8%;}
    .curriculum article {margin: 4em 0 4em 0;}
    .curriculum article section {width: 100%;}
    .curriculum article h2 {font-size: 2em; padding: 0 0.8em;}

    .one::before, .two::before, .three::before, .four::before, .five::before, .six::before, .seven::before, .eight::before, .nine::before {left: 3%; top: 0.4em; font-size: 8em; opacity: 0.2;}
    .resources {padding-bottom: 6em;}
    .resources h2 {font-size: 3.5em;}
    .resources p {padding: 0 2em 1.5em;}
    .resources ul {column-count: 1;}

}