style.css

/*NAVIGATION BAR STYLING */ 
.flexbox { 
 display:inline-flex;
 justify-content: space-evenly;
 align-items: center; 
 width: 100%;
} 
.homeimage { 
  background-image: url(https://claudia.abril.com.br/wp-content/uploads/2022/03/GettyImages-1300190869.jpg);
  height: 80vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

.sign-upimage2 { 
  background-image: url(https://i.pinimg.com/originals/a3/c0/d5/a3c0d5bba295a152198f2aa693cdc6af.gif);
  height: 80vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}
 .footer { 
    color: white; 
  }


.ivorybackground {
  background-color: white; 
}
hr.dashed {
   border-top: 3px dashed #bbb;
}

.salmonbackground {
  background-color:#ffbeb4; 
   
}

.hometitletext {  
  padding: 1%;
  color: #0064b4;
  font-size: 50px;
  letter-spacing: 10px;
  line-height: 40px;
  text-align: center;
  
}

.container-title {  
  display: absolute; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: center; 
  align-items: center; 

  /* Design properties */
  background-color: white;
  padding: 2px;
  
  position: absolute;
  left: 20%;
  right: 20%;
  top: 30%; 
}


.introtext {
  background-color:#FFD4CD ; /* #dceff2 */ 
  padding: 4%;
  margin: 3%;
  color: black; 
  font-size: 20px; 
  letter-spacing: 2px; 
  line-height: 1.4em; /* Adds space between lines #0064b4*/
  text-align: center;
}
.footer {
			padding: 20px;
			text-align: center;
			background:#0064b4 ;
		}

/* PARALLAX SCROLLING BEGINGS */ 
.scrolleffect1 {
  background-image: url("https://media.newyorker.com/photos/5909772a8b51cf59fc423387/master/pass/cover_160606_1200x1638.gif ");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  }


.scrolleffect6 {
  background-image: url("https://media.newyorker.com/photos/5c2fbecca23f7a2cc1a7cdfb/master/w_2560%2Cc_limit/parini_reading_small.gif");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}

.scrolleffect2 {
  background-image: url("https://artfiles.alphacoders.com/119/119218.jpg");
   height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
 
}
.scrolleffect3 {
  background-image: url("https://images.saatchiart.com/saatchi/645462/art/5861979/4931777-APDRWSKT-7.jpg");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  
}

.scrolleffect4 {
  background-image: url("https://ramonapintea.com/wp-content/uploads/2019/08/Magnolias-Ramona-Pintea-IMG.jpg");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
  
}

.scrolleffect5 {
  background-image: url("https://ramonapintea.com/wp-content/uploads/2019/08/Ramona-IMG-Woman-Tiger.jpg");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}


@media only screen and (max-width:700px) {
  .scrolleffect5, .scrolleffect4, .scrolleffect3, .scrolleffect2, .scrolleffect1, .scrolleffect6 {
    background-attachment: scroll;
    height: 100%;
    width: 100%;
    background-position: center; 
    background-repeat: none;
    background-size: inherit; 
  }
}


.text-section {
  background-color: white;
  padding: 5px 0px;
  margin: 0px;
  text-align: center;
  box-shadow: 5px 10px 18px black;
}

body, html {
 
  font-size: 20px;
  line-height: 1.5em;
  margin: 0em;
  color: black; 
  background-color: white ; 
  box-sizing: border-box;
}



/* FOR THE CARDS OUTLINE */ 
.babyblue { 
  background-color: #dceff2; 
  border: 2px solid #dceff2;
  border-radius: 5px;
  padding: 20px 10px; 
}

.turqouisedivider { 
  background-color: darkturquoise; 
  border: 2px solid darkturquoise;
  border-radius: 5px;
  width: 100%;
  height: 10%; 
}

.purpledivider { 
  background-color: darkmagenta; 
  border: 2px solid darkmagenta;
  border-radius: 5px;
  width: 100%;
  height: 10%; 
}

.lightpurple { 
  background-color: #efe4f5; 
  border: 2px solid #efe4f5;
  border-radius: 5px;
  padding: 20px; 
}

.bluedivider { 
  background-color: blue; 
  border: 2px solid blue;
  border-radius: 5px;
  width: 100%;
  height: 10%;  
}

ul li:hover {
  background:  #88CEDA;

}

.lightblue { 
  background-color: #f0f3ff; 
  border: 2px solid #f0f3ff;
  border-radius: 5px;
  padding: 20px 10px; 
}

.greenbold {
  background-color: #7cebb7; 
  border: 2px solid #7cebb7;
  border-radius: 5px;
  width: 100%;
  height: 10%;
}

.lightgreen {
  background-color: #d9ffed; 
  border: 2px solid #d9ffed;
   border-radius: 5px;
  padding: 20px; 
}


h1 {
  letter-spacing: 5px;
  font-family: "Arial Black";
  color: #0064b4;
}


h2 {
  letter-spacing: 3px;
  font-family: "Arial Black";
  text-transform: Capitalize;
}

h3 {
  letter-spacing: 3px;
  font-family: "Arial";
  font-weight: 20%; 
  text-transform: Capitalize;
}

h4 {
  letter-spacing: 1px;
  font-family: "Lato";
  font-weight: 10%; 
  font-size: 20px;
  color: black; 
  
}

h5 {
  letter-spacing: 1px;
  font-family: "Lato";
  font-weight: 10%; 
  font-size: 20px;
  
}

h6 { 
letter-spacing: 5px;
  font-family: "Arial";
  color: #0064b4;
  font-size: 5vh;


}
p  {
  color: black; 
  text-decoration: none;
   font-family: "Arial";
}

cardtext  {
  color: black; 
  text-decoration: none;
   font-family: "Arial";
}

.background {  
  width: 100%;
  overflow: hidden; 
}


.background1 {

 background-color: white; 
  width: 100%;
  overflow: hidden;
  outline: none;

}

.introbuttons {
  background-color: white;  
  color: black; 
  font-size: 20px; 
  text-align: center;
  display: flex; 
  justify-content: space-around;
  padding: 2%;


  
   }  

  @media screen and (max-width: 760px) { 
 .introbuttons { 
 	display:inline-block;
  justify-content: space-between; 
  padding: 5%;
 } 


    
  }