@font-face {
  font-family: "Block Berthold";
  src: url("../res/fnts/blockberthold.otf");
}

p {
  font-family:'Arial Narrow', Arial, sans-serif;
  text-wrap:wrap;
}
@keyframes MOVE-BG {
  from {
    background-position: 0 0;
  }
/*use negative width if you want it to flow right to left else and positive for left to right*/
  to {
    background-position: -500vw -300vh;
  }
}

body {
  background-color: #072AC8;
  background: url("../res/imgs/sparkling-sea.JPG");

  background-attachment: fixed;
  animation: MOVE-BG 600s linear infinite;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 100vw 100vh;
  /* background: url("../res/imgs/chill-guy.jpeg"); */
  /* background-size:contain; */
  /* background-color: #072AC8; */
  color: #072AC8;
  font-family: "VT323", monospace;
  margin:0;
  /* display:grid;
  grid-template-areas:
    "everything-else vertical-text"
  ; */
  /* #vertical-text{grid-area:vertical-text;} */
}

article {
  padding-bottom:1em;
}

#background-source {
  color:white;
  font-size:40pt;
  /* margin:0 auto 0; */
}

/**************************[ HEADER ]**************************/

header {
  border-radius:10px;
  background-color:#FFC600;
  text-align: center;
  border: 5px, none, #072AC8;
  border-style:double;
  margin:2% 10vw 0;
  overflow:hidden;
}

#title-graphic > img {
  width:100%;
}

#title-graphic{
  text-align: justify;;
  grid-template-areas:
    "title-left title-center title-center title-right"
  ;
  display:grid;
  width:100%;
}

#title-left {grid-area:title-left;

}
#title-right {grid-area:title-right;


  margin: 0 0 0 auto;
}

#title-center{grid-area:title-center;
  background-color: red;
  margin:0 auto 0;
  width:100%;
  height:100%;
}
img#title-center{
  height:21vw;
}

#neocities-row {
  
  border-top:#072AC8 dotted 1px;
  border-bottom:#072AC8 solid 1px;
  background-color:beige;
}

marquee img {
  padding:8px 0 6px;
  height:31px;
  margin:0px;
}

/**************************[ CONTENT BODY ]**************************/

main /*GRID-CONTAINER*/ {
  overflow:hidden;
  display:grid;
  grid-template-areas:
    "left left center center center center center right right right"
  ;
  margin:0 10vw 50px;
  box-shadow: 0px 0px 10px 1px white;
  /* border:solid 2px rgb(55, 5, 54); */
}


/**************************[ SECTION? COLUMNS ]**************************/

section {
  
  background:white;
  
  display:flex;
  flex-flow:column;
  /* align-items: center;
  justify-items: center; */
  /* padding: 0 40px 0; */
  /* background-color:blue; */
}

section p, ul {
  color:hsl(229, 91%, 71%);
  /* width:100%; */
  margin:0px 2em 0;
  /* background-color:red; */
}

ul {
  padding:0;
}

section h1, h2 {
  padding:0px 1em 0px;
  margin:0;
  margin:1em 0 0;
}

section h3, h4, h5, h6 {
  font-size:large;
  padding:0px 1.5em 0px;
  margin:2em 0 0;
}

section img {
  width:100%;
}

/* MAIN CONTENT GRID SYSTEM */
/* variants of section */
section.left {grid-area:left;
  border-right:0.5px dotted;
  min-width:100%;
  z-index:10;
}
section.center {grid-area:center;
  min-width:100%;
}
section.right {grid-area:right;
  min-width:100%;
  border-left:1px dotted;
  box-shadow: -5px -5px 10px rgba(76, 0, 130, 0.095);
  /* z-index: -10; */
}

.archive-header {
  /* justify-self:center;  */
  background: url("../res/imgs/sparkling-sea.JPG");
  background-color:#ffc80075;
  
  background-blend-mode:screen;
  border-radius:5px;
  border:solid 1px black;

  align-self: center;
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: black; 
  color:yellow;
  font-size:36pt;
  /* box-shadow:0 0 15px 15px grey; */
  /* transform: scaleX(01.5); */
  margin:10px;
}

/**************************[ LEFT COLUMN CONTENT ]**************************/
#navigation {
    background-color: #ffecca;
      box-shadow: 2.5px 10px 10px rgba(76, 0, 130, 0.095);
}
#navigation ul{
  color:black;
  list-style:lower-roman inside;
}
a {
  /* text-decoration:none; */
}


/**************************[ CENTER COLUMN CONTENT ]**************************/
#welcome {
}

#welcome h1 {
  color: black;
}


/**************************[ RIGHT COLUMN CONTENT ]**************************/
h3#status-note {
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  padding:10px 10px 10px;
  margin-left:10px;
  color:black;
  background-color:#A2D6F9;
  display:flex;
  justify-content:space-between;
  font-size:11pt;
  
}
#status-note img {
  width:30px;
  height:30px;
}
#a-space {
  /* background-color:black; */
  display:flex;
  flex-flow:column;
}

#a-space > figure  {
  float:right;
  
  min-width:90%;
  max-width:48%;
  /* border:black solid 1px; */
  background-color:lightcyan;
  margin:5% 2.5% 0;
  padding:0 2.5% 0;
}

#a-space > a{
  font-family:Arial, Helvetica, sans-serif;
  float:right;
  text-decoration: underline;
  padding:0 5% 0;
}

#image-grid {
  display:grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  grid-template-rows: 40% 40%;
  grid-template-columns: 40% 40%;
  padding: 10px;
}

#gallery {
  border-top:dotted #072AC8;
  border-bottom:solid #072AC8;
  background-color:#A2D6F9;
}

#gallery img {
  border:black solid 2px
}

#log {
  /* border-top:solid #072AC8; */
  /* border-bottom:solid #072AC8; */
  background-color: #ffd711;
  
}

#log .header{
  display:flex;
  flex-flow:row;
}
/**************************[ AFTER MAIN ]**************************/


footer {
  border-top:#FFC600 2px solid;
  background-color:#072AC8;
  font-family: Arial, Helvetica, sans-serif;
  color:white;
  height:100%;
  padding:70px;
}

.highlight {
  border-radius:5px;
  display: inline-block;
  padding: .25em 5px 5px;
  background: white;
}

#footer-grid{
  display:grid;
  grid-template-areas:
    "brand contact message";
  width:100%;
  grid-gap:20px;
  
}

footer h2{
  padding:0;
  margin:0;
}

.footer-column li {
  list-style: none;
}

#contact {grid-area:contact;


}

#message {grid-area:message;
  width:400px;
}

#brand {grid-area:brand;}

#faux-copyright {
  text-align:center;
  
  color:#FFC600;
}



/**************************[ RESPONSIVE CSS ]**************************/
/* changed from 800 to 000px temporarily */
@media only screen and (max-width: 950px) {
  .bg {
    background:none;
  }
  header {
    width:100vw;
    margin:0 0 0;
    padding:none;
    border:none;
  }

   main {
    width:100vw;
    margin:0 0 0;
    padding:none;
    border:none;
   }
  section {
    
  }

  /* MAIN CONTENT GRID SYSTEM */
  /* children of .container-column */
  .left {grid-area:left;
    background-color: #A2D6F9;
  }
  .center {grid-area:center;

  }
  .right {grid-area:right;
    /* max-width:25%; */
  }
  footer {
    display:none;
  }
}