:root {
--purple:#5d35b0;
--deep-purple:#35166f;
--yellow:#ffd23f;}
* {
box-sizing:border-box;}
body {
background:#f8f5ff;
color:#2e2445;
font-family:'Nunito',Arial,sans-serif;
min-height:100vh;}
.site-header {
height:78px;
padding-top:22px;}
.brand {
color:var(--deep-purple);
display:inline-block;
font-size:27px;
font-weight:800;
letter-spacing:-.6px;}
.brand:hover,.brand:focus {
color:var(--deep-purple);
text-decoration:none;}
.brand-mark {
align-items:center;
background:var(--yellow);
border-radius:8px;
color:var(--deep-purple);
display:inline-flex;
font-size:17px;
height:30px;
justify-content:center;
margin-right:7px;
transform:rotate(-6deg);
vertical-align:2px;
width:30px;}
.header-login {
color:#6e637c;
font-size:14px;
font-weight:700;
padding-top:8px;}
.header-login a {
color:var(--purple);
font-weight:800;
margin-left:6px;}
.form-wrap {
padding:25px 0 65px;}
.signup-card {
background:#fff;
border-radius:16px;
box-shadow:0 17px 42px rgba(67,41,121,.12);
margin:auto;
max-width:580px;
padding:39px 45px 42px;}
.back-link {
color:var(--purple);
display:inline-block;
font-size:12px;
font-weight:800;
margin-bottom:22px;}
.back-link i {
margin-right:5px;}
.account-label {
align-items:center;
color:var(--purple);
display:flex;
font-size:12px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;}
.account-label span {
align-items:center;
background:#f0e9ff;
border-radius:8px;
display:inline-flex;
font-size:16px;
height:31px;
justify-content:center;
margin-right:9px;
width:31px;}
.signup-card h1 {
color:var(--deep-purple);
font-size:29px;
font-weight:800;
letter-spacing:-.7px;
margin:12px 0 4px;}
.intro {
color:#756b82;
font-size:14px;
margin-bottom:26px;}
.form-group {
margin-bottom:17px;}
.form-group label {
color:#4e415e;
font-size:12px;
font-weight:800;
margin-bottom:6px;}
.form-control {
border:1px solid #e6def4;
border-radius:6px;
box-shadow:none;
font-size:14px;
height:45px;}
.form-control:focus {
border-color:#bba6e5;
box-shadow:0 0 0 2px rgba(93,53,176,.07);}
.password-note {
color:#91869c;
font-size:11px;
margin:-8px 0 17px;}
.location-note {
color:#91869c;
font-size:11px;
line-height:1.45;
margin:7px 0 0;}
.terms {
color:#82778f;
font-size:12px;
line-height:1.55;
margin:4px 0 20px;}
.terms input {
margin-right:7px;
vertical-align:-2px;}
.terms a {
color:var(--purple);
font-weight:800;}
.btn-create {
background:var(--purple);
border:0;
border-radius:7px;
color:#fff;
font-size:14px;
font-weight:800;
height:48px;
width:100%;}
.btn-create:hover,.btn-create:focus {
background:var(--deep-purple);
color:#fff;}
.teacher-note {
color:#80758d;
font-size:12px;
margin:19px 0 0;
text-align:center;}
.teacher-note a {
color:var(--purple);
font-weight:800;}
@media(max-width:767px) {
.site-header {
padding:21px 18px 0;}
.header-login {
font-size:12px;}
.form-wrap {
padding:15px 16px 45px;}
.signup-card {
padding:29px 24px 31px;}
.signup-card h1 {
font-size:26px;}
}