@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap');

:root {
  /* colors */
  --purple: #bd14c6; /*8200c4*/
  --dark-purple: #64009e;
  --grey: #f5f5f5;
  --darker-grey: #e8e8e8;
  --darkest-grey: #cccccc;
  --black: #000000;
  --white: #ffffff;
  --error: #ff0000;

  /* heights */
  --header-height: 80px;
  --footer-height: 200px;

  /* fonts */
  --source-sans: 'Source Sans Pro', sans-serif;

  /* spacings */
  --spacing-1: 5px;
  --spacing-2: 10px;
  --spacing-3: 20px;
  --spacing-4: 100px;
  --spacing-5: 20vw;

  /* widths */
  --width-sm: 60vw;
  --width-med: 80vw;
  --width-full: 100vw;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    font-family: var(--source-sans);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100vw;
  height: var(--header-height);

  padding: 0 var(--spacing-4);
}
main {
  width: 100vw;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
.main-min {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
section {
  width: 100%;
  min-height: 400px;

  padding: var(--spacing-1) var(--spacing-4);
}
footer {
  width: 100vw;
  height: var(--footer-height);

  background-color: var(--grey);
}

/* form */
.login-form {
  width: 500px;

  padding: var(--spacing-3);
  
}
.login-form form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.field {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--spacing-2) 0;
}
.field-divider {
  display: flex;
  justify-content: center;
  align-items: center;
}
.field-divider-line {
  width: 100px;
  height: 1px;
  
  background-color: var(--darker-grey);
}
.field-divider-text {
  margin: 0 var(--spacing-2);
}
label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--darkest-grey);
}
input[type="text"], input[type="password"], input[type="email"] {
  display: block;
  padding: var(--spacing-2);

  border: 1px solid var(--darkest-grey);
  border-radius: 5px;
}
.field > a {
  display: block;
  width: 100%;
}

.field.error input {
  border-color: var(--error);
}
.field .error-text, .errors {
  font-size: 14px;
  color: var(--error);
  margin: 10px 0px 0px 0px;
}

/* spacing */
.row, .row-between {
  display: flex;
  align-items: center;
}
.row-between { 
  justify-content: space-between;
}
.row-wrap {
  flex-wrap: wrap;
}
.row-title {
  font-size: 20px;
  font-weight: bold;
}
.col {

}
.col-valign {
  display: flex;
  align-items: center;
  justify-content: center;
}
.col > a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: var(--spacing-2);
}
.col > a.block-link:hover, .col > a.block-link.selected {
  background: var(--darker-grey);
}

/* button */
button {
  padding: var(--spacing-2) var(--spacing-3);

  background-color: none;

  border: none;
  border-radius: 10px;

  font-size: 16px;
  font-weight: 500;

  cursor: pointer;
}
.action-button {
  padding: var(--spacing-2) 0;
}
.field > a button {
  width: 100%;
}

.logo {
  display: flex;
}
.logo-icon {
  padding-right: var(--spacing-1);
}
.logo-text {
  color: var(--purple);
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
}

/* backgrounds */
.bg-purple {
  background-color: var(--purple);

  color: var(--white);
}
.bg-dark-purple {
  background-color: var(--dark-purple);
}
.bg-grey {
  background-color: var(--grey);
}
.bg-darker-grey {
  background-color: var(--darker-grey);
}
.bg-white {
  background-color: var(--white);
}

/* border */
.border-grey {
  border: 1px solid var(--grey);
  border-radius: 5px;
}
.border-darker-grey {
  border: 1px solid var(--darker-grey);
  border-radius: 5px;
}
.border-darkest-grey {
  border: 1px solid var(--darkest-grey);
  border-radius: 5px;
}

/* text color */
.text-white {
  color: var(--white);
}

/* text style */
.text-italic {
  font-style: italic;
}

.hero h1 {
  margin: 0;
  padding: 0;

  font-size: 70px;
  font-weight: 500;
}
.hero .subtitle {
  font-size: 20px;
}

.link {
  margin: var(--spacing-2) 0;
}

/* width */
.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-100 {
  width: 100%;
}

/* height */
.h-100 {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* padding */
.p-l-2 {
  padding-left: var(--spacing-2);
}
.p-r-2 {
  padding-right: var(--spacing-2);
}
.p-t-2 {
  padding-top: var(--spacing-2);
}
.p-b-2 {
  padding-bottom: var(--spacing-2);
}
.p-l-4 {
  padding-left: var(--spacing-4);
}
.p-r-4 {
  padding-right: var(--spacing-4);
}
.p-t-4 {
  padding-top: var(--spacing-4);
}
.p-b-4 {
  padding-bottom: var(--spacing-4);
}

@media only screen and (min-width: 1400px) {
  header {
    padding: 0 var(--spacing-5);
  }
  section {
    padding: 0 var(--spacing-5);
  }
}