style.css

html, body {
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
}

/* css for responsive website on computer */
@media screen and (min-width: 601px) {
  /* code for home page */
  .gStem{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 14rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    7px 7px 0px #F39A9D,
    20px 20px 0px #6c6383;
  background-color: #7D7DA1;
  padding: 8%;
  margin-top: 0!important;
  } 

  .homeTitle{
  font-size: 70px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #F39A9D;
}

.homeDescript{
  font-size: 21px;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  padding-left: 21%;
  padding-right: 21%;
}

.brandDescript{
  font-size: 21px;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  padding-left: 21%;
  padding-right: 21%;
}

.brand2Descript{
  font-size: 21px;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  padding-left: 21%;
  padding-right: 21%;
  padding-bottom: 8%;
}

.logoHomePage{
  margin-top: -80px;
  width: 415px;
  height: 580px;
  margin-bottom: -50px;
}

.logoAlign{
  display: flex;
  justify-content: center;
} 

/* code for nav bar */
.logo{
  width: 58px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: -30px;
  margin-bottom: -30px;
}

.navBar{
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  font-family: 'Nunito', sans-serif;
  margin-top: 0!important;
}

.navBar a {
  float: left;
  color: #000000;
  text-align: center;
  padding-top: 1%;
  padding-bottom: 1%;
  text-decoration: none;
  font-size: 19px;
  border: 0px;
}

.navBar a:hover {
  text-decoration: underline;
  text-decoration-color: #F39A9D;
  text-underline-position: under;
  text-decoration-thickness: 5px;
}

/* code for take action page */
.actionTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 11.5rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    7px 7px 0px #F39A9D,
    20px 20px 0px #6c6383;
  background-color: #7D7DA1;
  padding: 8%;
  margin-top: 0!important;
  } 

.anyoneTitle{
  font-size: 70px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #A6CCCE;
}

.studentTitle{
  font-size: 70px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #F39A9D;
}

.schoolTitle{
  font-size: 70px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #F8D78C;
}

/* code for data page */
.allPercents {
    font-size: 4vw;
}
  
.allDescription {
    font-size: 1.3vw;
}

/* code for resources page */
.resourceTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 12rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    7px 7px 0px #f3cf7c,
    20px 20px 0px #709e9e;
  background-color: #A6CCCE;
  padding: 8%;
  margin-top: 0!important;
  }

.subResourceTitle1{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif;
  color: #F39A9D;
}

/* border animation effects */
.programPic{
  float: left;
  height: 370px;
  width: 570px;
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
 --g: 14px; /* the gap*/
  --c: #F39A9D; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));*/
}

.programPic:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

.programPicAlign{
  display: flex;
  justify-content: space-evenly;
}

.subResourceTitle2{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif;
  color: #7D7DA1;
}

.summerDescription{
  font-size: 20px;
  line-height: 35px;
  font-family: 'Nunito', sans-serif;
}

.clickLink{
  color: #F39A9D;
}

/* border animation effects */
.compSciPic{
  float: right;
  height: 370px;
  width: 570px;
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
 --g: 14px; /* the gap*/
  --c: #7D7DA1; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));*/
}

.compSciPic:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

.compSciPicAlign{
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10%;
}

.exploreCompSciDescription{
  font-size: 20px;
  font-family: 'Nunito', sans-serif;
  list-style-position: inside;
}

.subResourceTitle3{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif;
    color:  #A6CCCE;
}

/* border animation effects */
.engPic{
  float: left;
  height: 370px;
  width: 570px;
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
 --g: 14px; /* the gap*/
  --c:  #A6CCCE; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));
}

.engPic:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

.engPicAlign{
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
}

.exploreEngDescription{
  font-size: 20px;
  font-family: 'Nunito', sans-serif;
  list-style-position: inside;
}

/* role models alignment and sizes*/
.roleModels{
  display: flex;
  justify-content: space-evenly;
}

.rolemodelpics {
  display: inline-flex;
}

.rmpics {
  height: 380px;
  width: 380px;
  object-fit: cover;
  margin-bottom: 30%;
  border-radius: 50%;
}

/* role models image-to-text effect */
.overlay {
  border-radius: 50%;
  position: absolute;
  height: 380px;
  width: 380px;
  opacity: 0;
  transition: .5s ease;
  background-color: #A6CCCE;
}

.rolemodelpics:hover .overlay {
  opacity: 1;
}

.roleModelsName{
  font-family: 'Istok Web', sans-serif;
  font-size: 27px;
}

