* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }

:root {
  --pageBackground: rgb(163, 127, 147);
  --boxBackground: rgb(255, 188, 225);
  --navButtonBackground: rgb(255, 173, 218);
  --navBackgroundHover: rgb(255, 123, 196);
}

html {
  cursor: url("/static/images/cur.png"), default;
}

body {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-style: normal;

  text-align: center;

  background-color: var(--pageBackground);
}

a {
  cursor: url("/static/images/cur.png"), default;
  cursor: url("/static/images/cur_hover.png"), pointer;
  text-decoration: none;
  color: #3e6dd4;
}

a:visited {
  color: #3e6dd4;
}

a:hover {
  text-decoration: underline;
}

.sparkles {
  overflow: hidden;
}

/* - - - - - - - - - - - - - - - - - - - */
/* header */

.layout_header {
  width: 100%;
  padding: 10px;
}
.layout_header header {
  margin: auto;
  min-width: fit-content;
  text-align: center;
  width: fit-content;
}
.layout_header a {
  text-decoration: none;
  font-size: 60px;
  font-stretch: wider;
  color: var(--boxBackground);

  font-weight: 900;
}

.layout_header a:hover {
  color: #681779;
}


/* header responsive */

@media only screen and (max-width: 800px) {
  .layout_header a {
    font-size: 6vw;
  }

}


/* - - - - - - - - - - - - - - - - - - - */
/* navigation */
.layout_nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  text-align: center;
}
.layout_nav ul {
  display: inline-block;
  width: fit-content;

  background-color: var(--pageBackground);

  /* border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0; */



  /* overflow: hidden; */
}


/* - - - - - - - - - - - - - - - - - - - */
/* content */

.layout_content {
  background-color: var(--boxBackground);
  width: fit-content;

  text-align: center;
  align-items: center;
  align-content: center;
  display: inline-block;
  padding: 20px;


  border-width: 25px;
  border-style: solid;
  border-image: url("/static/images/bricks-border.png") 26 round;
  background-clip:padding-box
  
}

/* img {

} */

.sel_box {
  display: inline-block;
  /* gap:20px; */
  flex-direction: column;
  align-items: center;
  align-content: center;
  text-align: center;

  width: fit-content;
  padding: 5px;
}

.box_section_link {
  align-items: center;
  align-content: center;
  text-align: center;
}

.box_content {
  text-transform: lowercase;
}

.mctbh{
  width: min(60vw, 600px);
}
.projectImg{
  height: 175px
}


.layout_content .amongus {
  background-image: url("https://raw.githubusercontent.com/gummydummy77/gumgeon/master/functions/static/images/among-us.gif");
  background-repeat: repeat;
  height: 432px;
  width: 768px;
  align-items: center;
}

.box_row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

h3, h4 {
  margin: 0px;
}


/* about page responsive */

@media only screen and (max-width: 800px) {
  .gummy2 {
    display: none;
  }

}



/* - - - - - - - - - - - - - - - - - - - */
/* Art Gallery Page */

.kofi-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: 20px; */
}

.kofi-cta img {
  width: min(70vw, 500px);
}

.gallery-sect {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* width: 80vw; */
}

.row-1 img {
  height: calc((40vw / 3));
  object-fit: cover;
}

.row-m img {
  /* max-width: calc(40vw - 10px); */
  height: calc((40vw / 3) - (20px / 1.5));
  object-fit: cover;
}

.row-1, .row-2, .row-3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* Family Page */

.family-sect {
  /* display: flex; */
  /* flex-direction: row; */
  justify-content: center;
}

.family {
  display:grid;
  grid-template-columns: auto auto auto;

  align-items: center;

  justify-content: center;
  gap: 20px;
  /* max-width: 90vw; */
}

.member img {
  width: 10vw;
  float: left;
}

.member {
  /* display: block; */
  /* flex-direction: column; */

  gap: 30px;
  width: 25vw;
  overflow: hidden;
  font-size:larger;

  background-color:rgb(252, 197, 255);
  border: rgb(204, 126, 181);
  
  border-radius: 30px;
  border-width: 10px;
  border-style:solid;
}

@media only screen and (max-width: 1500px) {
  .family {
    grid-template-columns: auto auto;
  }
  .member img {
    width: 20vw;
  }
  .member {
    width: 40vw;
    font-size: large;
  }
}

