* {
  box-sizing: border-box;
}

body{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  color: #002C59;
}

.grid {
  display: grid;
}

.grid.four-column{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  padding: 0;
}

.mainlogo {
  grid-column: 1;
  height: auto;
  max-height: 80%;
  align-self: center;
  justify-self: center;
}

.mainlogo img {
  max-height: 7rem;
}

#signinhead {
  grid-column: 4;
  align-self: center;
  justify-self: center;
}

.signinbutton {
  background-color: #ffffff;
  color: #D4124F;
  text-decoration: none;
  font-weight: bolder;
  font-size: 1.2rem;
  padding: 1.1rem;
  padding-left: 6rem;
  padding-right: 6rem;
}

header {
  background-color: #002C59;
  height: 8.5rem; 
}


/* Hero Section*/

.hero {
  color: #002C59;
  font-weight: bolder;
}

.herointro {
  font-size: 2.7rem;
  position: absolute;
  max-width: 78rem;
  text-align: right;
  line-height: 4rem;
  z-index: 2;
  margin-top: 1.6rem;
  margin-left: 15rem;
}

/* zoomin n croppin with css because lazy lol */
img.hero1 {
  width: 100%;
  height: 235%;
  object-fit: cover;
  position: relative;
  bottom: 48%;
  z-index: 1;
}

.imagebin {
  display: flex;
  margin: auto;
  width: 84rem;
  height: 37rem;
  overflow: hidden;
  margin-top: -1rem;
  margin-bottom: 3rem;
}

.cta {
  padding: 1.8rem;
  padding-left: 3rem;
  padding-right: 3rem;
  color: #ffffff;
  background-color: #D4124F;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  font-weight: bolder;
  font-size: 1.4rem;
  box-shadow: 2px 4px 4px 0px #787878;
  
}

.cta.guide {
  z-index: 2;
  position: relative;
  transform: translate(66.5rem, 15rem);
}


/* Intro Section */
h3{
  text-align: center;
  font-size: 2rem;
}

.intro{
  color: #002C59;
}


.grid.three-column {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: .1fr .1fr .1fr;
  justify-items: center;
  align-items: start;
  margin-bottom: 4rem;
  margin-right: 2.5rem;
}

.steps {
  grid-column: auto;
}

.truck {
  max-height: 10rem;
  align-items: end;
}

.stepsh {
  grid-column: auto;
  grid-row: 2;
  font-size: 1.2rem;
  text-align: center;
  margin: 0%;
}

.stepsp {
  grid-column: auto;
  grid-row: 3;
  text-align: center;
  padding-left: 5rem;
  padding-right: 5rem;
  margin-top: 1rem;

}

.cta.intro {
  color: #ffffff;
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 20rem;
}


/* Testimonials */
.testimonials {
  text-align: center;
  color: #002C59;
  margin-top: 5rem;
  padding-left: 30rem;
  padding-right: 30rem;
}

hr{
  color: #002C59;
  margin: 3rem;
}


/* Footer */
footer {
  background-color: #002C59;
  height: 22rem;
  padding: 3.5rem;
  margin-bottom: 0;
  margin-top: 4rem;
  color: #ffffff;
}

.address {
  grid-column: 1;
  justify-self: center;
  align-self: start;
}

.newsletter{
  grid-column: 4;
  justify-self: center;
  align-self: center;
}

#newsbutton {
  background-color: #ffffff;
  border: none;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  width: 6rem;
  height: 3rem;
  text-align: center;
  color: #002C59;
  font-weight: bold;
}

#footerlogo{
  display: block;
  margin: auto;
  max-height: 6rem;
  margin-bottom: 3rem;
}

#newsmail{
  height: 3rem;
  width: 100%;
}

/** 404 **/
.img4z4 {
  max-width: 100%;
  margin-bottom: 0;
}

#uhoh {
  font-size: 6rem;
  color: #ffffff;
  z-index: 2;
  position: absolute;
  transform: translate(5rem, -70rem);
}

#lost {
  font-size: 3rem;
  color: #ffffff;
  max-width: 40rem;
  z-index: 2;
  position: absolute;
  transform: translate(5rem, -55rem);
} 

#footerfour {
  margin-top: 0;

}

/** Article Signed In **/

