.profile-image {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}


/* this is to style the icons */
.icon{
  border-radius:560px;
  width: 200px;
  height: 200px;
  transition:all 1s;
}
.icon:hover{
  border-radius:20px;
  transition:all 1s;
}

.profile-info {
  margin-bottom: 20px;
}

.profile-info h2 {
  margin: 2;
  font-size: 24px;
  color: #c43a3a;

}

.profile-info p {
  margin: 5px 0;
  color: #777777;
}

.profile-description {
  font-size: 14px;
  line-height: 1.5;
}

.profile-tags {
  margin-top: 10px;

}



.image-gallery {
  display:flex;
  justify-content: center; /* Center the images horizontally */
  align-items: center; /* Center the images vertically */
  margin-top: 20px;
}

.image-gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
  margin-top:5px;
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  justify-content: center;
  align-items: center;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 5px;
}

.custom-fields {
  margin-top: 20px;

  color: #5e543e;
}

.custom-fields2 {
  margin-top: 20px;
  color: #e9e2d4;
}



.field-box {
  margin-bottom: 10px;
  padding: 2px;
  background-color: #dbd7d0;
  border-radius: 10px;
}

.field-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.field-value {
  margin: 0;
  text-align: right;
}
.divider {
 position: relative;
 padding:5px;
  }

.divider::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;

}

    .banner-image {
  text-align: center;
  margin-bottom: 20px;

}

.banner-image img {
  width: 500px;
  height: 150px;
  object-fit: cover;
}




/* this is to style the flags */
.flag{
	/* Prevent vertical gaps */
  width:180px;
  	/* Prevent vertical gaps */
	line-height: 2;
  column-count: 2; var(--columnCount);
  border-radius:5px;
  margin:10px;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(12,9,26,.5)) drop-shadow(-1px -1px 2px rgba(12,9,26,.5));
  filter: drop-shadow(1px 1px 2px rgba(12,9,26,.5)) drop-shadow(-1px -1px 2px rgba(12,9,26,.5));
}




/* this is to style the flags */
.stamps{
	/* Prevent vertical gaps */
  width:430px;
  	/* Prevent vertical gaps */
	line-height: 1;
  column-count: 4; var(--columnCount);
  border-radius:5px;
  margin:10px;
}


#buttons {

  width: 230px;
  height: 225px;
  overflow-y: scroll;
  margin: 5px;
  margin-top: 20px;
  padding: 3;


}

.half-width {
	display: flex;
	flex-flow: row wrap;
	width: 200%;
	min-height: 300px;

}

.half-width section {
	width: calc(50% - 2em);
	margin: 0 1em 2em 1em;
}



/* FONTS */


@font-face {
  font-family: poppins;
  src: url(https://dl.dropbox.com/scl/fi/trgkv4qkbo8mxtqad1o6x/Caramel-Milk.otf?rlkey=d6i7epi5nzgewn30h7wib2dx8&st=c0ic18cz&dl=0);
}

@font-face {
  font-family: minecraft;
  src: url(https://dl.dropbox.com/scl/fi/74qokxias03uwrfz3j239/Minecraft.ttf?rlkey=qrxsnw19u7abgwy8wnwr8felr&st=4744hi29&dl=0);
}

@font-face {
  font-family: fancake;
  src: url(https://dl.dropbox.com/scl/fi/dmtam208wrei47v8pv697/Fancake.ttf?rlkey=odfxn51wk966czttxrbp5a6z8&st=8wbrcdop&dl=0);
}

/* text styling */


/* this is to style the titles */
.title {
  font-size: 20px;
  font-family: minecraft;
  border-radius:40px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* this is to style the titles */
.title2 {
  font-size: 25px;
  font-family: fancake;
  margin: auto;
  text-align: center;
}


figcaption.gallery-caption {
  display:none;
}
figcaption.lightbox-caption {
  bottom:0;
  color:rgb(253, 252, 243);
  text-align:center;
  width:100%;
}


/* GALLERY CODE*/


    /* --- G3 // title --- */
    .titlecute {
      grid-area: title;
      position:relative;
      border-radius: 20px;
      background-color:rgba(228, 226, 220, 0.7) !important;
    }

    .cutegallery {
      grid-area: title;
      position:relative;
      border-radius: 20px;
      background-color:rgba(228, 226, 220, 0.336) !important;
      border: 2px solid rgb(154, 165, 168) !important;
    }

    /* these are to style your links */
a, a:link{
  color:#fff18b;
  transition: 1s all;
}
a:visited{
  color: #ffd58b;
  transition: 1s all;
}
a:hover{
  color: #ffbe8b;
  transition: 1s all;
}
a:active{
  color: #ffac8b;
  transition: 1s all;
}

/* this is to style the flags */
.flags{
	/* Prevent vertical gaps */
	line-height: 0;

column-count:4; var(--columnCount);

	column-gap:           var(--columnGap);

  width:440px;
  border-radius:5px;
  margin:5px;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(12,9,26,.5)) drop-shadow(-1px -1px 2px rgba(12,9,26,.5));
  filter: drop-shadow(1px 1px 2px rgba(12,9,26,.5)) drop-shadow(-1px -1px 2px rgba(12,9,26,.5));
}

/* this is to style the flags */

.half-width {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	min-height: 300px;

}

.half-width section {
	width: calc(50% - 2em);
	margin: 0 1em 2em 1em;
}

section.half-width pre {
	width: unset;
}