/* 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." */

/* cool color palette:  #ffaacd (pink ish) and #4a376c (purple) and #00dbf0 (turquoise) */

body {
  /*column-count: 3;
  column-gap: 5%;*/
  background-color: var(--background_drk);
  color: var(--text_light);
  font-family: Verdana;
  align-items: center;
  text-align: center;
  margin: 15%;
  margin-top: 9%;
  font-size: small;
  /*background-image: url(img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;*/
}

/*---------COLOURS----------*/

:root {
  --color-1: #4a376c; /*purple*/
  --color-2: #ffaacd; /*pink*/
  --color-3: #00dbf0; /*turquoise*/
  --color-4: #45334f; /*dark purple*/
  --color-5: #420227; /*dark red*/
  --color-6: #491a19; /*dark brown*/

  --drk-color: #4a376c; /*purple*/
  --extra-drk-color: #420227; /*dark red*/
  --bright-color: #00dbf0; /*turquoise*/
  --extra-bright-color: #ffaacd; /*pink*/
  --rdm-purple: #626e97;
  --rdm-drk-purple: #230217;

  --glowtext-color: #ff4da6;

  --background_drk: #000000; /*black*/
  --background_light: #00fad1; /*turquoise*/

  --text_drk: #372e2c; /*brown*/
  --text_drk_highlight: #6e0000; /*red*/
  --text_light: #ffaacd; /*pink*/
  --text_light_highlight: #a78bfa; /*purple*/
}


/* le DEFAULT*/
.defaultcolor {
  background-color: #4a376c;
  color: #ffaacd;
}
.defaultcolor button {
  background-color: transparent;
  color: #ffaacd;
}
.defaultcolor nav {
  color: #4a376c; 
  background-color: #ffaacd; 
  border-style: solid;
  border-color: #4a376c;
  outline-style: solid;
  outline-color: #ffaacd;
}



/* Bright Mode: purple on white ish */
.brightcolor {
  color: var(--extra-drk-color);
  background-color: var(--extra-bright-color);
  --glowtext-color:var(--color-5);
}
.brightcolor button {
  color: var(--extra-drk-color);
  background-color: var(--extra-bright-color);
}
.brightcolor nav {
  color: var(--extra-drk-color);
  background-color: var(--extra-bright-color); 
  border-style: solid;
  border-color: var(--extra-drk-color);
  outline-style: solid;
  outline-color: var(--extra-bright-color);
}

/* Night Mode: turquoise on brown */
.nightcolor {
  color: var(--drk-color);
  background-color: black;
  --glowtext-color:var(--color-5);
}
.nightcolor button {
  color: var(--drk-color);
  background-color: black;
}
.nightcolor nav {
  color: var(--drk-color);
  background-color: black; 
  border-style: solid;
  border-color: var(--drk-color);
  outline-style: solid;
  outline-color: black;

}

/* Turquoise on Purple */
.turonpurple {
  color: var(--bright-color);
  background-color: var(--color-1);
}
.turonpurple button {
  color: var(--bright-color);
  background-color: var(--color-1);
}
.turonpurple nav {
  color: var(--bright-color);
  background-color: var(--color-1);
  border-style: solid;
  border-color: var(--bright-color);
  outline-style: solid;
  outline-color: var(--color-1);
}

/* Purple on Turquoise */
.purontur {
  background-color: var(--bright-color);
  color: var(--color-1);
}
.purontur button {
  background-color: var(--bright-color);
  color: var(--color-1);
}
.purontur nav {
  background-color: var(--bright-color);
  color: var(--color-1);
  border-style: solid;
  border-color: var(--color-1);
  outline-style: solid;
  outline-color: var(--bright-color);
}

/* NIGHT Pink on Dark Purple */
.nightpinkdarkpurple {
  color: var(--color-2);
  background-color: var(--color-4);
}
.nightpinkdarkpurple button {
  color: var(--color-2);
  background-color: var(--color-4);
}
.nightpinkdarkpurple nav {
  color: var(--color-2);
  background-color: var(--color-4);
  border-style: solid;
  border-color: var(--color-2);
  outline-style: solid;
  outline-color: var(--color-4);
}

