* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	background-image: url(/i/background.webp);
    background-size: cover;
	background-attachment:fixed;
}

body {
	margin: 0;
	padding: 7em 0 0;
	font-family: "Gotham A", "Gotham B", Montserrat, Helvetica, arial, sans-serif;
	font-size: 1.8rem;
	line-height: 160%;
}

header {
    position: fixed;
    background: #FFF;
    width: 100%;
    left: 0;
    top: 0;
	padding:0 1em;
}

.nav a, .nav a:visited, .nav a:active {
	color:#000;
	text-decoration:none;
}

h1 {
	font-size: 4rem;
	line-height: 110%;
}
p {
	margin: 20px 0;
	padding: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wrap {
	padding: 20px;
	margin: 0 auto;
}
input[type=text],
input[type=password],
input[type=url] {
	width: 100%;
	margin: 0;
	padding: 1rem 1.5rem;
	font-size: 1.8rem;
}
button, .btn {
	padding: 1rem 1.5rem;
	background-color: #658D1B;
	font-size: 1.8rem;
	color: white;
	text-shadow: 0 2px 0 darkgreen;
	border: 0;
	border-radius: 4px;
	text-decoration:none;
}

.btn-small {
	font-size:1em;
	padding:.5rem 1rem;
}

.link {
	color:#658d1b;
	text-decoration:none;
}

.delete {
	color:#8d3030;
}

.tiny-url {
	padding: 20px 0;
	border-top: 1px solid #CCCCCC;
	font-size: 4rem;
	line-height: 140%;
}
.tiny-url span {
	color: #999999;
	font-size: 1.8rem;
	line-height: 140%;
}
.error {
	padding: 20px;
	background-color: indianred;
	border: 1px solid darkred;
}

.max-width {
	max-width:1200px;
	margin:auto;
}

.margin-bottom {margin-bottom:3rem;}

.flex {display:flex}
.between {justify-content:space-between;}
.vcentre {align-items:center;}
.vbase {align-items:baseline;}
.gap {
	gap:1rem;
}
.end {align-items:end;}
.nav {
	list-style-type:none;
}

.login-form--container,
.generator-form--container,
.edit-entry {
    max-width: 25em;
    text-align: center;
    background: #FFFFFF;
    padding: 1em 2em 4em;
    transform: translateY(-50%);
    margin-top: calc(50vh - 7em);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .25);
    border-radius: .2em;

}

.generator-form--container {max-width:50em;}

.login-form--container label,
.generator-form--container label,
.edit-entry label {
	text-align:left;
	padding:.5em 0;
	display:block;
}

.login-form--container button {width:100%;}

.search-form-container {
	background: #FFFFFF;
	padding: 2em;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .25);
    border-radius: .2em;
}
.search-form-container div {width:45%;}


.search-form-container div:last-child {
	width:10%;
}

.custom_shortlink {display:none;}

.custom_trigger:checked + .custom_shortlink {display:flex;}
	
.table {
	border-collapse:collapse;
	border:0;
	width:100%;
	max-width:100vw;
	margin:auto;
	word-wrap:break-word;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .25);
    border-radius: .2em;
}

.table th {
	background-color:rgb(55, 58, 54);
	color:white;
	padding:1rem 2rem;
	font-size:.75em;
}

.table tr:nth-child(odd) td {
	background-color:rgb(247,247,247);
}
.table tr:nth-child(even) td {
	background-color:rgb(255,255,255);
}

/*.table td:first-child, .table th:first-child {
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
}
.table td:last-child, .table th:last-child {
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
}*/

.table td {
	padding:1rem 2rem;
	max-width:35vw;
}

.table tr th:nth-child(1), .table tr td:nth-child(1), {
	font-weight:bold;
	width:20%;
}

.table tr th:nth-child(2), .table tr td:nth-child(2) {
	width:40%;
}

.table tr th:nth-child(3), .table tr td:nth-child(3),
.table tr th:nth-child(4), .table tr td:nth-child(4) {
	width:20%;
}

.table td:nth-child(2) {line-height:100%;}

.destinationURL, .notes {
	font-size:.75em;
}
.info {
	font-size:.75em;
	color:#373a36;
}

.notes {
	color:#009ca6;
	line-height:1.2em;
	font-style:italic;
}

.info-value {
	font-weight:bold;
	color:#658d1b;
}

.edit-entry-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.6); /* semi-transparent overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* ensures it's above other content */
}

.edit-entry {
    background-color: #fff;
    width: 80%;
    max-width: 600px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-height: 90vh;
    overflow-y: auto;
	
}

.notices {
	text-align:center;
	background:#cc8a00;
	color:#FFF;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .25);
    border-radius: .2em;
}