@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Fragment+Mono:ital@0;1&family=Trispace:wght@100..800&display=swap');

* { 
inset: 0;
box-sizing: border-box;
  --bgcolor: #0C0C0C;
  --textcolor: #0C0C0C; /*Night black*/
  --highlight: #ff7900; /*Safety orange*/
}
/*   --highlight: #be2d32; */
@media (prefers-color-scheme: dark) {
  * { 
  --bgcolor: #0C0C0C; /*Night black*/
  --highlight: #ff7900; /*Safety orange*/
  }
} 

a {
  text-decoration: none;
  color: #FFE6CD; /*Antique white*/
}

a:hover {
    color:#00E0C6; /*turquoise*/
    text-decoration:none; 
    cursor:pointer;  
}
 
body, h1, h2, h3, h4, h5, h6, p, ul, li {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #F5F1ED;
  /*background: radial-gradient(circle, rgba(190,45,50,1) 0%, rgba(120,7,7,1) 100%);*/
  background-image: url('/images/orange_cross.jpg'); /* image 88x88 */
  background-position: center;
  background-repeat: repeat;
  background-size: 88px 88px;
  z-index: 0;
  padding: 20px;
}

.page{
border-top-left-radius:1rem;
border-top-right-radius:1rem;
background-color:rgba(30,30,32,0.75);
padding:2em;
padding-bottom:2rem;
border-bottom:solid #b37c7c
}

header h1 {
  font-family: 'DotGothic16', sans-serif;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFE6CD;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul {
  display: flex;
  flex-flow: row nowrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
}

nav ul li { margin: 4px; }

nav a, nav button, .popUp button {
  font-family: "Fragment Mono", sans-serif;
  font-size: 1em;
  display: block;
  padding-inline: 0.7em;
  padding-block: 0.7em;
  background-color: var(--bgcolor);
  border: 1px solid var(--highlight);
  box-shadow: 4px 4px var(--highlight);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--highlight);
}

nav a:hover, nav button:hover, .popUp button:hover {
  background-color: var(--highlight);
  border: 1px solid var(--highlight);
  color: var(--bgcolor);
  box-shadow: none;
  transform: translate(4px, 4px);
  cursor: pointer
}

main {
  position: relative;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  margin-block: 3em;
  background-color: #ffffff00;
  padding: 20px;
  margin-bottom: 20px;
}

main h1 {
  font-family: 'DotGothic16', sans-serif;
  font-size: 34px;
  color: #FFE6CD;
  padding:.3em;
  border-bottom:1px solid #ffe6cd
}

main h4 {
  font-family: 'DotGothic16', sans-serif;
  font-size: 24px;
  padding:.3em;
  border-bottom:1px solid #ffe6cd
}

main h2 {
  font-family: "Fragment Mono", sans-serif;
  font-size: 1em;
  padding:.3em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom:1px solid #ffe6cd
}

.leftcolumn {
  flex: 0 0 70%;
  max-width: 800px;
  min-width: 340px;
  background-color: var(--bgcolor);
  border: 1px solid var(--highlight);
  box-shadow: 4px 4px var(--highlight);
  color: var(--highlight);
}

.rightcolumn {
  flex: 0 0 25%;
  max-width: 340px;
  min-width: 340px;
  background-color: var(--bgcolor);
  border: 1px solid var(--highlight);
  box-shadow: 4px 4px var(--highlight);
  color: var(--highlight);
}

.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

.card {
  padding: 10px;
  margin-top: 10px;
}

.row {
  display: flex;
  justify-content: center; 
  align-items: flex-start;
  gap: 1em; 
  flex-wrap: wrap; 
}

.fields{
  margin-top:1em;
  display:block
}

.field{
  display:flex;
  flex-wrap:wrap
}

.name{
  min-width:10em;
  width:33%;
  font-weight:700;
  text-align:center
}

.value{
  min-width:fit-content;
  width:67%;
  margin-left:0
}

.pfp-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pfp{
  padding:5px;
  border-top-left-radius:2rem;
  border-top-right-radius:2rem;
  border-bottom-left-radius:2rem;
  border-bottom-right-radius:2rem;
  width:250px;
  height:250px; 
}

.trans{
  border-bottom:2px solid;
  border-image:linear-gradient(90deg, #5bcefa 20%, #f5a9b8 20%, #f5a9b8 40%, #fff 40%, #fff 60%, #f5a9b8 60%, #f5a9b8 80%, #5bcefa 80%);
  border-image-slice:1
}

.imageblog{
	width: 550px;
	max-width: 100%;
}

footer {
  height: 40px;
  padding: 5px;
  background-color: #0c0807;
  color: #fff;
  display: flex;
  justify-content: center;
}

.badge{
  width:88px;
  height:31px;
  image-rendering:pixelated
}

@media screen and (max-width: 768px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    float: none;
    padding-left: 0;
  }
}