.grid.three-column-sidebar {
  grid-template-columns: 1fr 3fr;
  grid-auto-flow: column;
  margin-top: 1.5rem;
  column-gap: 2rem;
  margin-left: 8rem;
  margin-right: 8rem;
  margin-bottom: 3rem;
}

.main {
  grid-column: 2/4;
}

.article.picture{
  max-width: 40rem;
  display: block;
  margin: auto;
}

.side {
  grid-column: 1;
  padding: 1rem;
  border: #002C59;
  border: solid;
  border-width: .1rem;
} 

.sidebar {
  padding: .5rem;
  text-align: center;
}

.sidebar.title {
  font-size: 1.3rem;
  text-align: center;
  margin: 0rem;
}

.box-heading {
  border: #002C59;
  border: solid;
  border-width: .1rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.link {
  color: #002C59;
  margin-top: .5rem;
  margin-bottom: .5rem;
  text-align: left;
}

.progress {
  border: none;
  text-align: center;
  padding: 0rem;
  margin: 0rem;
}

.progbox {
  border: #002C59;
  border: solid;
  border-width: .1rem;
  margin-top: 2rem;
}

.subtitle {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}

.next-button{
  margin-top: 3rem;
}

#next {
  background-color: #D4124F;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 1.1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

#sidemeter {
  max-width: 80%;
}

/** Articles Signed Out**/
.articleout {
  display: grid;
  grid-template-columns: 1fr;
  margin-left: 10rem;
  margin-right: 10rem;
}

.articlebuttons {
  display:flex;
  justify-content:space-between;
  text-align: center;
}

.back-button {
  width: 12rem;
  height: 3.5rem;
  border: none;
  color: #002C59;
}

.next-button2  {
  background-color:#D4124F;
  color: #ffffff;
  width: 12rem;
  height: 3.5rem;
  border: none;
}

#outlease {
  justify-self: center;
}

/** Results Signed In **/

.results {
  max-width: 70%;
  margin: auto;
}

.profileheader {
  margin-top: 2rem;
  border: #ffffff;
  background-color: #EBF5FF;
  padding: 3rem;
  padding-left: 6rem;
  padding-right: 6rem;
  padding-bottom: 4rem;
}


.moveritefont{
  font-style: italic;
}

.results p{
  max-width: 60rem;
  display: block;
  margin: auto;
}
.results p strong {
  color: #D4124F;
}

.results h4 {
  margin-bottom: .7rem;
  margin-top: .5rem;
  padding: 0rem;
}

.results h2 {
  text-align: center;
  font-size: 1.3rem;
  margin-top: 0rem;
  margin-bottom: 1.5rem;
}

#profiletype {
  font-weight: 800;
  text-align: center;
  font-variant: small-caps;
  font-size: 1.7rem;
  color: #D4124F;
  margin-bottom: 1.5rem;
}

.results h3 {
  font-size: 1.5rem;
  text-align: left;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.grid.outer {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  column-gap: 1.5rem;
  row-gap: 1.5rem;
  margin: auto;
  margin-bottom: 4rem;
}

.grid.inner {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding: 1.7rem;
  border: #002C59;
  border: solid;
  border-width: .1rem;
}

.readmore {
  margin-top: 1rem;
}

.inner h4{
  max-width: 15rem;
}

.inner a {
  background-color: #002C59;
  color: #ffffff;
  padding: .5rem;
  text-decoration: none;
  align-self: center;
  text-align: center;
  justify-self: end;
}

#saveguide {
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 25rem;
}

/** Sign Up**/

.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  margin-top: 2rem;
  column-gap: 2rem;
  margin-left: 8rem;
  margin-right: 8rem;
  margin-bottom: 8rem;
}

.signup {
  grid-column: 1;
  padding: 1rem;
  border: #002C59;
  border: solid;
  border-width: .1rem;
  padding-left: 5rem;
  padding-right: 5rem;
}

.welcome {
  grid-column: 2;
  margin: 0;
  border: none;
}

.welcome img {
  max-width: 40rem;
}

label{
  font-weight: bold;
  font-size: 1rem;
}

.signup h3 {
  text-align: left;
  font-size: 1.3rem;
  margin-bottom: .6rem;
}

#already {
  margin-top: 0;
  margin-bottom: 3.5rem;
}

.signup input {
  width: 100%;
  padding: .7rem;
  margin-top: .25rem;
}

