@import url("https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css");
@import url('https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css');

/* Font */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600&display=swap");

/* Override Water.css with Catppuccin Mocha */
:root {
	--background-body: var(--ctp-mocha-base);
	--background: var(--ctp-mocha-mantle);
	--background-alt: var(--ctp-mocha-crust);

	--text-main: var(--ctp-mocha-text);
	--text-bright: var(--ctp-mocha-rosewater);
	--text-muted: var(--ctp-mocha-subtext0);

	--links: var(--ctp-mocha-blue);
	--focus: var(--ctp-mocha-lavender);
	--border: var(--ctp-mocha-surface2);

	font-family: "Lexend", system-ui, sans-serif;
}



body {
	background-color: var(--ctp-mocha-base);
	font-family: "Lexend", system-ui, sans-serif;
	min-height: 100vh
	
}

body, button, input, select, textarea {
    font-family: "Lexend", system-ui, sans-serif;
}






input,
select,
textarea,
button {
  background-color: var(--ctp-mocha-mantle); 
  color: var(--ctp-mocha-text); 
}


input:focus,
select:focus,
textarea:focus,
button:focus {
  background-color: var(--ctp-mocha-mantle); 
  border-color: var(--ctp-mocha-blue); 
  color: var(--ctp-mocha-rosewater);
}


::placeholder {
  color: var(--ctp-mocha-subtext0);
  opacity: 1;
}

select {
    display: inline-block;  /* stays on the same line */
}







.guestbookarea {
    border: 1px solid var(--ctp-mocha-lavender);
    margin: 0 auto;
    max-width: 30rem;
    padding: 10px
}

#welcome {
    color: var(--ctp-mocha-peach);
    margin: 0;
    text-align: center
}

#madeby {
    margin: 0;
	font-size: 12px;
    text-align: right;
	color: var(--ctp-mocha-subtext0);
}



a {
    color: var(--ctp-mocha-rosewater);
    text-decoration: none
}

form {
    margin: 10px
}

#sessionmsg {
    color: var(--ctp-mocha-red);
    margin: 10px
}

.inputid,
.user {
    font-weight: bold
}

.inputfields,
#verification {
    background-color: var(--ctp-mocha-crust);
    color: var(--ctp-mocha-blue);
    font-size: 14px;
    width: 90%
}

#verification {
    max-width: 100px
}

.outputarea {
    border: 1px solid var(--ctp-mocha-lavender);
    margin: 5px;
    padding: 0 5px
}

.user p span {
    float: right;
    font-weight: normal
}

.pagination {
    text-align: center;
}

.pagination a {
    display: inline-block;
    margin: 5px 15px;
}

#currentpage {
    color: var(--ctp-mocha-peach);
}