/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/***********************************************************
              Website layout / organizational css
************************************************************/
body {
  background-color: #fffbd9;
  color: black;
  font-family: system-ui;
  height: 100%
}

.scrolling-textbox {
  text-align: left;
  overflow-y: scroll;
}

/*** Beeg title - to be replaced with something cool****/
.sitetitle h1{
  color:gold;
  font-family: fantasy;
  font-size:50pt

}
.sitetitle div{
  background-color: lavender;
  text-align: center;
  width:100%;
  float:left
}

/** Navbar **/
#navhead{
  color:crimson;
  font-family: 'Times New Roman';
  padding-left: 20px;
}

.navbar {
  text-align: left;
  overflow-y: scroll;
  background-color: pink;
  color: black;
  float: right;
  height: 101vh;
}
.navbar ul {
  list-style-type: none;
  padding-left: 20px;
  padding-right: 20px;

}
.navbar li {
  padding-top: 10px;
  text-align: center;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  /*background-color: rgb(255, 158, 67);*/
  background:
    radial-gradient(113% 91% at 17% -2%, #FF5A00FF 1%, #FF000000 99%),
    radial-gradient(142% 91% at 83% 7%, #FFDB00FF 1%, #FF000000 99%),
    radial-gradient(142% 91% at -6% 74%, #FF0049FF 1%, #FF000000 99%),
    radial-gradient(142% 91% at 111% 84%, #FF7000FF 0%, #FF0000FF 100%);
}
.navbar a {
  color: greenyellow;
  text-decoration: none;
  font-weight: 500;
}
.navbar a:hover {
  color: rgb(78, 47, 255);
  text-decoration: none;
  font-weight:900;
}

/***Bullshitzone navlink*/
.bullshit_nav a{
  font-family: 'Brush Script MT';
  font-style: italic;
  color:rgb(0, 255, 234);
}
/***********************************************************
              Functional
************************************************************/
#BlogIframe{
  width: 25%;
  border: solid gray;
  float: left
}

/***********************************************************
                        Stylistic
************************************************************/

/*-------blog---------*/
#BlogTerminal{
  --s: 7px; /* control the size*/
  --c1: #3E286D;
  --c2: #261F6B;
  --_g: var(--c1) 0 25%,#0000 0 75%;
  background:
   repeating-conic-gradient(at 75% 75%,var(--_g)),
   repeating-conic-gradient(at 25% 25%,var(--_g)),
   var(--c2); 
  background-size: var(--s) var(--s); 
  color: white;
  width:15%;
  padding:1%;
  border: 5px solid gray;
  float: left;
  min-width: 250;
  font-family: monospace
}

#BlogTerminal a:link,
#BlogTerminal a:visited,
#BlogTerminal a:hover{
  color: white;
}

/*--- IFrame containing blog content ---*/
#BlogPage {
  float: left;
  border: 5px solid gray;
  padding: 1%;
  margin-left: 1%;
  margin-right: 1%;
  height: 600px;
  width: 50%
}


/*-------misc---------*/
.tree {
  --spacing: 1.5rem;
  --radius: 10px
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li{
  border-left: 2px solid white;
}
.tree ul li:last-child{
  border-color: transparent;
}
.tree ul  li::before{
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid white;
  border-width: 0 0 2px 2px;
}



/***********************************************************
                        VFX
************************************************************/
.jiggle-scroller{
  overflow-y: scroll;
}


.physics-item{
  color:black;
}

#testtest{
  color:black
}

#test {
  background-color: cyan;
  width: 100px;
  height: 200px;
}