.gracebio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.joanbio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.tierabio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.sofiabio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.katherinebio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.margaretbio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.joybio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.yokybio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.swatibio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*why you should join stem section */
.resourceHeader{
  font-size: 70px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #A6CCCE;
  margin-top: 5%;
  margin-bottom: 5%;
}

/* code for designing layout of the cards */
.womenJoin {
	position: relative;
	width: 600px;
	height: 300px;
	margin: auto;
	padding: 1rem;
	background-color: transparent;
	background-image: linear-gradient(
			-45deg,
			transparent,
			transparent 2%,
			white 2%,
			white 85%,
			transparent,
			85%,
			transparent
		),
		linear-gradient(to bottom right, #A6CCCE, #A6CCCE 90%, transparent 90%);
	background-position: top left, 0.2em 0.2em;
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 8px #0005);
}

/* code for quotes on the top and bottom of the cards */
.womenJoin::before,
.womenJoin::after {
	position: absolute;
	z-index: -1;
	display: block;
	width: 3rem;
	height: 4rem;
	content: "";
	z-index: 0;
	font-size: 5.5rem;
	font-family: 'Istok Web', sans-serif;
}

.womenJoin::before {
	top: -2rem;
	left: 1rem;
	content: open-quote;
}

.womenJoin::after {
	bottom: -1.5rem;
	right: 1rem;
	content: close-quote;
}

.womenJoin::before,
.womenJoin::after,
.womenJoin{
	text-shadow: -2px 2px #fff, -1.5px 1.5px #fff, -1px 1px #fff, -0.5px 0.5px #fff;
}

.womenQuote {
	margin-block-start: 1rem;
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
}

.womenName{
	text-align: right;
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
}

.womenJoin1{
  display: flex;
  justify-content: space-evenly;
}

.womenJoin2{
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
}

.womenJoin3{
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
}

.womenJoin4{
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
}
}

/* css for responsive website on phone */
@media screen and (max-width: 600px) {
  /*code for home page */
  .gStem{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 5rem;
  text-align: center;
  color: #FFFFFF;
  text-shadow:
    3px 3px 0px #F39A9D,
    8px 8px 0px #6c6383;
  background-color: #7D7DA1;
  padding: 8%;
  margin-top: 0!important;
  } 

  .homeTitle{
  font-size: 30px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #F39A9D
}

.homeDescript{
  font-size: 10px;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  padding-left: 21%;
  padding-right: 21%;
}

.brandDescript{
  font-size: 10px;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  padding-left: 21%;
  padding-right: 21%;
}

.brand2Descript{
  font-size: 10px;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  padding-left: 21%;
  padding-right: 21%;
  padding-bottom: 8%;
}

.logoHomePage{
  margin-top: -45px;
  width: 180px;
  height: 240px;
  display: flex;
  justify-content: center;
  margin-bottom: -40px;
}

.logoAlign{
  display: flex;
  justify-content: center;
} 

/* code for nav bar */
.logo{
  width: 25px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: -10px;
  margin-bottom: -10px;
}
  
.navBar{
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  font-family: 'Nunito', sans-serif;
  margin-top: 0!important;
}

.navBar a {
  float: left;
  color: #000000;
  text-align: center;
  padding-top: 1%;
  padding-bottom: 1%;
  text-decoration: none;
  font-size: 12px;
  border: 0px;
}

.navBar a:hover {
  text-decoration: underline;
  text-decoration-color: #F39A9D;
  text-underline-position: under;
  text-decoration-thickness: 2.5px;
}

/* code for take action page */
.actionTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 3.5rem;
  text-align: center;
  color: #FFFFFF;
  text-shadow:
    3px 3px 0px #F39A9D,
    8px 8px 0px #6c6383;
  background-color: #7D7DA1;
  padding: 8%;
  margin-top: 0!important;
  }

.anyoneTitle{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #A6CCCE;
}

.studentTitle{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #F39A9D;
}

.schoolTitle{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #F8D78C;
}

/* code for data page */
.allPercents {
    font-size: 24.5px;
  }

.allDescription {
    font-size: 17px;
  }

/* code for resources page */
.resourceTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 3.5rem;
  text-align: center;
  color: #FFFFFF;
  text-shadow:
    3px 3px 0px #f3cf7c,
    8px 8px 0px #709e9e;
  padding: 14%;
  margin-top: 0!important;
  background-color: #A6CCCE;
  }

.subResourceTitle1{
  font-size: 30px;
  font-family: 'Istok Web', sans-serif;
  color: #F39A9D;
}

.summerDescriptionList{
  text-align: center;
}

