* { position: relative; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; }

:root { 
  --color-bg: #27262e;
  --color-tx: white;
  --color-ac: #fab81e;

  font: normal 16px/1 'titillium', sans-serif; 
  color: var(--color-tx);
}

body {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  gap: 40px 0;
  min-height: 100vh;
  background-color: var(--color-bg);
}

header {
  box-shadow: 0 2px 5px rgba(0,0,0, 0.5);

  & div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    padding: 15px 30px;
    margin: 0 auto;    
  }
  
  & nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    list-style: none;

    & a { 
      color: var(--color-tx);
      text-decoration: none;
    }
    & img { width: 24px; }
  }
}

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-column: span 2;
  margin-bottom: 40px;
  padding: 10px;
  background: rgba(25,25,25,.5);
  border-radius: 10px;

  & h2 { 
    font-size: 2rem; 
    text-align: center; 
  }
  & p {
    padding: 20px;
    background: #191919;
    color: var(--color-tx);
    border-radius: 10px;
  }
}

main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0 20px;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  place-self: start;

  > h1 { grid-column: span 2; }
}

article {
  padding: 20px;
  border-radius: 10px;
  background: white;
  color: black;
  line-height: 1.4;

  &.fullwidth { grid-column: span 2; }
  > :not(:is(h1,h2,h3))+* { margin-top: 20px; }

  & a {
    padding: 0 3px;
    background: var(--color-ac);
    border-radius: 3px;
    color: black;

    :hover { 
      background: var(--color-bg);
      color: var(--color-tx);
    }
  }
}

footer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 40px;
  box-shadow: 0 -2px 5px rgba(0,0,0, 0.5);

  & p {
    text-align: center;
    text-transform: uppercase;
    font-size: .75rem;
    line-height: 1.25;
  }
}

.admin-bar {
	position: fixed;
	top: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background-color: #333;
	border-radius: 0 10px 10px 0;
	box-shadow: 2px 0 10px 0px rgba(0,0,0, .15);
	z-index: 1;

  & a {
    display: grid;
    place-items: center;
    width: 35px;
    height: 50px;
    color: #fff;
    border-radius: 50%;
  }
  & img { width: 25px; }
  & hr { 
    width: 40%; 
    opacity: .3; 
    :last-child { display: none; } 
  }
}

h1 {
  font: 1.85rem trueno;
  color: var(--color-ac);
  text-transform: uppercase;
}
h2 {
  font: 1.4rem trueno;
  color: var(--color-ac);
  text-transform: uppercase;
}
h3 {
  font: 1.2rem trueno;
  color: var(--color-ac);
  text-transform: uppercase;
}
p {
  line-height: 1.4;
}
a {
  color: var(--color-ac);
  text-decoration: none;
}
ul {
  margin-left: 10px;
  list-style-position: inside;
}

input, textarea {
  display: block;
  width: calc(100% - 22px);
  margin-bottom: 20px;
  padding: 10px;
  background: #ddd;
  border: 1px solid #ccc;
  border-radius: 3px;

  &:focus { background: white; }
}
textarea {
  height: 170px;
  resize: vertical;
}

@font-face {
	font-family: 'titillium';
	src: url('/assets/fonts/titillium-web-regular-webfont.woff2') format('woff2'),
	url('/assets/fonts/titillium-web-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap; }

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