/*/ / / CONTAINER FOR THE WHOLE PAGE / / /*/

body {
  background-color: #d90368;
  background-image: url(images/yap4.png);
  background-attachment: fixed;
  background-size: cover;
  margin: 100px auto;        /* top & bottom = 100px; left & right auto to center */
  max-width: calc(100% - 200px); /* ensures left+right margin at least 100px each if container is wide */
  padding: 0 100px;          /* ensure min padding/margin on left & right */
}

/*/ / / Headers and Paragraphs / / /*/

/*@font-face {
  font-family: sexpistols;
  src: url(font/sex_pistols.ttf);
}*/


h2 {
  font-size: 35px;
  text-align: center;
  transform: translateX(30px);
}

h3 {}

 /* .section:nth-of-type(15) {
background-image: url(images/image.png);
 } */

p {}

/* .section:nth-of-type(18) { Or the correct index */
    /* background-image: url(images/image.png); */
    
    /* ADD THESE LINES: */
    /* background-size: cover;      Scales the image to cover the entire area */
    /* background-repeat: no-repeat;Prevents tiling */
    /* background-position: center; Centers the image */
      /* height: 250px; */
  /* aspect-ratio: 1; */

  /* mask: radial-gradient(30px at 50% 30px,#0000 98%, #000) 50% -30px; */
  /* mask-size: 55px 100% */
/* } */
/* LARGE TEXT AT TOP */

.topblock {
}

.intro {
    border-radius: 10%;
  background: rgb(33, 33, 33);
  width: 60vw;
  height: auto;
  margin: 30px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-size: 1.5em;
   background-image: url(images/emoyaya.png);
   background-position: center center;
   background-size: 50%;
   color: white;
}

.caption {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
  color: white;
  border-radius: 10%;
  background: rgb(33, 33, 33);
  width: 60vw;
  height: auto;
  margin: 30px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  border-style: dotted;
  border-width: 5px;
}

.caption a {
  color: lightblue;
  /* optional, to make it visible */
  word-break: break-word;
  /* ensures long URLs wrap mid-word if needed */
}

.section h2,
.section h3,
.section p {
  margin: 0; /* remove default browser margins */
  padding: 0; /* ensure a clean base */
}


.section {
  /* border: 1px red solid;
    margin-bottom: 1em; */
  color: white;
  border-radius: 8%;
  background: rgb(33, 33, 33);
  width: 725px;
  height: auto;
  margin: 40px auto;
  padding: 15px 20px 20px 20px;
  line-height: 1.6;
}

.section h3 {padding: 10px 0px;}
/* parent must allow normal block layout */
.container {
  width: 100%;
  margin: 0;
}

h2{
  color: white;
  border-radius: 8%;
  background: rgb(33, 33, 33);
  width: 650px;
  height: auto;
  margin: 40px auto;
  padding: 15px 20px 20px 20px;
  line-height: 1.6;
 /* background-image: url(images/pump-removebg-preview.png);
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 20%; */
max-width: 800px;
  margin: 0 auto;
  border-style: dotted;
   border-width: 9px;

}
h3{
  color: white;
  border-radius: 8%;
  background: rgb(33, 33, 33);
  width: 650px;
  height: auto;
  margin: 40px auto;
  padding: 15px 20px 20px 20px;
  line-height: 1.6;
}
.section h2,
.section h3 {
  margin-bottom: 10px;
}

.section p,
.section span,
.section em,
.section strong {
  display: block;       
  margin-bottom: 12px;   
}


/* the element */
/* .title { */
/* width: 200px;        fixed square size */
/* height: 200px; */
/* margin: 40px auto;   centers horizontally */
/* border-radius: 50%;
  display: grid;
  place-items: center; */
/* } */

.title {
  /* font-family: "Livvic", sans-serif;
  font-weight: 600;
  font-style: normal; */
    font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
  color: aliceblue;
  text-align: center;

  background: rgb(33, 33, 33);
  width: 75vw;
  height: 275px;
  margin: 40px auto;
  /* border-radius: 50%; */
  display: grid;
  place-items: center;
  font-size: 3.5em;
    aspect-ratio: 1;

  mask: radial-gradient(30px at 50% 30px,#0000 98%, #000) 50% -30px;
  mask-size: 55px 100%;

}

/*/ / / TOP NAVIGATION AREA / / /*/


header {}

nav {
font-size: 20px; 
text-transform: uppercase; 

}

nav a {}

/*/ / / PAGE SECTIONS / / /*/

header,
nav,
main,
footer {
  font-family: "Livvic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

main {
  /*This adds styles to just the main content area. */
}

footer {
  /*Specific styles for just the footer. */
  background-color: #29274c;
  border-radius: 10px;
  padding: 5px;
  color: white;
  text-align: center;
}



/* / / / REGULAR PAGE LINKS / / / */

/*Sets default links style*/
a:link {
color: #87f1ff;
}

/*Sets default link mouseover style*/
a:hover {
  color: #f75c03;
}

/*Sets default link down-click style*/
/* a:active {} */

/*Sets default visited link style*/
/* a:visited {} */


/*/ / / TABLE STYLES / / /*/


table {
    margin-bottom: 1em;
/* background: rgb(33, 33, 33); */
  width: 800px;
  /* height: auto; */
  /* margin: 30px auto; */
  text-align: center;
  display: block;
  font-size: 18px;
    /* border-collapse: collapse !important;
    border-spacing: 0px !important;
     line-height: 1.2; */
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

th td tr {
  max-width: 15%;
  word-wrap: break-word !important;
  overflow: hidden;
  text-overflow: ellipsis;
  /* padding: 0 !important;
  margin: 0 !important; */
}


hr{
  color: white;
  height: 3px;
clear: both;
width: 800px;
border: none;
border-top: 1px white;
margin-right: auto;
margin-left: auto;
background-color: white;
} */




.rubik-moonrocks-regular {
  font-family: "Rubik Moonrocks", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.mountains-of-christmas-regular {
  font-family: "Mountains of Christmas", serif;
  font-weight: 400;
  font-style: normal;
}

.mountains-of-christmas-bold {
  font-family: "Mountains of Christmas", serif;
  font-weight: 700;
  font-style: normal;
}

.dokdo-regular {
  font-family: "Dokdo", system-ui;
  font-weight: 400;
  font-style: normal;
}

.livvic-thin {
  font-family: "Livvic", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.livvic-extralight {
  font-family: "Livvic", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.livvic-light {
  font-family: "Livvic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.livvic-regular {
  font-family: "Livvic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.livvic-medium {
  font-family: "Livvic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.livvic-semibold {
  font-family: "Livvic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.livvic-bold {
  font-family: "Livvic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.livvic-black {
  font-family: "Livvic", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.livvic-thin-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.livvic-extralight-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.livvic-light-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.livvic-regular-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.livvic-medium-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.livvic-semibold-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.livvic-bold-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.livvic-black-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 900;
  font-style: italic;
}