/*  Dark Purple on Pink*/
.pinkdarkpurple {
  color: var(--color-4);
  background-color: var(--color-2);
}
.pinkdarkpurple button {
  color: var(--color-4);
  background-color: var(--color-2);
}
.pinkdarkpurple nav {
  color: var(--color-4);
  background-color: var(--color-2);
  border-style: solid;
  border-color: var(--color-4);
  outline-style: solid;
  outline-color: var(--color-2);
}

/* RANDOM PURPLEISH */
.darkpurple {
  background-color: #626e97;
  color: #230217;
}
.darkpurple button {
  color: #230217;
  background-color: #626e97;
}
.darkpurple nav {
  background-color: #626e97;
  color: #230217; 
  border-style: solid;
  border-color: #626e97;
  outline-style: solid;
  outline-color: #230217; 
}

/* RANDOM INVERSE PURPLEISH */
.nightdarkpurple {
  color: #626e97;
  background-color: #230217;
}
.nightdarkpurple button {
  color: #626e97;
  background-color: #230217;
}
.nightdarkpurple nav {
  color: #626e97;
  background-color: #230217;
  border-style: solid;
  border-color: #626e97;
  outline-style: solid;
  outline-color: #230217;
}



/*---------END COLOURS----------*/



a:hover {
  cursor: url("/deer_smol.png"), pointer;
  /*background-color: var(--background_light);*/
}    

/* unvisited link */
a:link {
  color: var(--text_light_highlight);
  text-decoration: none;
  /*background-color: var(--color-4);*/
}

/* visited link */
a:visited {
  color: var(--text_light);
  text-decoration: underline;
}

/* mouse over link */
a:hover {
  text-decoration: underline;
}

/* selected link */
a:active {
  color: var(--text_light);
}

/* DROPDOWN BUTTON */

.dropbtn {
  /*background-color: var(--color-2);
  color: var(--color-5);*/
  padding: 16px;
  font-size: small;
  border: none;
  cursor: pointer;
}

/*.dropbtn:hover, .dropbtn:focus {
  color: var(--color-2);
  background-color: var(--color-5);
}*/

.dropdown {
  position: fixed;
  display: inline-block;
}

.dropdown-content {
  display: none;
  float: right;
  position: fixed;
  right: 0;
  top:0;
  text-align: left;
  background-color: var(--color-1);
  color: var(--color-2);
  /*min-width: 160px;*/
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content button { /* BUTTON */
  /*color: var(--color-2);*/
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content button:hover { /* BUTTON */
  /*color: var(--color-2);*/
  filter: brightness(125%);
}

.dropdown-content a { /* LINK */
  color: var(--color-2);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: var(--color-3);
  color: var(--color-1)
}

.show {display: block;}

#themebtn {
  position:fixed; 
  top: 0; 
  left: 0;
  width: 100%;
  text-align: right;
  padding: 1%;
}

#myDropdown {
  background-color: transparent;
}

/* END DROPDOWN BUTTON */

nav {
  color: var(--text_light);  
  background-color: var(--background_drk);  
  border-style: solid;
  border-color: var(--text_light); 
  border-width: 2px;
  outline-style: solid;
  outline-color: var(--background_drk);
  outline-width: 4px;
  flex-direction: column;
  margin: 5%;
  margin-left: 5%;
  margin-right: 5%;
  padding: 2%;
  position:flow; 
  /*background-image: url(img/cloudsedit.png);
  background-repeat: no-repeat;
  background-attachment:local;
  background-size: 100% 600%; */
}

/* SIDE BAR FIXED vvv */

.sidebar {
  overflow-x: hidden;
  position: fixed; /* Set the navbar to fixed position */
  /*top: 0;  Position the navbar at the top of the page */
  left:0;
  width: 5%; 
  margin: 1%;
  padding: 1%;
  border-style: solid;
  outline-style: dotted;
  display: block;
  font-size: small;
  background-image: url(img/andrea-ferrario-13K5mKG2i5U-unsplash.jpg);
  background-repeat: no-repeat;
  background-attachment:local;
  background-size: 100% 120%;
  text-shadow: 0 0 20px #000000,
               0 0 30px #000000,
               0 0 40px #000000;               ;   
}

