html {
  margin: 0;
  padding: 0;
overflow-y:scroll;
overflow-x:hidden;
}
/*The structure for the webpage to scroll and work*/

body {
  margin: 0;
  padding: 0;
  background: #fff;
/*	Background color for your webpage*/
  font-family: Helvetica Neue, Arial, sans-serif;
/*	font for your webpage*/
  color: #fffbfb;
 overflow:hidden;
text-align: center;
}
/* ------------- */

.div1 {
/*  div1 are the top and bottom boxes with the links to other categories of the site*/
   background-color: white;
  align-items: center;
  align-content: left;

 
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 10px;
/*Margins create the sizing*/

}

img {
max-height: 100%;
  max-width: 100%;
  display: block;
}

{
	box-sizing: border-box;
/*	Haven't figured out yet*/
}

body {
  color: #010006;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  text-align: center;
/*	body is <b> in html*/
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1em;
  font-size: 16px;
  font-size: calc(16px + 1vw);


webkit-overflow-scrolling;
webkit-scrollbar
}

a {
  color: #3c10e1;
  text-decoration: none;
}
a hover {
  color: #3c10e1;
}
/* <a> are the links to other webpages*/

centered-cover {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

-webkit-overflow-scrolling;
-webkit-scrollbar
	
  width: 100%;
  height: 100vh;
}
/*Haven't figured out yet*/

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

@media screen and (min-width: 800px) {
  body {
    font-size: 24px;
  }
}
/*controls the layout on the screen*/

h1 {
  line-height: 1.5;
  margin: 0.5em 0;
}

p {
  font-family: 'Droid Serif', serif;
  line-height: 1.5;
  margin: 0.5em 0;
color: black;
overflow:initial;
text-align: left;
}
/*Font for the paragraph <p>*/
ul {
    list-style: disc; /* Keep the default bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    text-align: center; /* Center align text */
}

li {
    display: block; /* Make list items inline-block for horizontal alignment */
    margin: 0 10px; /* Optional: Add horizontal margin between items */
}
/*For the Lists*/



.container {
  max-width: 800px;
overflow: hidden;
/*	what is inside the boxes in the webpage*/

scroll-behavior: auto;
scroll-behavior: smooth;

}
.xcontainer {
  margin: 150px auto;
  width: 500px;
  height: 205px;
  overflow: visible;
  border: 10px solid;
  border-top-color: #856036;
  border-left-color: #5d4426;
  border-bottom-color: #856036;
  border-right-color: #5d4426;
  position: relative;
text-align: left;
padding: 4;
}

A.aclinks  { font-family: Arial, Helvetica, Sans-Serif; color:black; font-size: 14pt; text-decoration: none; font-weight: bold}

A.aclinks:active  { font-family: Arial, Helvetica, Sans-Serif; color: black; font-size: 12pt; text-decoration: none; font-weight: bold}


A.aclinks:visited  { font-family: Arial, Helvetica, Sans-Serif; color: black; font-size: 16pt; text-decoration: none; font-weight: bold}


A.aclinks:hover  { font-family: Arial, Helvetica, Sans-Serif; color: green; font-size: 14pt; text-decoration: underline ; font-weight: bold}


A.acalinks  { font-family: Arial, Helvetica, Sans-Serif; color:black; font-size: 9pt; text-decoration: none; font-weight: bold}

card-user-profile {
  position: relative;
  z-index: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
  border: 0;
  border-radius: 0;
  background: #fefefe;
  box-shadow: none;
  overflow: hidden;
  color: #0a0a0a;
}

card-user-profile > last-child {
  margin-bottom: 0;
}

card-user-profile:hover card-user-profile-img {
  opacity: 1;
}

card-user-profile-content {
  position: relative;
}

card-user-profile-content::before {
  position: absolute;
  content: '';
  top: -3.4375rem;
  left: -1.875rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.4375rem 0 0 31.25rem;
  z-index: 0;
  border-color: transparent transparent transparent #fefefe;
}

