/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@100..900&display=swap');

:root {
  /*--lshades: #A8DADCFF;*/
  --lshades: #c5e9eb;
  --dshades: #F1FAEEFF;
  --mshades: #d1e9ebff;
  --primary: #457B9DFF;
  /*--color-text: #1D3557FF;*/
  --color-text: #A4a4a4;

  --background-size: 48;
}

/* background-size/16 = time */

@keyframes background-movement {
 from {
    background-position: 0 0;
  }

  to {
    background-position: calc(var(--background-size) * 1px) calc(var(--background-size) * 1px);
  }
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--color-text);
}

html {
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  color: var(--color-text);
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='svg_1' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill-opacity='.5' fill='%23303030' %3E%3Cg%3E %3Cg id='center' transform='rotate(45, 50, 50)'%3E %3Cg%3E %3Crect x='37.5' y='47.5'  width='25' height='5' /%3E %3C/g%3E %3Cg%3E %3Crect x='47.5' y='37.5' width='5' height='25' /%3E %3C/g%3E %3C/g%3E %3Cg id='top-right' transform='rotate(45, 100, 0)'%3E %3Cg%3E %3Crect x='87.5' y='-2.5' width='25' height='5' /%3E %3C/g%3E %3Cg%3E %3Crect x='97.5' y='-12.5' width='5' height='25' /%3E %3C/g%3E %3C/g%3E %3Cg id='top-left' transform='rotate(45, 0, 0)'%3E %3Cg%3E %3Crect x='-12.5' y='-2.5' width='25' height='5' /%3E %3C/g%3E %3Cg%3E %3Crect x='-2.5' y='-12.5' width='5' height='25' /%3E %3C/g%3E %3C/g%3E %3Cg id='bottom-right' transform='rotate(45, 100, 100)'%3E %3Cg%3E %3Crect x='87.5' y='97.5' width='25' height='5' /%3E %3C/g%3E %3Cg%3E %3Crect x='97.5' y='87.5' width='5' height='25' /%3E %3C/g%3E %3C/g%3E %3Cg id='bottom-left' transform='rotate(45, 0, 100)'%3E %3Cg%3E %3Crect x='-12.5' y='97.5' width='25' height='5' /%3E %3C/g%3E %3Cg%3E %3Crect x='-2.5' y='87.5' width='5' height='25' /%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") repeat-x;
  background-color: #121212;
  background-repeat: repeat;
  animation: background-movement calc(calc(var(--background-size) / 16) * 1s) linear infinite;
  width: 100%;
  background-size: calc(var(--background-size) * 1px);
  margin: 0;
  height: 100%;
  background-clip: padding-box;
  background-position: 0 0;
  overflow: auto;
  line-height: 1.5;
}

/*
box-shadow: 0 4px 8px 0 var(--a0grey), 0 6px 20px 0 var(--a1grey);
max-width: 35%;
    
    */

#navbar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s, opacity 0.1s;
  opacity: 0;
  background-color: var(--mshades);
  color: var(--color-text);
  border-top: .125rem solid var(--primary);
  border-right: .125rem solid var(--primary);
  border-bottom: .125rem solid var(--primary);
}

#navbar h1 {
  padding: .25rem .5rem .75rem;
  color: var(--color-text);
  display: block;
  transition: 0.3s;
  text-align: center;
  border-bottom: .125rem solid #474747;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

#navbar a {
  padding: .5rem .5rem .5rem 32px;
  text-decoration: none;
  font-size: 1.5rem;
  color: var(--color-text);
  display: block;
  transition: 0.2s;
  text-align: left;
  border: none;
}

#navbar a:hover {
  color: var(--primary);
  border-left: .25rem solid var(--primary);
}

#navbar #navNavToggle {
  position: absolute;
  top: 0;
  right: 2rem;
  font-size: 3rem;
  margin-left: 50px;
}

#header h1 {
  text-align: center;
  line-height: auto;
  background-color: rgba(0, 0, 0, 0);
  color: var(--color-text);
  border-top: .25rem solid var(--primary);
  border-bottom: .25rem solid var(--primary);
  transition: .5s;
  font-size: 2rem;
}

#container {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  margin: 1rem 0 0;
  transition: .5s;
}

#pageNavToggle {
  top: 0;
  left: 0;
  background-color: var(--mshades);
  padding: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1.5rem;
  border-radius: 0 1.5rem 1.5rem 0;
  width: auto;
  display: block;
  margin: auto auto auto 0;
  transition: .5s;
  border-top: .125rem solid var(--primary);
  border-right: .125rem solid var(--primary);
  border-bottom: .125rem solid var(--primary);
}

#et-al {
  display: block;
  transition: .5s;
  padding: 1rem;
  min-width: 272px;
  max-width: 85%;
  margin: auto;
}

#et-al div {
  background-color: #2828287A;
  line-height: 170%;
  padding: 1rem;
  transition: 0.2s;
  margin: 1rem auto;
  display: block;
  border: var(--primary) .125rem solid;
  font-family: 'Inter', sans-serif;
  max-width: 70%;
  backdrop-filter: blur(3px);
  border-radius: .25rem;
}

div h1,
div h2 {
  padding: 1rem;
  margin: .5rem auto;
  border-bottom: .125rem solid var(--primary);
  font-family: 'Inter', sans-serif;
  text-align: center;
}

div p {
  padding: 0 1rem;
}

.notice {
  --primary: #E63946FF;
  border-width: .25rem !important;
}

div#imageContainer {
  background:
    linear-gradient(to right, var(--primary) 0.125rem, transparent 0.125rem) 0 0,
    linear-gradient(to left, var(--primary) 0.125rem, transparent 0.125rem) 100% 100%,
    linear-gradient(to bottom, var(--primary) 0.125rem, transparent 0.125rem) 0 0,
    linear-gradient(to top, var(--primary) 0.125rem, transparent 0.125rem) 100% 100%;
  background-repeat: no-repeat;
  background-size: 3rem 3rem;
  margin: 0 auto;
  position: relative;
  border: none;
}

@media screen and (max-width: 600px) {
  body div a {
    height: auto;
    padding: 3% 1%;
    max-width: 75%;
    display: block;
  }

  #et-al,
  #et-al div {
    max-width: 95%;
  }
}