/* Links inside the navbar */
.sidebar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.sidebar a:hover {
  background: #00dbf0;
  color: white;
}

/* Main content */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}

/* SIDE NAV BAR FIXED ^^^ */

#navibar {
  float: left; 
  width: 300px;
  margin:15px;
}

h2 {
  color: floralwhite;
  text-align: center;
  border-color: lightgrey;
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
  border-bottom-style: dotted;
}

ul {
  max-width: 30%;
  text-align: left;
  margin: 20px;
}

button {
  background-color: transparent;
  color: #ffaacd;
  font-size: medium;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 200px;
  text-align: left;
}

button:hover {
  /*filter: brightness(75%);*/
  text-shadow: 0 0 20px #fff,
               0 0 30px var(--glowtext-color),
               0 0 40px var(--glowtext-color),
               0 0 50px var(--glowtext-color), 
               0 0 60px var(--glowtext-color),
               0 0 70px var(--glowtext-color), 
               0 0 80px var(--glowtext-color);  
}

.alist {
  text-align: left;
  padding-right: 3%;
  padding-left: 3%;
  font-size: medium;
  border-width: 2px;
  border-style: solid;
  /*border-radius: 3%;*/
  margin: 3%;
}

.content {
  padding: 0 18px;
  margin-bottom: 2%;
  margin: 1%;
  display: none;    
  border: solid;
  border-width: 1px;
  overflow: hidden; 
  font-size: small;
  /*filter: brightness(80%);*/
}

.collapsible {
  cursor: pointer;
  padding: 18px;
  margin: 1%;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: medium;
  border: solid;
  border-width: 2px;
}

.active, .collapsible:hover {
  /*filter: brightness(75%);
  font-weight: bold;*/
  text-shadow: 0 0 20px #fff,
               0 0 30px var(--glowtext-color),
               0 0 40px var(--glowtext-color),
               0 0 50px var(--glowtext-color), 
               0 0 60px var(--glowtext-color),
               0 0 70px var(--glowtext-color), 
               0 0 80px var(--glowtext-color);

}

#imageone {

}

#myDIV {
  width: 45%;
  padding: 50px 0;
  text-align: center;
  margin-top: 20px;
}

/* MUSINGS */

.blogsidebar {
  overflow-x: hidden;
  position: fixed; /* Set the navbar to fixed position */
  top: 30%;
  left:0;
  width: 8%; 
  margin: 1%;
  padding: 1%;
  border-style: solid;
  outline-style: dotted;
  display: block;
  font-size: small;
  background-image: url(img/andrea-ferrario-13K5mKG2i5U-unsplash.jpg);
  background-repeat: no-repeat;
  background-attachment:local;
  background-size: 100%;     
}

.quote {
  margin-right: 3%;
  margin-left: 3%;
  font-style: italic;
  padding: 3%
}

.entrytitle {
  background-color: var(--color-4);
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 3%;
  margin-bottom: 0%;
  padding: 1%;
  border-color: var(--color-2);
  border-style: solid;
  border-bottom: none;
}

.blogentry {  
  text-align: justify;
  background-color: var(--color-4);
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 0%;
  margin-bottom: 3%;
  padding: 5%;
  padding-top: 1%;
  border-color: var(--color-2);
  border-style: solid;
  border-top: none;
  overflow: scroll;
  max-height: 500px;
}

.othersidebar {
  overflow-x: hidden;
  position: fixed; /* Set the navbar to fixed position */
  /*top: 0;  Position the navbar at the top of the page */
  right:0;
  top:30%;
  width: 8%; 
  margin: 1%;
  margin-right: 5%;
  padding: 1%;
  border-style: solid;
  outline-style: dotted;
  display: block;
  font-size: small;
  background-image: url(img/-ferrario-13K5mKG2i5U-unsplash.jpg);
  background-repeat: no-repeat;
  background-attachment:local;
  background-size: 100%;       
}

header {
  top: 3%;
  padding: 2%;
  margin: 1%;
  background-image: url(img/banner.png);
  background-repeat: repeat;
  background-size: 45%;   
}