card-user-profile-actions {
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  padding: 1rem;
  background: #e6e6e6;
  background: #fefefe;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

card-user-profile-actions > :last-child {
  margin-bottom: 0;
}

card-user-profile-img {
  max-width: 100%;
  opacity: 0.85;
  transition: all 0.25s ease;
}

card-user-profile-avatar {
  position: absolute;
  bottom: 100%;
  left: 1rem;
  z-index: 2;
  max-width: 5.625rem;
}

card-user-profile-avatar img {
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(10, 10, 10, 0.3);
}

card-user-profile-name {
  margin-bottom: 0;
  font-weight: 300;
  font-size: 1.5rem;
}

card-user-profile-button {
  margin-bottom: 0;
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
	text-align: center;
}

card-user-profile-button + .card-user-profile-button {
  margin-center: 1rem;
	text-align: center;
}

card-user-profile-info {
  font-size: 0.875rem;
  letter-spacing: 1px;
  opacity: 0.8;
	text-align: center;
}
/*ask about when done with all*/

photo {
  position: absolute;
  animation: round 16s infinite;
  opacity: 0;
}
/*ask about when done with all*/



@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
/*ask about when done with all*/

img:nth-child(1) {
  animation-delay: 12s;
}

img:nth-child(2) {
  animation-delay: 8s;
}

img:nth-child(3) {
  animation-delay: 4s;
}

img:nth-child(4) {
  animation-delay: 0s;
}
/*ask about when done with all*/

div.c {
    text-align: right;

li { font-family: Helvetica Neue, Arial, sans-serif; font-size: 12pt; color: black; font-weight: bold;  margin-left:15px;
behavior: url(PIE.htc);}

A.aclinks  { font-family: Arial, Helvetica, Sans-Serif; color:black; font-size: 9pt; text-decoration: none; font-weight: bold;

behavior: url(PIE.htc);}


A.aclinks:active  { font-family: Arial, Helvetica, Sans-Serif; color: black; font-size: 9pt; text-decoration: none; font-weight: bold;
behavior: url(PIE.htc);}


A.aclinks:visited  { font-family: Arial, Helvetica, Sans-Serif; color: black; font-size: 9pt; text-decoration: none; font-weight: bold;behavior: url(PIE.htc);}

A.aclinks:hover  { font-family: Arial, Helvetica, Sans-Serif; color: green; font-size: 9pt; text-decoration: underline ; font-weight: bold}



.acprojecttext { font-family: "Times New Roman",Times,Serif;; font-size: 11pt; color: black; font-weight: normal; margin-left:15px;margin-right:15px;
behavior: url(PIE.htc);}

.acfactext { font-family: Arial, Helvetica, Sans-Serif; font-size: 11pt; color: black; font-weight: bold;  margin-left:15px;
behavior: url(PIE.htc);}

.acfacbold { font-family: Arial, Helvetica, Sans-Serif; font-size: 12pt; color: black; margin-left:15px;font-weight: normal; line-height: 14pt; behavior: url(PIE.htc);}

.actoptext { font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-weight:lighter;color: black; text-shadow: 0px 1px 11px #ab98ab;
filter: dropshadow(color=#ab98ab, offx=0, offy=0);behavior: url(PIE.htc);  }

.actoptextnil { font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-weight:lighter;color: black; text-shadow: 1px 1px 11px #ab98ab;
filter: dropshadow(color=#ab98ab, offx=0, offy=1);behavior: url(PIE.htc);  }

.acbottomtext { font-family: Arial, Helvetica, Sans-Serif; color: white; font-size: 8pt; font-weight: bold; margin-left:15px; }

.acwhitetext  { font-family: Arial, Helvetica, Sans-Serif; color: white; font-size: 9pt }

.acnormalbold { font-family: Arial, Helvetica, Sans-Serif; font-size: 9pt; font-weight: bold }

.actextblack  { font-family: Arial, Helvetica, Sans-Serif; font-size: 9pt; color:black}

.acsectionheading { font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-weight: bold }

.acpageheading { font-family: Arial, Helvetica, Sans-Serif; color: black; font-size: 8pt; text-decoration: none ; font-weight: bold}

A.other  { font-family: Arial, Helvetica, Sans-Serif; color:navy; font-size: 10pt; text-decoration: none; font-weight: bold; behavior: url(PIE.htc);}

A.other:active  { font-family: Arial, Helvetica, Sans-Serif; color: white; font-size: 10pt; text-decoration: none; font-weight: bold}

A.other:visited  { font-family: Arial, Helvetica, Sans-Serif; color: navy; font-size: 10pt; text-decoration: none; font-weight: bold}

A.other:hover  { font-family: Arial, Helvetica, Sans-Serif; color: navy; font-size: 10pt; text-decoration: underline ; font-weight: bold}

A.other:hover  { font-family: Arial, Helvetica, Sans-Serif; color: navy; font-size: 10pt; text-decoration: underline ; font-weight: bold}

li em {font-family: Arial, Helvetica, Sans-Serif; font-size: 9pt; color: 
  black; text-indent: 2em; font-weight:lighter; margin-left:15px;} 
  .gray{background-color: #0909c9} .blue{background-color: #4040ff} 
  .yel{background-color: #0DAB05}
	/*ask about when done with all*/