.title {
    font-size: 40px;
}
    
.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ------------------------ */
/* This code here is used for the index page */
/* ------------------------ */

.wallart1 {
  background-image: url('main-page-backdrop.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.cardtitle {
  width: 450px;
  margin-left: 60px;
  margin-right: auto;
  text-align: center;
}


.containment{
  flex: 1;
/* background-color: chartreuse; */  
  margin-left: 110px; 
  margin-right: auto;
  margin-bottom: 20px;
}

.author{
  position: relative;
  width: 100%;
  max-width: 250px;
  margin-left: 150px;
  font-size: 30px;
}

.expectation{
  position: relative;
  width: 250px;
  margin-left: 150px;
  font-size: 30px;
}

.general{
  position: relative;
  width: 400px;
  margin-left: 150px;
  margin-top: 8px; 
  font-size: 30px;
}

.confliction{
  position: relative;
  width: 400px;
  margin-left: 150px;
  font-size: 30px;
}

/* ------------------------ */
/* This code here is used for making the Menu. It's likely to be a pain.*/
/* ------------------------ */

.menu-and-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.menu{ 
  width: 200px;
  margin-left: 0px;
  margin-top: 25px;
  font-size: 30px;
 /* background-color: darkmagenta; */
  text-align: center;
}

.menu2{ 
  min-width: 100px;
  max-width: 200px;
  margin-left: 0px;
  margin-top: 225px;
  font-size: 30px;
 /*background-color: darkmagenta; */
  text-align: center;
}

.menu3{ 
  background-image: url('menu-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  max-width: 200px;
  height: 800px;
  margin-left: 0px;
  margin-top: 50px;
  font-size: 30px;
 /* background-color: darkmagenta; */ 
  text-align: center;
}

.sub-menu{
  margin-left: 15px;
  font-size: 15px;
  font-family: "Shadows Into Light", cursive;
  color: darkcyan;
}

.sub-menu a:link {
  color: darkcyan;
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

.sub-menu a:visited {
  color: darkcyan;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

.sub-menu a:hover {
  color: white;
  font-family: "Shadows Into Light", cursive;
  background-color: aquamarine;
  text-decoration: underline;
}

.sub-menu a:active {
  color: black;
  font-family: "Shadows Into Light", cursive;
  text-decoration: underline;
}

/* ------------------------ */
/* This code here is used for the general information page of my website */
/* ------------------------ */

.wallart2 {
  background-image: url('Info-page-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.wallart2b {
  background-image: url('Warning-page-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

}

.container {
   position: static;
   width: 1275px;
  /* background-color: red; */
   margin-left: auto;
   margin-right: auto;
   float:none;
 }

.denizines {
  position: relative;
  margin-top: 110px;
  width: 400px;
  margin-left: 250px;
}

.rise {
  position: relative;
  width: 400px;
  margin-left: 925px;
  font-size: 30px;
}

/* ------------------------ */
/* This code here is used for the avoiding conflict page of my website */
/* ------------------------ */
.danger {
   position: static;
   width: 1275px;
  /* background-color: red; */
   margin-left: auto;
   margin-right: auto;
   margin-top: 100px;
   float:none;
}

.defuse {
  position: relative;
  margin-left: 200px;
  margin-top: 80px;
  width: 400px;
}

.disengage {
  position: relative;
  width: 400px;
  margin-left: 925px;
  font-size: 30px;
}

/* ------------------------ */
/* This code here is used for the layer 3's of my website */
/* ------------------------ */

.wallart3 {
  background-image: url('knowledge-page-backdrop.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.wallartW {
  background-image: url('running-page-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.wallartF {
  background-image: url('flee-page-backdrop.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

}

.texture {
  background-color: #efc79b;
  border-left: 5px solid whitesmoke; 
  border-right: 5px solid whitesmoke;
  width: 500px;
  margin-left: 300px;
  margin-top: 225px;
  font-size: 30px;
}

.desend {
  background-color: #efc79b;
  border-left: 5px solid whitesmoke; 
  border-right: 5px solid whitesmoke;
  width: 650px;
  margin-left: 275px;
  margin-top: 375px;
  font-size: 30px;

}

.defusing {
  background-color: #efc79b;
  border-left: 5px solid whitesmoke; 
  border-right: 5px solid whitesmoke;
  width: 650px;
  margin-left: 225px;
  margin-top: 175px;
  font-size: 30px;
}

.disengage {
  background-color: #d05b5d;
  border-left: 5px solid whitesmoke; 
  border-right: 5px solid whitesmoke;
  width: 650px;
  margin-left: 275px;
  margin-top: 375px;
  font-size: 30px;
}

/* ------------------------ */
/* This code here is used for the extra layers of my website */
/* ------------------------ */

.wallartA {
  background-image: url('autho-page-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.wallartE {
  background-image: url('expectation-page-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.menuA{ 
  background-image: url('menu-backdrop.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 300px;
  margin-left: 0px;
  margin-top: 25px;
  font-size: 30px;
  height: 1000px;
 /* background-color: darkmagenta; */
  text-align: center;
}

.intro{
  background-color: #ffc939;
  border-left: 5px solid whitesmoke; 
  border-right: 5px solid whitesmoke;
  position: relative;
  width: 450px;
  margin-left: 700px;
  margin-top: 575px;
  font-size: 17px;
  
}

.expect{
  background-color: lightgray;
  border-left: 5px solid whitesmoke; 
  border-right: 5px solid whitesmoke;
  border-bottom: 50px solid whitesmoke;;
  position:relative;
  width: 700px;
  margin-left: 360px;
  margin-top: 375px;
  font-size: 17px;
}

/* ------------------------ */
/* This code here is used for diversifying links */
/* ------------------------ */

.Dr_Pepper {
  margin-left: auto;
  margin-right: auto;
  font-family: "Shadows Into Light", cursive;
  font-size: clamp(10px,20px,22px);
}

.Dr_Pepper a:link {
  color: aqua;
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

.Dr_Pepper a:visited {
  color: aqua;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

.Dr_Pepper a:hover {
  color: white;
  font-family: "Shadows Into Light", cursive;
  background-color: aquamarine;
  text-decoration: underline;
}

.Dr_Pepper a:active {
  color: black;
  font-family: "Shadows Into Light", cursive;
  text-decoration: underline;
}

/* ------------------------ */
/* This code here is used for diversifying links specifically for the Main page */
/* ------------------------ */

.Dietdr_Pepper {
  margin-left: auto;
  margin-right: auto;
}

.Dietdr_Pepper a:link {
  color: aqua;
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
}

.Dietdr_Pepper a:visited {
  color: darkcyan;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

.Dietdr_Pepper a:hover {
  color: white;
  font-family: "Shadows Into Light", cursive;
  background-color: aquamarine;
  text-decoration: underline;
}

.Dietdr_Pepper a:active {
  color: black;
  font-family: "Shadows Into Light", cursive;
  text-decoration: underline;
}

/* ------------------------ */
/* This code here is used for diversifying links specifically for the general information */
/* ------------------------ */

.zerosugar-DrPepper {
  margin-left: auto;
  margin-right: auto;
}

.zerosugar-DrPepper a:link {
  color: aqua;
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

.zerosugar-DrPepper a:visited {
  color: darkcyan;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

.zerosugar-DrPepper a:hover {
  color: white;
  font-family: "Shadows Into Light", cursive;
  background-color: aquamarine;
  text-decoration: underline;
}

.zerosugar-DrPepper a:active {
  color: black;
  font-family: "Shadows Into Light", cursive;
  text-decoration: underline;
}

/* ------------------------ */
/* This code here is used for diversifying links specifically for the general information */
/* ------------------------ */