.signin.button {
  display: block;
  width: 100%;
  padding: 1rem;
  text-align: center;
  background-color: #002C59;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 1.5rem;
  margin-top: 1.7rem;
}

.signin.button:hover{
  background-color: #D4124F;
	transition-duration: 0.1s;
}

a#plain:hover{
  color: #D4124F;
	transition-duration: 0.1s;
}

a#plain{
  color: #002C59;
	transition-duration: 0.1s;
}

/* Sign In */ 
#welcomeback { 
  max-width: 60%;
  margin: auto;
  border: none;
}

/** Quiz **/
.allquiz { 
  max-width: 80%;
  margin: auto;
}

.next-button2 {
  float: right;

}

.next-button2:hover{
  background-color: #002C59;
	transition-duration: 0.1s;
}

.quizbox {
  width: 100%;
  max-width: 55rem;
  display: block;
  margin: auto;
  border: solid;
  border-width: .1rem;
  margin-top: 3rem;
  padding: 2rem;
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 4rem;
}
.progressmeter {
  width: 100%;
  height: 1.5rem;
  border: #002C59;
  border: solid;
  border-width: .1rem;
  max-width: 55rem;
  display: block;
  margin: auto;
  margin-top: 3rem;
}

.meterfill{
  width: 30%;
  background-color: #002C59;
  height: 100%;
  border: #002C59;
  border: solid;
  border-width: .2rem;
}

.response {
  max-width: 55rem;
  height: 4rem;
  padding-left: 1rem;
  box-shadow: 1px 1.5px 4px 0px #787878;
  margin-bottom: 1.5rem;
  line-height: 3.7rem;
}
.response:hover{
  background-color: rgb(233, 233, 236);
}
.quizbox h3 {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: left;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.quizbox label {
   font-weight: 500;
   padding-left: 1rem;
}


/** Generating **/ 
.resulting { 
  width: 100%;
  max-width: 40rem;
  margin: auto;
  border: solid;
  border-width: .2rem;
  margin-top: 3rem;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.meterfill.guide {
  width: 80%;
  background-color: #002C59;
  height: 100%;
  border: #002C59;
  border: solid;
  border-width: .2rem;
}

/*https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/linear
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/rotate
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function
https://codelucky.com/css-rotate/#Understanding_CSS_Transform_Rotate */

/* Adapted from: https://cssloaders.github.io */

.loader {
    width: 5rem;
    height:5rem;
    border: solid;
    border-width: .5rem;
    border-bottom-color: #D4124F;
    border-radius: 5rem;
    animation: rotation 1.2s linear infinite;
    margin: auto;
    margin-top: 5rem;
    margin-bottom: 5rem;
    }
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes 
   https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Syntax/At-rules
*/
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 

.resulting img {
  max-height: 5rem;
}

.resulting p{
  align-self: center;
}

.resulting {
  margin-bottom: 4rem;
}

.resulting #unchecked {
  max-width: 4rem;
  margin-left: .7rem;
  margin-top: .7rem;
}

/**** RESPONSIVENESS STUFF ****/

@media (max-width: 50rem) {
.grid{
  grid-template-columns: 1fr;
}

.grid.three-column, .grid-two, .grid.four-column, .grid.inner, .grid.outer{
  grid-template-columns: 1fr;
}

/* Main @Media*/

.mainlogo {
  grid-column: 1;
  height: auto;
  max-height: 80%;
  align-self: end;
  justify-self: left;
  margin-bottom: .7rem;
  margin-left: .8rem;
}

.mainlogo img {
  max-height: 4em;
  margin-bottom: 1rem;
}

.signinbutton{
  padding: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

#signinhead {
  margin-top: 2rem;
  margin-right: 1.5rem;
}

#hero1{
  max-width: 28rem;
}

#truck1{
  grid-row: 1;
}
#stepsh1 {
  grid-row: 2;
}
#stepsp1{
  grid-row: 3;
}
#truck2{
  grid-row: 4;
}
#stepsh2 {
  grid-row: 5;
}
#stepsp2{
  grid-row: 6;
}
#truck3{
  grid-row: 7;
}
#stepsh3 {
  grid-row: 8;
}
#stepsp3{
  grid-row: 9;
}

.herointro {
  font-size: 1.1rem;
  position: absolute;
  max-width: 78rem;
  text-align: right;
  line-height: 2rem;
  z-index: 2;
  margin-top: 2rem;
  margin-left: 1rem;

}