@media only screen and (max-width: 1000px) {
  .family {
    grid-template-columns: auto;
  }
  .member img {
    width: 20vw;
  }
  .member {
    width: 60vw;
    font-size: large;
  }
}

/* Blog Page */

.blog-sect {
  /* display: flex; */
  /* flex-direction: row; */
  justify-content: center;
}

.blogs {
  display:grid;
  grid-template-columns: auto auto auto;

  align-items: center;

  justify-content: center;
}

.blog {
  /* display: block; */
  /* flex-direction: column; */

  width: 80vw;
  padding: 1%;
  overflow: hidden;
  font-size: larger;

  border: rgb(204, 126, 181);
  
  border-width: 10px;
  border-style:solid;
}

@media only screen and (max-width: 1500px) {
  .blogs {
    grid-template-columns: auto auto;
  }
  .blog {
    width: 80vw;
    font-size: large;
  }
}

@media only screen and (max-width: 1000px) {
  .blogs {
    grid-template-columns: auto;
  }
  .blog {
    width: 90vw;
    font-size: large;
  }
}


/* Wiki Tabs */

 /* Style the tab */
 .tab {

  width: 150px;
  height: 500px;

  margin: 0;
  padding: 0;

  background-color: var(--pageBackground);
  float: left;
  /* position: fixed; */
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: flex;
  background-color: var(--boxBackground);
  float: left;

  padding: 10px 16px;

  width: 100%;
  cursor: pointer;
  font-size: large;
  text-align: left;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--navButtonBackground);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--navButtonBackground);
}

/* Style the tab content */
.tabcontent {
  margin-left: 200px;
  display: none;
  padding: 6px 12px;
  
} 
.tabcontent img {
  width: min-content;
  max-width: 50vw;
  object-fit:scale-down;
}


/* Footer */

.layout_footer{
  text-align: center;
}
.layout_footer footer {
  border: 40px solid transparent;

  border-image-source:url("/static/images/footer-border.png"); 
  border-image-repeat: round;
  border-image-slice: 24 fill;

  margin: auto;
  padding: 0;
  width: fit-content;
}

/* Footer navigation */

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer_nav{
  display: flex;
  flex-direction: row;
  gap: 25px;
}

.footer_nav .footer_col {
  display: flex;
  flex-direction: column;
}

.footer_nav .footer_col ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
}
.footer_nav .footer_col a {
  color: black;
}
.footer_nav .footer_col .desc {
  font-size: 80%;
  color: lightgray;
}
.footer_nav .footer_col ul li a {
  color: lightgray;
  text-decoration: none;
}

.footer_nav .footer_col ul li a:hover {
  color: #9ab9fc;
  transition: .2s;
}

/* footer responsive */

@media only screen and (max-width: 800px) {
  .footer_nav{
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

}


/* - - - - - - - - - - - - - - - - - - - */
/* drop down navigation */
.dr_nav ul {
  /* background-color: var(--boxBackground); */
  /* background-image: url("/static/images/bricks-nav.png"); */
  list-style-type: none;
  overflow: hidden;
  /* padding: 5px; */
  text-align:center;

  border-width: 15px;
  border-style: solid;
  border-image: url("/static/images/bricks-border.png") 26 round;
  background-clip:padding-box
}
.dr_nav .nav_button {
  display: inline-block;
  /* border: 5px solid transparent; */
  /* border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1; */
  font-size: 17px;
}
.dr_nav li a, .nav_frontbutton {
  background-color: var(--navButtonBackground);
  display: inline-block;
  color: black;
  padding: 6px 10px;
  text-decoration: none;
}
.dr_nav li a:hover, .nav_button:hover {
  background-color: var(--navBackgroundHover);
  transition-duration: 0.2s;
}
.dr_nav .nav_content {
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  /* border: 5px solid transparent; */
  /* border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1; */
  display: none;
  position: absolute;
  background-color: var(--boxBackground);

  border-width: 15px;
  border-top: 0;

  border-style: solid;
  border-image: url("/static/images/bricks-border.png") 26 round;
  background-clip:padding-box
}
.dr_nav .nav_content a {
  color: black;
  text-decoration: none;
  display: block;
  text-align:left;
}
.dr_nav .nav_content a:hover {
  background-color: var(--navBackgroundHover);
  transition-duration: 0.2s;
}
.dr_nav .nav_button:hover .nav_content {
  display:block;
}