/*  BACKROUND CSS SECTION----------------------------------------------------------------------- */
body {
  color: white;
  background-color: black;

  }
/* END OF BACKGROUND CSS SECTION ----------------------------------------------------------- */





/* LINK EFFECTS - ETC..... SECTION ----------------------------------------------------------------- */
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #ebf527;
text-shadow: 0 0 .2rem #000000,
0 0 .2rem #000000,
0 0 2rem #000000,
0 0 0.8rem #000000,
0 0 2.8rem #000000;
}
a:active {
color: black;
} 
/* END OF LINK EFFECTS - ETC CSS SECTION---------------------------------------------------- */




/* ---WRAPPER----------- WRAPPER------------- WRAPPER ---------------WRAPPER--------------- WRAPPER ---*/
#wrapper {
padding: 15px;
width: 950px;
margin: 50px auto;
/* height: 70vh;   change height to height:100% in produciton */
height: 100%;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/*  END OF THE WRAPPER SECTION ----------- END OF THE WRAPPER SECTION ----*/



/* ----TOP ROW ------- TOP ROW ------ TOP ROW ----- TOP ROW ---- TOP ROW -----*/
#toprow {
height: 200px;
 width: 100%;
 padding: 0 0;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
display: inline-block;  /* display: inline-block; was chosen so the divs will line up in a row, AND that the size, margins, borders, etc, for the children can still be determined. */
  }
/* ---- END OF THE TOP ROW SECTION ----------- END OF THE TOP ROW SECTION -----*/


/* PFP ----------- PFP ------------ PFP -------------- PFP --------- */
#pfp {
float: left;    /* we can't use display: inline;, because display inline has no height or width properties and will negate any border */ 
width: 30%;
margin: 20px;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
0 0 0.8rem #bc13fe,
0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;

}
/* END OF THE PFP SECTION ---- END OF THE PFP SECTION ---*/



/* LOGO --------- LOGO --------- LOGO -----  LOGO ----- LOGO */
#logo {
float: left;   /* we can't use display: inline;, because display inline has no height or width properties and will negate any border */ 
width: 60%;
margin: 20px; 
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
0 0 0.8rem #bc13fe,
0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;

}
/* END OF THE LOGO SECTON -------- END OF THE LOGO SECTION */


/* ----LINKS ROW -------  LINKS ROW --------- LINKS ROW ------ LINKS ROW -----*/
#links {
height: 90px;
 width: 100%;

border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
  }
/* ---- END OF THE TOP ROW SECTION ----------- END OF THE TOP ROW SECTION -----*/


/* ---- MID ROW --------- MID ROW ---------- MID ROW --------- MID ROW -----*/
#midrow {
height: 800px;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
0 0 0.8rem #bc13fe,
0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
display: inline-block;  /* display: inline-block; was chosen so the divs will line up in a row, AND that the size, margins, borders, etc, for the children can still be determined. */
width: 100%;
margin: 15px 0 0 auto; 
}
/* ---- END OF THE MID ROW SECTION ----------- END OF THE MID ROW SECTION -----*/



/* --- LEFT COLUMN ----- LEFT COLUMN ----- LEFT COLUMN ---- */
#leftcolumn {
width: 25%;
height: 100%;
float: left; 
margin: 0 20px 0 20px;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* --- END OF LEFT COLUMN ----- END OF LEFT COLUMN ---- */


/*  --- YOU TUBE ---- YOU TUBE ---- YOU TUBE --- */
#youtube {
width: 190px;
height: 150px;
margin: 0 auto; 
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* --- END OF YOU TUBE ----- END OF YOU TUBE ---*/

/*  -- TO DO LIST ---- TO DO LIST --- TO DO LIST ---- */
#todo {
width: 190px;
height: 150px;
margin: 0 auto;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* -- END OF TO DO LIST ---- END OF TO DO LIST --- */

/* --- STUDY ---- STUDY ---- STUDY --- STUDY ---- */
#study {
width: 190px;
height: 150px;
margin: 0 auto;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* --- END OF STUDY ---------- END OF STUDY ----- */


/*-- FLAG  ---- FLAG  --- FLAG--FLAG  ---- FLAG  --- FLAG-- */
#flag {
width: 190px;
height: 150px;
margin: 0 auto; 
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* -- END OF FLAG COUNTER --- END OF FLAG COUNTER -- */




/* --- RIGHT COLUMN ----- RIGHT COLUMN ----- RIGHT COLUMN ---- */
#rightcolumn {
width: 65%;
float: left;
height: 100%;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* --- END OF RIGHT COLUMN ------ END OF RIGHT COLUMN ---- */


/*  --- MINIBLOG --- MINIBLOG ---- MINIBLOG ---- MINIBLOG --- */
#miniblog {
width: 85%;
margin: 5px auto 5px auto;
height: 240px;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* -- END OF MINIBLOG --------------- END OF MINIBLOG -----*/

/*  ---- CHATBOX ------ CHATBOX --------- CHATBOX ---- */
#chatbox {
width: 85%;
margin: 5px auto 5px auto;
height: 240px;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* ---- END OF CHATBOX --------- END OF CHATBOX ---- */


/*--- BUTTONS BUTTONS  BUTTONS ---- */
#neofriends {
width: 85%;
margin: 5px auto 5px auto;
height: 240px;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* --- END OF BUTTONS ----- BUTTONS ---- */






/* ---- FOOTER ----- FOOTER ---------  FOOTER ----------- FOOTER --------- */
#footer {
height: 100px;
width: 60%;
margin: 30px auto 0;
border-radius: 15px;
box-shadow: 0 0 .2rem #fff,
0 0 .2rem #fff,
0 0 2rem #bc13fe,
 0 0 0.8rem #bc13fe,
 0 0 2.8rem #bc13fe,
inset 0 0 1.3rem #bc13fe;
}
/* END OF FOOTER ---------------- END OF FOOTER -------------------- */