/* border animation effects */
.programPic{
  height: 250px;
  width: 370px;
  --b: 6px;  /* border thickness*/
  --s: 45px; /* size of the corner*/
 --g: 10px; /* the gap*/
  --c: #F39A9D; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));*/
}

.programPic:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}
  
.programPicAlign1{
  display: flex;
  justify-content: center;
}

.summerDescription{
  font-size: 12px;
  font-family: 'Nunito', sans-serif;
}

.clickLink{
  color: #F39A9D;
}

.subResourceTitle2{
  font-size: 30px;
  font-family: 'Istok Web', sans-serif;
  color: #7D7DA1;
}

/* border animation effects */
.compSciPic{
  height: 250px;
  width: 370px;
  --b: 6px;  /* border thickness*/
  --s: 45px; /* size of the corner*/
 --g: 10px; /* the gap*/
  --c: #7D7DA1; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));
}

.compSciPic:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

.compSciPicAlign1{
  display: flex;
  justify-content: center;
}
  
.compSciPicAlign{
  margin-top: 10%;
  margin-bottom: 10%;
}

.exploreCompSciDescription{
  font-size: 12px;
  font-family: 'Nunito', sans-serif;
  list-style-position: inside;
  text-align: center;
}

.subResourceTitle3{
  font-size: 30px;
  font-family: 'Istok Web', sans-serif;
    color: #A6CCCE;
}

/* border animation effects */
.engPic{
  height: 250px;
  width: 370px;
   --b: 6px;  /* border thickness*/
  --s: 45px; /* size of the corner*/
 --g: 10px; /* the gap*/
  --c: #A6CCCE; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));
}

.engPic:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

.engPicAlign1{
  display: flex;
  justify-content: center;
}
  
.engPicAlign{
  margin-top: 10%;
}

.exploreEngDescription{
  font-size: 12px;
  font-family: 'Nunito', sans-serif;
  list-style-position: inside;
  text-align: center;
}

/* role models alignment and sizes*/
.rolemodelpics {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 5%;
}

.rmpics {
  height: 280px;
  width: 280px;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 50%;
}

/* role models image-to-text effect */
.overlay {
  border-radius: 50%;
  position: absolute;
  height: 280px;
  width: 280px;
  opacity: 0;
  transition: .5s ease;
  background-color: #A6CCCE;
}

.rolemodelpics:hover .overlay {
  opacity: 1;
}

.gracebio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.joanbio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.roleModelsName{
  font-family: 'Istok Web', sans-serif;
  font-size: 22px;
}

.tierabio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
  
 .katherinebio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
} 