.cta.guide {
  z-index: 2;
  position: relative;
  transform: translate(5rem, 32rem);
} 

.testimonials {
  text-align: left;
  padding: 0;
  margin: 1rem;
  margin-top: 4rem;
}

hr {
  margin: 0rem;
}

.imagebin {
  max-width: 28rem;
} 
.newsletter{
  margin-left: 3rem;
}

/** 404 Media **/

#uhoh {
  font-size: 2rem;
  color: #ffffff;
  z-index: 2;
  position: absolute;
  transform: translate(3rem, -22rem);
}

#lost {
  font-size: .8rem;
  color: #ffffff;
  max-width: 10rem;
  z-index: 2;
  position: absolute;
  transform: translate(3rem, -18rem);
} 


/** Articles Signed Out Media**/
.articleout {
  display: grid;
  grid-template-columns: 1fr;
  margin: 2rem;
}

.article.content, .article.subtitle {
  font-size: .9rem;
  text-align: start;
}

.articlebuttons {
  display:flex;
  justify-content:space-between;
  text-align: center;
}

.back-button {
  width: 12rem;
  height: 3.5rem;
  border: none;
  color: #002C59;
}

.next-button2 {
  background-color:#D4124F;
  color: #ffffff;
  width: 12rem;
  height: 3.5rem;
  border: none;
}

#outlease {
  justify-self: center;
  max-width: 28rem;
}

/** Article Signed In Media **/

.grid.three-column-sidebar {
  margin-top: 1.5rem;
  column-gap: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 0;
}

.article.picture{
  display: none;
}

.side {
  grid-column: 1;
  padding: .5rem;
} 

.sidebar {
  padding: .2rem;
  text-align: center;
}

.sidebar.title {
  font-size: 1.3rem;
  text-align: center;
  margin: 0rem;
}


.link {
  margin-top: .5rem;
  margin-bottom: .5rem;
  font-size: .8rem;
  text-align: left;
}

.progress {
  padding: 0rem;
  margin: 0rem;
}

#next {
  font-weight: bolder;
  font-size: .7rem;
  padding: .9rem;
}

.progressmeter{
  margin-top: 1rem;
}

.sidebar h4 {
  font-size: .9rem;
  padding-left: .2rem;
  padding-right: .2rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}

/** Results Signed In/Out Media**/
.results {
  max-width: 90%;
}

.grid.outer {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow:row;
  column-gap: .8rem;
  row-gap: .8rem;
  margin: 0rem;
}

.grid.inner {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding: 1rem;
  border: solid;
  border-width: .1rem;
}

.results h4 {
  margin-bottom: .7rem;
  padding: 0;
  font-size: 1rem;
}

.results h3 {
  font-size: 1.25rem;
  text-align: left;
  margin: auto;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0rem;
}

.results h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.results p{
  max-width: 28rem;
}


#profiletype {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.readmore {
  margin-top: 1rem;
}

.inner a {
  text-align: center;
  align-self: end;
  justify-self: end;
}

#saveguide {
  width: 19rem;
  font-size: 1.2rem;
}

.cta-section h3 {
  font-size: 1.8rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.profileheader {
  padding-left: 3rem;
  padding-right: 3rem;
}

/** Sign Up Media**/

.grid-two {
  margin: auto;
}

.signup {
  grid-column: 1;
  padding-left: 2rem;
  padding-right: 2rem;
  border: none;
}

.welcome {
  display: none;
}

#already {
  margin-bottom: 1.5rem;
}

/* Sign In Media*/ 
#welcomeback { 
  max-width: 85%;
}

/*Quiz*/
label {
  font-size: .8rem;
  font-weight: bolder;
}

.quizbox {
  margin-top: 2rem;
  padding: 2rem;
  margin-bottom: 3rem;
}

.quizbox h3 {
  margin-top: 0;
}

.back-button {
  width: 6rem;
}
.next-button2 {
  width: 6rem;
}
 .quizbuttons {
  margin-top: 2rem;
}

.response {
  margin-bottom: 1rem;

}

/** Generating **/ 

.resulting, .progressmeter {
  max-width: 80%;
}

#urguide {
  max-width: 80%;
  font-size: 1.5rem;
  margin-left: 3rem;
}

.progressmeter{
  margin-top: 3rem;
}

}