/* Main layout for my application */

/* 
    so these variables can be manipulated by javascript 
    which means that we can set a color picker utility
    I may give that a shot as a test.
*/

/* 
    testing some custom properties
    I'm not sure how this will function
*/

@property --my-bg-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #CCCCCC;
}
@property --mytxt-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #00FF22;
}
:root {
    --primary-bg-color: #CCCCCC;
    --primary-color: #000000;
    --number-columns: 6;
    --minimum-size-full-display: 800px;
}

body {
    background-color: black;
}

#main_interview {
    font-family: "Lucida Console", "Courier New", monspace;
    background-color: black;
    color: rgba(0,255,25,0.8);
}

/*
  Apparently there's *(wildcard) , #(id) and .(class)
*/

header {
    /* */
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
}
/* borrowing they layout from the w3schools topnav */
/* so we can nest components in the css like we do in html... */
ul.topnav {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333333;
}
/* links in class topnav */
ul.topnav li a{
    display: block;
    color: #f1f1f1;
    padding: 14px 16px;
    text-decoration: none;
}
/* change color to hover */
ul.topnav li a:hover{
    background-color: #dddddd;
    color: black;
}

/* default to horizontal alignment for my navbar */
header div.nav {
  display: flex;
  flex-direction: row;
}
/* definitely easier to just have either a static navbar or a dropdown navbar, doing both is a bit of a pain. */
@media screen and (max-width:200px) {
  header ul.topnav {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 130px;
    /* looks like this shades the area when it's selected. */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
  }
  
  header div.nav{
    display: none;
    flex-direction: column;
  }
  
  /* this is the parent element that I want to contain the child elements */
  header div.nav:hover {
      display: block;
  }
  
  #navmenu:hover {
    header div.nav{
      display: block;
    }
  }
}
/*
    Adding a separate definition for these to hopefully make the website
    more standard in appearance.
*/
div.flex-container {
    display: flex;
    /* this will default to showing my items horizontally. */
    flex-direction: row;
}

/* 
  I think this syntax implies the child elements of the flex container div 
*/
div.flex-container > div {
    margin: 10px;
    column-rule-color: black;
}
/*
  Okay - so the default position is to have my media arranged in a row, but if
  my viewport slips below the value specified here, then we can rearrange it.
  looks like I can't use variables in my selectors, which makes sense.
*/
@media screen and (max-width:800px) {
  div.flex-container {
    flex-direction: column;
  }
}
/* 
    we may need to slice the solumns into something smaller. 
    Let's try the flex-container model.
    
    let's try manipulating the css in a different way.
*/
div.paperLayout {
    column-count: var(--number-columns);
    /* alt: column-rule: 1px solid lightblue */
    column-rule-color: yellow;
    column-rule-width: 5px;
    column-rule-style: solid;
}

div.paperLayout div.leftview {
    /* */
    column-span: 1;
    background-color: gray;
}

div.paperLayout div.textView {
    /* let's see which 3 columns this will span. */
    column-span: 3;
    background-color: blue;
}

.paginated_view {
    
}