.margaretbio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.sofiabio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.joybio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.yokybio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.swatibio {
  font-family: 'Nunito', sans-serif; 
  color: white;
  font-size: 15px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* why you should join stem section */
.resourceHeader{
  font-size: 45px;
  font-family: 'Istok Web', sans-serif; 
  text-align: center;
  color: #A6CCCE;
  margin-top: 10%;
  margin-bottom: 5%;
}

/* code for designing layout of the cards */
.womenJoin {
	position: relative;
	width: 400px;
	height: 200px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
	margin-bottom: 10%;
	padding: 1rem;
	background-color: transparent;
	background-image: linear-gradient(
			-45deg,
			transparent,
			transparent 2%,
			white 2%,
			white 85%,
			transparent,
			85%,
			transparent
		),
		linear-gradient(to bottom right, #A6CCCE, #A6CCCE 90%, transparent 90%);
	background-position: top left, 0.2em 0.2em;
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 8px #0005);
}

/* code for quotes on the top and bottom of the cards */
.womenJoin::before,
.womenJoin::after {
	position: absolute;
	z-index: -1;
	display: block;
	width: 3rem;
	height: 4rem;
	content: "";
	z-index: 0;
	font-size: 4rem;
	font-family: 'Istok Web', sans-serif;
}

.womenJoin::before {
	top: -1.5rem;
	left: 1rem;
	content: open-quote;
}

.womenJoin::after {
	bottom: -2rem;
	right: 0rem;
	content: close-quote;
}

.womenJoin::before,
.womenJoin::after,
.womenJoin{
	text-shadow: -2px 2px #fff, -1.5px 1.5px #fff, -1px 1px #fff, -0.5px 0.5px #fff;
}

.womenQuote {
	margin-block-start: 1rem;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}

.womenName{
	text-align: right;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}
}

/* css for responsive website on computer */
@media screen and (min-width: 1171px) {
  /* code for take action page*/
  /* take action cards for anyone */
  .anyoneInfo{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: 'Nunito', sans-serif;
  color: #3f484a;
}
  
  .anyoneHeader{
  font-family: 'Istok Web', sans-serif;
  font-size: 25px;
  padding-bottom: 15px;
}

  .anyoneInfo1{
  background-color: #A6CCCE;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 4%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-left: 2%;
  margin-right: 2%;
}

.anyoneInfo2{
  background-color: #C2E1E2;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 2%;
}

.anyoneInfo3{
  background-color: #89BBBE;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 2%;
}

/* take action cards for students */
.studentInfo{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: 'Nunito', sans-serif;
  color: #414a4c;
}

.studentInfo1{
  background-color: #F39A9D;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-left: 2%;
  margin-right: 2%;
}

.studentInfo2{
  background-color: #FFD4D6;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 2%;
}

.studentInfo3{
  background-color: #F5B9BB;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 2%;
}

/* take action cards for school districts */
.schoolInfo{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: 'Nunito', sans-serif;
  color: #414a4c;
  padding-bottom: 5%;
}

.schoolInfo1{
  background-color: #F8D78C;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-left: 2%;
  margin-right: 2%;
}

.schoolInfo2{
  background-color: #FBE5B2;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 2%;
}

.schoolInfo3{
  background-color: #F9D278;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 2%;
}

/* code for about us page */
.aboutUsTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 9.5rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    7px 7px 0px #6eabaf,
    17px 17px 0px #e1bf70;
  background-color: #F8D78C;
  padding: 9%;
  margin-top: 0!important;
  }

/* code for designing and aligning creator cards */
.allCards{
  display: flex;
  justify-content: center;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  border-radius: 50%;
}

.card{
  width: 650px;
  height: 400px;
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin: 1.5rem;
}

.card h1 {
  text-align: center;
  font-family: 'Istok Web', sans-serif;
  text-transform: uppercase;
  font-size: 33px;
}

.card .additional {
  position: absolute;
  width: 250px;
  height: 100%;
  background: linear-gradient(#A6CCCE, #A6CCCE);
  transition: width 0.4s;
  overflow: hidden;
  z-index: 2;
}

.card.jasmine .additional {
  background: linear-gradient(#7D7DA1, #7D7DA1);
}


.card:hover .additional {
  width: 100%;
  border-radius: 0 5px 5px 0;
}

.card .additional .user-card {
  width: 250px;
  height: 100%;
  position: relative;
  float: left;
}

.card .additional .user-card::after {
  content: "";
  display: block;
  position: absolute;
  top: 10%;
  right: -2px;
  height: 80%;
  border-left: 2px solid rgba(0,0,0,0.025);
}

.card .additional .user-card .role,
.card .additional .user-card .role2 {
  top: 15%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Istok Web', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  background: rgba(0,0,0,0.15);
  padding: 0.125rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
}

.card .additional .user-card .role2 {
  top: 85%;
}

.card .additional .user-card svg {
  top: 50%;
}

.card .additional .more-info {
  text-align: center;
}

.card .additional .more-info h1 {
  color: #fff;
  margin-bottom: 0;
}

.card.jasmine .additional .more-info h1 {
  color: #FFFFFF;
}

.card .additional .adviceSection {
  margin: 0 1rem;
  color: #fff;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
}

.card.jasmine .additional .adviceSection {
  color: #FFFFFF;
}

.card .additional .adviceSection span + span {
  float: right;
}

.card .general {
  width: 400px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 1rem;
  padding-top: 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
}

.card .general .more {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.9em;
}

/* our toast and figma wireframe */
.process{
  text-align: center;
  margin-top: 8%;
  font-family: 'Istok Web', sans-serif;
  font-size: 70px;
  color: #F39A9D;
  margin-bottom: 3%;
}

.toastHeader{
  font-family: 'Istok Web', sans-serif;
  font-size: 55px;
  color: #F39A9D;
  padding-left: 5%;
}

.toast{
  font-family: 'Nunito' , sans-serif;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 3%;
  font-size: 23px;
}

.wireframeHeader{
  text-align: center;
  margin-top: 5%;
  font-family: 'Istok Web', sans-serif;
  font-size: 70px;
  color: #A6CCCE;
  margin-bottom: 3%;
}
  
.wireframe{
  width: 1300px;
  height: 600px;
  border: solid 10px;
  border-color: #A6CCCE;
  margin-bottom: 7%;
}  

.wireframeAlign{
  display: flex;
  justify-content: center;
}

/* scroll arrow and scroll text for take action page */
.scrollAction {
  position: absolute;
  margin-top: 2rem;
  text-align: center;
  height: 150px;
  overflow: hidden;
  width: 75px;
  background: transparent;
  top: 42%;
  right: 2%;
}

  .scroll__text {
    position: absolute;
    transform-origin: 37px 37px;
    transform: rotate(90deg);
    color: white;
    z-index: 999;
    width: 150px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 15px;
    font-family: 'Nunito', sans-serif;
    margin-left: 3px;
  }

  .scroll__line {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 1px;
    height: 100%;
    z-index: 10;
    background-color: white;
    animation: scroll 3s infinite normal;
    transform: translateY(0);
    margin-right: 5px;
  } 

    .scrollAction:after,
    .scrollAction:before{
      content: '';
      width: 1px;
      height: 15px;
      background: white;
      position: absolute;
    }
    
    .scrollAction:before {
      bottom: 0;
      transform: rotate(-30deg);
      transform-origin: 0px 15px;
    }
  
    .scrollAction:after{
      bottom: 0;
      transform: rotate(30deg);
      transform-origin: 0px 15px;
    }
  
  .scroll__arrow {
    display: none;
    position: relative;
    z-index: 111;
    padding-left: 1px;
    top: -13px;
  }

/* scroll arrow animation for take action page */
@keyframes scroll {
  0% {
    transform: translate3d(0, -100%, 0)
  }
  15% {
    transform: translate3d(0, -95%, 0)
  }
  85% {
    transform: translate3d(0, 95%, 0)
  }
  100% {
    transform: translate3d(0, 100%, 0)
  }
}

/* scroll arrow and scroll text for resources page */
.scrollResources {
  position: absolute;
  margin-top: 2rem;
  text-align: center;
  height: 150px;
  overflow: hidden;
  width: 75px;
  background: transparent;
  top: 42%;
  right: 2%;
}

    .scrollResources:after,
    .scrollResources:before{
      content: '';
      width: 1px;
      height: 15px;
      background: white;
      position: absolute;
    }
    
    .scrollResources:before {
      bottom: 0;
      transform: rotate(-30deg);
      transform-origin: 0px 15px;
    }
  
    .scrollResources:after{
      bottom: 0;
      transform: rotate(30deg);
      transform-origin: 0px 15px;
    }
  
/* scroll arrow animation for resources page */
@keyframes scrollResources {
  0% {
    transform: translate3d(0, -100%, 0)
  }
  15% {
    transform: translate3d(0, -95%, 0)
  }
  85% {
    transform: translate3d(0, 95%, 0)
  }
  100% {
    transform: translate3d(0, 100%, 0)
  }
}

/* scroll arrow and scroll text for experiences page */
.scrollExperiences {
  position: absolute;
  margin-top: 2rem;
  text-align: center;
  height: 150px;
  overflow: hidden;
  width: 75px;
  background: transparent;
  top: 47%;
  right: 2%;
}

    .scrollExperiences:after,
    .scrollExperiences:before{
      content: '';
      width: 1px;
      height: 15px;
      background: white;
      position: absolute;
    }
    
    .scrollExperiences:before {
      bottom: 0;
      transform: rotate(-30deg);
      transform-origin: 0px 15px;
    }
    .scrollExperiences:after{
      bottom: 0;
      transform: rotate(30deg);
      transform-origin: 0px 15px;
    }

/* scroll arrow animation for experiences page */
@keyframes scrollExperiences {
  0% {
    transform: translate3d(0, -100%, 0)
  }
  15% {
    transform: translate3d(0, -95%, 0)
  }
  85% {
    transform: translate3d(0, 95%, 0)
  }
  100% {
    transform: translate3d(0, 100%, 0)
  }
}

/* scroll arrow for home page */
.scrollHome {
  right: 1%;
  position: absolute;
  margin-top: 2rem;
  text-align: center;
  height: 150px;
  overflow: hidden;
  width: 75px;
  background: transparent;
  top: 47%;
}

    .scrollHome:after,
    .scrollHome:before{
      content: '';
      width: 1px;
      height: 15px;
      background: white;
      position: absolute;
    }
    
    .scrollHome:before {
      bottom: 0;
      transform: rotate(-30deg);
      transform-origin: 0px 15px;
    }
    .scrollHome:after{
      bottom: 0;
      transform: rotate(30deg);
      transform-origin: 0px 15px;
    }

/* scroll arrow animation for home page */
@keyframes scrollHome {
  0% {
    transform: translate3d(0, -100%, 0)
  }
  15% {
    transform: translate3d(0, -95%, 0)
  }
  85% {
    transform: translate3d(0, 95%, 0)
  }
  100% {
    transform: translate3d(0, 100%, 0)
  }
}

/* scroll arrow for about page */
.scrollAbout {
  position: absolute;
  margin-top: 2rem;
  text-align: center;
  height: 150px;
  overflow: hidden;
  width: 75px;
  background: transparent;
  top: 65%;
  right: 1%;
}

    .scrollAbout:after,
    .scrollAbout:before{
      content: '';
      width: 1px;
      height: 15px;
      background: white;
      position: absolute;
    }
    
    .scrollAbout:before {
      bottom: 0;
      transform: rotate(-30deg);
      transform-origin: 0px 15px;
    }
    .scrollAbout:after{
      bottom: 0;
      transform: rotate(30deg);
      transform-origin: 0px 15px;
    }

/* scroll arrow animation for about page */
@keyframes scrollAbout {
  0% {
    transform: translate3d(0, -100%, 0)
  }
  15% {
    transform: translate3d(0, -95%, 0)
  }
  85% {
    transform: translate3d(0, 95%, 0)
  }
  100% {
    transform: translate3d(0, 100%, 0)
  }
}
}

/* css for responsive website on phone */
@media screen and (max-width: 1170px) {
/* code for take action page*/
/* take action cards for anyone */
.anyoneInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Nunito', sans-serif;
  color: #3f484a;
}
  
  .anyoneHeader{
  font-family: 'Istok Web', sans-serif;
  font-size: 25px;
  padding-bottom: 15px;]
}

  .anyoneInfo1{
  background-color: #A6CCCE;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

.anyoneInfo2{
  background-color: #C2E1E2;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

.anyoneInfo3{
  background-color: #89BBBE;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

/* take action cards for students */
.studentInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Nunito', sans-serif;
  color: #414a4c;
}

.studentInfo1{
  background-color: #F39A9D;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

.studentInfo2{
  background-color: #FFD4D6;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

.studentInfo3{
  background-color: #F5B9BB;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

/* take action cards for school districts */
.schoolInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Nunito', sans-serif;
  color: #414a4c;
  padding-bottom: 5%;
}

.schoolInfo1{
  background-color: #F8D78C;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

.schoolInfo2{
  background-color: #FBE5B2;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

.schoolInfo3{
  background-color: #F9D278;
  border-radius: 20px;
  max-width: 300px;
  max-height: 400px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%
}

/* code for about us page */
.aboutUsTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 3.5rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    3px 3px 0px #6eabaf,
    8px 8px 0px #e1bf70;
  background-color: #F8D78C;
  padding: 9%;
  margin-top: 0!important;
  }

/* code for designing and aligning creator cards */
.allCards{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  border-radius: 50%;
}

.profileImage{
  width: 110px;
  height: 110px;
}

.card {
  width: 450px;
  height: 250px;
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin: 1.5rem;
}

.card h1 {
  text-align: center;
  font-family: 'Istok Web', sans-serif;
  text-transform: uppercase;
}

.card .additional {
  position: absolute;
  width: 150px;
  height: 100%;
  background: linear-gradient(#A6CCCE, #A6CCCE);
  transition: width 0.4s;
  overflow: hidden;
  z-index: 2;
}

.card.jasmine .additional {
  background: linear-gradient(#7D7DA1, #7D7DA1);
}


.card:hover .additional {
  width: 100%;
  border-radius: 0 5px 5px 0;
}

.card .additional .user-card {
  width: 150px;
  height: 100%;
  position: relative;
  float: left;
}

.card .additional .user-card::after {
  content: "";
  display: block;
  position: absolute;
  top: 10%;
  right: -2px;
  height: 80%;
  border-left: 2px solid rgba(0,0,0,0.025);
}

.card .additional .user-card .role,
.card .additional .user-card .role2 {
  top: 15%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Istok Web', sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  background: rgba(0,0,0,0.15);
  padding: 0.125rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
}

.card .additional .user-card .role2 {
  top: 85%;
}

.card .additional .user-card svg {
  top: 50%;
}

.card .additional .more-info {
  text-align: center;
}

.card .additional .more-info h1 {
  color: #fff;
  margin-bottom: 0;
  font-size: 1.5rem;
}

.card.jasmine .additional .more-info h1 {
  color: #FFFFFF;
  font-size: 1.5rem;
}

.card .additional .adviceSection {
  margin: 0 1rem;
  color: #fff;
  font-size: 0.7rem;
  font-family: 'Nunito', sans-serif;
}

.card.jasmine .additional .adviceSection {
  color: #FFFFFF;
}

.card .additional .adviceSection span + span {
  float: right;
}

.card .general {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 1rem;
  padding-top: 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 0.7em;
}

.card .general .more {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.7em;
}

/* our toast and figma wireframe */
.process{
  text-align: center;
  margin-top: 8%;
  font-family: 'Istok Web', sans-serif;
  font-size: 45px;
  color: #F39A9D;
}

.toastHeader{
  font-family: 'Istok Web', sans-serif;
  font-size: 30px;
  color: #F39A9D;
  padding-left: 5%;
}

.toast{
  font-family: 'Nunito' , sans-serif;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
  font-size: 15px;
}

.wireframeHeader{
  text-align: center;
  margin-top: 5%;
  font-family: 'Istok Web', sans-serif;
  font-size: 45px;
  color: #A6CCCE;
  margin-bottom: 3%;
}
  
.wireframe{
  width: 470px;
  height: 230px;
  border: solid 5px;
  border-color: #A6CCCE;
  margin-bottom: 10%;
}  

.wireframeAlign{
  display: flex;
  justify-content: center;
}

/* code for scroll arrow */
.scroll__text{
  position: absolute;
  transform-origin: 37px 37px;
  transform: rotate(90deg);
  color: transparent;
  z-index: 999;
  width: 150px;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 15px;
  font-family: 'Nunito', sans-serif;
  margin-left: 3px;
}

.scroll__line{
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1px;
  height: 100%;
  z-index: 10;
  background-color: transparent;
  animation: scroll 3s infinite normal;
  transform: translateY(0);
  margin-right: 5px;
} 
  
}

/* css for responsive website on computer */
@media screen and (min-width: 1451px){
/* css for the experience page */
.exName{
  text-align: right;
  font-weight: bold;
}

/* border animation effects */
.box {
  position: relative;
  background: white;
  margin: 45px;
  width: 500px;
  height: 270px;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-size: 100%;
  margin-top: 3%;
  padding-top: 4%;
  padding-right: 3%;
  padding-left: 3%;
  padding-bottom: 3%;
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
 --g: 14px; /* the gap*/
  --c: #F39A9D; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));*/
}

.box:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

/* drop shadow effect */
.box:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg, #bdbdbd 0%, #bdbdbd 100% );
    transform: translate3d(0px, 20px, 0) scale(0.95);
    filter: blur(20px);
    opacity: var(0.7);
    transition: opacity 0.3s;
    border-radius: inherit;
}

.box::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}

/* experiences alignment for boxes */
.box{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.firstThreeBoxes{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3%;
}

.secondThreeBoxes{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3%;
}

.thirdThreeBoxes{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3%;
}

.fourthThreeBoxes{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3%;
}

.fifthThreeBoxes{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 3%;
}

.experienceTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 9.5rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    7px 7px 0px  #7D7DA1,
    15px 15px 0px #ec797d;
  padding: 10%;
  margin-top: 0!important;
  background-color: #F39A9D;
}
}

@media screen and (max-width: 1450px){
/* css for the experience page */
.exName{
  text-align: right;
  font-weight: bold;
}

/* border animation effects */
.box {
  position: relative;
  background: white;
  margin: 45px;
  width: 473px;
  height: 250px;  
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  margin-top: 3%;
  margin-bottom: 7%;
  margin-left: 3%;
  margin-right: 3%;
  padding-top: 4%;
  padding-right: 3%;
  padding-left: 3%;
  padding-bottom: 3%;
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
 --g: 14px; /* the gap*/
  --c: #F39A9D; 
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));*/
}

.box:hover{
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

/* drop shadow effect */
.box:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg,  #bdbdbd 0%, #bdbdbd 100%);
    transform: translate3d(0px, 20px, 0) scale(0.95);
    filter: blur(20px);
    opacity: var(0.7);
    transition: opacity 0.3s;
    border-radius: inherit;
}
  
.box::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}

/* experiences alignment for boxes */
.box{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.firstThreeBoxes{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secondThreeBoxes{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thirdThreeBoxes{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fourthThreeBoxes{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fifthThreeBoxes{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.experienceTitle{
  font-family: 'Istok Web', sans-serif;
  transition: all 0.5s;
  font-variation-settings: "wght" 700;
  font-size: 3.5rem;
  text-align: center;
  color: #ffffff;
  text-shadow:
    3px 3px 0px  #7D7DA1,
    8px 8px 0px #ec797d;
  padding: 10%;
  margin-top: 0!important;
  background-color: #F39A9D;
}
}

/* css for responsive website on computer */
@media screen and (min-width: 1001px) {
  /* code for data page */
  .allFindingsTitle {
    font-size: 20px;
    padding-left: 3%;
  }

  .allFindingsParagraphs {
    font-size: 20px;
  }
}

/* css for responsive website on phone */
@media screen and (max-width: 1000px) {
  /* code for data page */
  .allFindingsTitle {
    font-size: 15px;
    padding-left: 3%;
  }
  
  .allFindingsParagraphs {
    font-size: 80%;
  }
}

/* code to rotate take action boxes*/
.anyoneInfo1:hover{
  transform: rotate(-5deg);
}

.studentInfo1:hover{
  transform: rotate(5deg);
}

.schoolInfo1:hover{
  transform: rotate(-5deg);
}

.anyoneInfo2:hover{
  transform: rotate(5deg);
}

.studentInfo2:hover{
  transform: rotate(-5deg);
}

.schoolInfo2:hover{
  transform: rotate(5deg);
}

.anyoneInfo3:hover{
  transform: rotate(-5deg);
}

.studentInfo3:hover{
  transform: rotate(5deg);
}

.schoolInfo3:hover{
  transform: rotate(-5deg);
}

/* code for data page*/
/* percentages at the bottom of data page */
.firstPercent {
  padding-left: 9%;
  font-family: 'Istok Web', sans-serif; 
  color: #F39A9D;
  float: left;
}

.firstPerDescription{
  padding-top: 7%;
  padding-left: 6%;
  padding-right: 9%;
  padding-bottom: 3%;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: flex-start;
}

.secondPercent {
  padding-left: 9%;
  font-family: 'Istok Web', sans-serif; 
  color: #A6CCCE;
  float: left;
}

.secondPerDescription{
  padding-top: 7%;
  padding-left: 6%;
  padding-right: 9%;
  padding-bottom: 3%;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: flex-start;
}

.thirdPercent {
  padding-left: 9%;
  font-family: 'Istok Web', sans-serif; 
  color: #F8D78C;
  float: left;
}

.thirdPerDescription{
  padding-top: 7%;
  padding-left: 6%;
  padding-right: 9%;
  padding-bottom: 7%;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: flex-start;
}

/* findings titles and descriptions */
.problemTitle{
  font-family: 'Istok Web', sans-serif; 
  color: #F39A9D;
}

.problemDescription{
  font-family: 'Nunito', sans-serif; 
  color: #000000;
  margin-right: 15%;
  line-height: 155%;
}

.findingsTitle1{
  font-family: 'Istok Web', sans-serif; 
  color: #A6CCCE;
}

.findingsParagraph1{
  font-family: 'Nunito', sans-serif; 
  color: #000000;
  margin-right: 15%;
  line-height: 155%;
}

li{
  padding-bottom: 2%;
}

.findingsParagraph2{
  font-family: 'Nunito', sans-serif; 
  color: #000000;
  margin-right: 15%;
  line-height: 155%;
}

.findingsParagraph3{
  font-family: 'Nunito', sans-serif; 
  color: #000000;
  margin-right: 15%;
  line-height: 155%;
}

.findingsTitle2{
  font-family: 'Istok Web', sans-serif; 
  color: #F8D78C;
}

.findingsTitle3{
  font-family: 'Istok Web', sans-serif; 
  color: #7D7DA1;
}

/* data chart alignments */
.dataNumber1{
  padding-top: 1%;
  display: flex;
  align-items: flex-start;
}

.dataNumber2{
  display: flex;
  align-items: flex-start;
}

.dataNumber3{
  display: flex;
  align-items: flex-start;
}

.dataNumber4{
  display: flex;
  align-items: flex-start;
}

/* data chart sizing */
.dataChart1{
  margin-left: 3.5%;
  margin-bottom: 4%;
  border: solid 30px;
  border-color: #F39A9D;
}

.dataChart2{
  margin-left: 3.5%;
  margin-bottom: 4%;
  border: solid 30px;
  border-color: #A6CCCE;
}

.dataChart3{
  margin-left: 3.5%;
  margin-bottom: 4%;
  border: solid 30px;
  border-color: #F8D78C;
}

.dataChart4{
  margin-left: 4%;
  margin-bottom: 4%;
  border: solid 30px;
  border-color: #7D7DA1;
}

/* data chart borders */
.data1{
  border: none;
  width: 52vw; 
  height: 20vw;
}

.data2{
  border: none;
  width: 52vw; 
  height: 20vw;
}

.data3{
  border: none;
  width: 52vw; 
  height: 20vw;
}

.data4{
  border: none;
  width: 52vw; 
  height: 20vw;
}