/* Hi!! You can use any snippets of code from here. I myself used some code from Bootleg blog and Katebulka's bakery.
Also, please, DO NOT use icons and pics from this site, I drew them myself and didn't intend them to be used by someone else :c
June 2025 */

/* main design */

.header {
  padding: 80px;
  text-align: center;
  background-image: url('/icons/Header.png');
  height: auto;
  width: auto;
  background-repeat: no-repeat;
  color: white;
}

@font-face {
    font-family: 'THELASTKINGDOM';
    src: url('/fonts/THELASTKINGDOM.woff2') format('woff2'),
         url('/fonts/THELASTKINGDOM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.menu { display: grid;
    grid-template-columns: auto 2fr 2fr 2fr 2fr 2fr auto;
    column-gap: 8px;
}
.menu > div {
  padding: 0px;
  font-size: 30px;
  text-align: center;
}

.container {  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 15px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  grid-template-areas:
    "side1 middle side-2"
    "side1 middle side-2"
    "side1 middle side-2";
}

.middle { 
    grid-area: middle;
    background: url('/icons/bg_paper.jpg');
    background-repeat: repeat;
    min-height: 65vh;
    height: 800px;
    width: 800px;
	border: 20px solid transparent;
	border-image: url('/icons/paperborder.png') 34 round;
 }
 

 .side1 { 
    grid-area: side1;
 }
 
.side-2 { 
    grid-area: side-2; 
}

/* invitation page */
.invitation { display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 2fr;
	grid-template-rows: 2fr 2fr 2fr;
    column-gap: 8px;
	margin-top: 200px;
	margin-bottom: auto;
	margin-left: 100px;
	margin-right: 100px;
}
.invitation > div {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
}

/* body */

body {
    margin: 0 auto;
    margin-top: 0px;
    font-family: 'THELASTKINGDOM', monospace;
    text-align: center;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25);
    letter-spacing: 0.5px;
    background-image: url('/icons/bg_green.PNG');
    background-repeat: repeat;
}