/* 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." */
   
   
/* FONTS!! */
    @font-face { 
    	font-family: "vt323"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20VT323/vt323-regular-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20VT323/vt323-regular-webfont.woff") format("woff"),
    		   url("https://fairygirldotcom.neocities.org/font%20-%20VT323/VT323-Regular.ttf") format("true type");
    }
    @font-face { 
    	font-family: "newcicle"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20newcicle/new_cicle_fina-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20newcicle/new_cicle_fina-webfont.woff") format("woff");
    }
    @font-face { 
    	font-family: "retrobyte"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20retrobyte/retrobyte-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20retrobyte/retrobyte-webfont.woff") format("woff");
    }
    @font-face { 
    	font-family: "pixelscript"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20pixelscript/pixelscriptregular-4b83w-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20pixelscript/pixelscriptregular-4b83w-webfont.woff") format("woff");
    }
    @font-face { 
    	font-family: "epilonion"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20epilonion/epilonionserifdemo-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20epilonion/epilonionserifdemo-webfont.woff") format("woff");
    }
    @font-face { 
    	font-family: "cursive"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20humanistic%20cursive/humanisticcursive-wwao-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20humanistic%20cursive/humanisticcursive-wwao-webfont.woff") format("woff");
    }
    @font-face { 
    	font-family: "frankest"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20frankest/frankestscriptdemoregular-dopdr-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20frankest/frankestscriptdemoregular-dopdr-webfont.woff") format("woff");
    }
    @font-face { 
    	font-family: "ophelia"; 
    	src: url("https://fairygirldotcom.neocities.org/font%20-%20ophelia/opheliascriptlight-lyk3-webfont.woff2") format("woff2"), 
    		   url("https://fairygirldotcom.neocities.org/font%20-%20ophelia/opheliascriptlight-lyk3-webfont.woff") format("woff");
    }
    
    
/* MEDIA QUERY */





/* WHOLE PAGE ! */    
    body{ 
      background-image: url("https://fairygirldotcom.neocities.org/background.png");
      background-size: contain;
      background-repeat: repeat;
      background-color: #d6dfff;
      margin: 0;
      overflow-x: hidden;
    }
    #container{
      width: 1000px;
      margin: 0 auto;
      align-items: center;
    }
    #header{
      margin-bottom: -20px;
      margin-top: 100px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
    }
    #footer{
      margin: 5px auto;
      height: 50px;
      width: 998px;
      background-color: #ebf8ee;
      border: #6d62af solid 1.5px;
    }
    
    
/* SUMMARY + DETAILS */
    details {
      border: 1px solid #6d62af;
      padding: 0.5em 0.5em 0;
      margin-top: 2px;
      max-width: 100%;
    }
    summary {
      font-family: 'VT323';
      color: #6d62af;
      font-size: 20px;
      margin: -0.5em -0.5em 0;
      padding: 0.5em;
    }
    details[open] {
      padding: 0.5em;
    }
    details[open] summary {
      border-bottom: 1px dashed #6d62af;
      margin-bottom: 0.5em;
    }
    
    
/* BACKGROUND IMAGES! */
    #left-image{
      position: fixed;
      bottom: -80px;
      left: -110px;
      width: 500px;
      height: 100%;
      background-image: url("https://fairygirldotcom.neocities.org/left%20image.png");
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: contain;
      z-index: -1;
    }
    #right-image{
      position: fixed;
      bottom: -80px;
      right: -100px;
      width: 500px;
      height: 100%;
      background-image: url();
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: contain;
      z-index: -1;
    }
    
    
/* NAVIGATION BAR! */   
    #navbar{
      height: 30px;
      margin: 5px auto;
      background-color: #e7aae8;
      border: outset #e7aae8 2px;
      border-radius: 25px;
      width: 100%;
    }
    #navbar ul{
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
      font-size: 20px;
      font-family: 'vt323';
    }
    #navbar li{
      padding-top: 5px;
    }
    #navbar li a{
      color: #6d62af;
      font-family: 'vt323';
      font-size: 20px;
      text-decoration: none;
    }
    #navbar li a:hover{
      color: #4d4580;
      text-decoration: underline;
    }
  
  
/* FLEX SPACE */  
    #flex{
      display: flex;
    }
    #flex-column{
      display: flex;
      flex-direction: column;
    }
    
    #leftSidebar{
      order: 1;
    }
    #main{
      order: 2;
    }
    #rightSidebar{
      order: 3;
    }
  
    
    
/* LEFT SIDEBAR! */
    #leftSidebar{
      background-color: #9b88c0;
      border-radius: 0;
      border: #6d62af solid 1.5px;
      width: 260px;
      padding: 5px;
      margin: 5px auto;
      order: 1;
      text-align: left;
      height: 900px;
      overflow: hidden;
    }
    #ipodspace{
     background-image: url("https://fairygirldotcom.neocities.org/starry.gif");
     background-size: cover;
     background-position: top;
     background-color: #a9d0f8;
     width: 238px;
     height: 800;
     border: #6d62af solid 1px;
     text-align: center;
     overflow: hidden;
     margin: 0;
     padding: 10px;
     color: #f5d9f6;
    }
    #altleftside{
      background-color: #9b88c0;
      border-radius: 0;
      border: #6d62af solid 1.5px;
      width: 150px;
      padding: 5px;
      margin: 5px auto;
      order: 1;
      text-align: left;
      height: 900px;
      overflow: hidden;
    }
    
    
/* MAIN PAGE SPACE! */
    #main{
      flex: 1;
      order: 2;
      border: #6d62af solid 1.5px;
      background-color: #f5d9f6;
      overflow-x: hidden;
      width: 696px;
      height: auto;
      margin: 5px auto 5px 10px;
      padding: 5px;
    }
    #welcome{
      height: auto;
      width: 644px;
      border: #6d62af solid 1px;
      background-image: url("https://fairygirldotcom.neocities.org/images/divider.png");
      background-position: top;
      background-size: cover;
      background-color: #fff4ff;
      margin: 0;
      padding: 50px 30px 30px 30px;
      overflow: hidden;
    }
    #welcome ul{
     text-align: center;
     color: #6d62af;
     font-size: 18px;
     list-style-type: none;
    }
    #introduction-lace{
      height: 30px;
      width: 812px;
      background-image: url("https://fairygirldotcom.neocities.org/images/laceborder.jpg");
      background-size: 19%;
      background-position: top;
      background-repeat: repeat;
      border: #6d62af solid 1px;
      margin: 5px 0px 0px 0px;
    }
    .mainstuff{ /* specify any height or width in html */
      display: flex;
      border: #6d62af solid 1px;
      background-color: #fff4ff;
      margin-top: 5px;
      padding: 5px;
      overflow: hidden;
    }
    .bullshit{
      background-color: #fff4ff;
      border: #6d62af solid 1.5px;
      padding: 10px;
      margin: 5px 0px 5px 0px;
      max-height: 557px;
      overflow: auto;
      max-width: 800px;
      color: #6d62af;
    }
    .smallbullshit{
      background-color: #fff4ff;
      border: #6d62af solid 1.5px;
      padding: 10px;
      margin: 5px 0px 5px 0px;
      overflow: hidden;
      color: #6d62af;
    }
    
    
/* RIGHT SIDEBAR! */
    #rightSidebar{
      background-color: #9b88c0;
      border-radius: 0;
      border: #6d62af solid 1.5px;
      width: 260px;
      padding: 5px;
      margin: 5px;
      order: 3;
      text-align: left;
      height: 900px;
      overflow: auto;
    }
    

/* ART AND MUSIC PAGE! */
    #artintro{
      height: 68px;
      max-width: 100%;
      background-image: url("https://fairygirldotcom.neocities.org/images/download11.jpg");
      background-position: top;
      background-size: cover;
      background-color: #f7f6e7;
      border: #6d62af solid 1px;
      margin: 0;
      padding: 10px;
      overflow: hidden;
    }
    #artintro h1{
      color: #85baf1;
      font-family: 'pixelscript';
      font-size: 50px;
      font-weight: normal;
      margin: -10px 0px 0px 0px;
      text-align: center;
    }
    #main-art{
      flex: 1;
      order: 2;
      border: #6d62af solid 1.5px;
      background-color: #a9d0f8;
      overflow: hidden;
      width: 856px;
      height: 100%;
      margin: 5px;
      padding: 5px;
    }
    .artbullshit{
      display: flex;
      align-items: center;
      background-color: #d5e8f3;
      border: #6d62af solid 1.5px;
      padding: 2.5px;
      margin: 5px 0px 5px 0px;
      height: auto;
      overflow-x: hidden;
      overflow-y: auto;
      max-width: 100%;
      color: #6d62af;
    }
    .artbullshit-item{
      display: flex;
      background-color: #e8f6ff;
      height: auto;
      width: 782px;
      padding: 10px;
      margin: 2.5px;
      border: #85baf1 dashed 1px;
    }
    .artbullshit-item p{
      padding: 10px; 
    }
    .playlist{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      background-color: #d5e8f3;
      border: #6d62af solid 1.5px;
      padding: 2.5px;
      margin: 5px 0px 5px 0px;
      height: 100%;
      overflow: auto;
      max-width: 1096px;
      color: #6d62af;
    }
    .playlist-item{
      display: flex;
      background-color: #e8f6ff;
      width: 100%;
      height: 100%;
      padding: 20px;
      margin: 2.5px;
      border: #85baf1 dashed 1px;
    }
    .newspapermusic{
     column-count: 2;
     column-gap: 40px;
     column-rule: #85baf1 dashed 1px;
     margin: 0px;
     font-size: 16px;
     background-color: #f7fcff;
    }
/*ART NAV */
    #artnav{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: auto;
      margin: 0;
      padding: 2.5px;
      background-color: #c9b4db;
      border: #6d62af solid 1px;
      width: 250;
    }
    .artnav-cat{
      background-color: #a9d0f8;
      border: #5a9cdf solid 1px;
      text-align: center;
      padding: 5px;
      margin: 2.5px 2.5px 2.5px 2.5px;
      font-size: 20px;
      font-family: 'vt323';
      color: #5a9cdf;
    }
    .artnav-item{
      background-color: #cae4ff;
      border: #5a9cdf solid 1px;
      padding: 5px;
      margin: 2.5px 2.5px 2.5px 2.5px;
      font-size: 20px;
      font-family: 'vt323';
    }
    .artnav-item a{
      color: #6d62af;
      font-family: 'vt323';
      font-size: 20px;
      text-decoration: none;
    }
    .artnav-item a:hover{
      color: #5293d6;
      text-decoration: underline;
    }


/* FASHION CORNER PAGE! */
    #fashionintro{
      height: 68px;
      max-width: 100%;
      background-image: url("https://fairygirldotcom.neocities.org/fashion/fheuidmaoih.jpg");
      background-position: center;
      background-size: cover;
      background-color: #f7f6e7;
      border: #6d62af solid 1px;
      margin: 0;
      padding: 10px;
      overflow: hidden;
    }
    #fashionintro h1{
      color: #f7f6e7;
      font-family: 'pixelscript';
      font-size: 50px;
      font-weight: normal;
      margin: -10px 0px 0px 0px;
      text-align: center;
    }
    #main-fashion{
      flex: 1;
      order: 2;
      border: #6d62af solid 1.5px;
      background-color: #f6e4ed;
      overflow: hidden;
      width: 856px;
      height: 900px;
      margin: 5px;
      padding: 5px;
    }
/* FASHION NAV */
    #fashionnav{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: auto;
      margin: 0;
      padding: 2.5px;
      background-color: #c9b4db;
      border: #6d62af solid 1px;
      width: 250;
    }
    .fashionnav-cat{
      background-color: #f7cbe1;
      border: #d89bb7 solid 1px;
      text-align: center;
      padding: 5px;
      margin: 2.5px 2.5px 2.5px 2.5px;
      font-size: 20px;
      font-family: 'vt323';
      color: #5a9cdf;
    }
    .fashionnav-item{
      background-color: #fae4ef;
      border: #d89bb7 solid 1px;
      padding: 5px;
      margin: 2.5px 2.5px 2.5px 2.5px;
      font-size: 20px;
      font-family: 'vt323';
      color: #5a9cdf;
    }
    .fashionnav-item a{
      color: #5a9cdf;
      font-family: 'vt323';
      font-size: 20px;
      text-decoration: none;
    }
    .fashionnav-item a:hover{
      color: #5293d6;
      text-decoration: underline;
    }
  
    
/* WHATEVER PAGE! */
    #whateverintro{
      height: 68px;
      max-width: 100%;
      background-image: url("https://fairygirldotcom.neocities.org/whatever/hiuhrifucnkwejr.jpg");
      background-position: center;
      background-size: cover;
      background-color: #f7f6e7;
      border: #6d62af solid 1px;
      margin: 0;
      padding: 10px;
      overflow: hidden;
    }
    #whateverintro h1{
      color: #f7f6e7;
      font-family: 'pixelscript';
      font-size: 50px;
      font-weight: normal;
      margin: -10px 0px 0px 0px;
      text-align: center;
    }
    #main-whatever{
      flex: 1;
      order: 2;
      border: #6d62af solid 1.5px;
      background-color: #def1e2;
      overflow: hidden;
      width: 856px;
      height: 900px;
      margin: 5px;
      padding: 5px;
    }
    
    
/* ABOUT ME PAGE! */
    #aboutintro{
      height: 68px;
      max-width: 100%;
      background-image: url("https://fairygirldotcom.neocities.org/aboutme/pindsfwejgn.jpg");
      background-position: center;
      background-color: #f7f6e7;
      border: #6d62af solid 1px;
      margin: 0;
      padding: 10px;
      overflow: hidden;
    }
    #aboutintro h1{
      color: #6d62af;
      font-family: 'pixelscript';
      font-size: 50px;
      font-weight: normal;
      margin: -10px 0px 0px 0px;
      text-align: center;
    }
    #main-about{
      flex: 1;
      order: 2;
      border: #6d62af solid 1.5px;
      background-color: #f7cbe1;
      overflow: hidden;
      width: 856px;
      height: 900px;
      margin: 5px;
      padding: 5px;
    }
    .aboutbullshit{
      background-color: #f6e4ed;
      border: #6d62af solid 1.5px;
      padding: 10px;
      margin: 5px 0px 5px 0px;
      max-height: 557px;
      overflow: auto;
      max-width: 1096px;
      color: #6d62af;
    }
    
    
/* RESOURCES PAGE! */
    #resourceintro{
      height: 68px;
      max-width: 100%;
      background-image: url("https://fairygirldotcom.neocities.org/resources/resources.jpg");
      background-position: center;
      background-size: cover;
      background-color: #f7f6e7;
      border: #6d62af solid 1px;
      margin: 0;
      padding: 10px;
      overflow: hidden;
    }
    #resourceintro h1{
      color: #f7f6e7;
      font-family: 'pixelscript';
      font-size: 50px;
      font-weight: normal;
      margin: -10px 0px 0px 0px;
      text-align: center;
    }
    .resourcesbullshit{
      background-color: #f7f6e7;
      border: #6d62af solid 1.5px;
      padding: 10px;
      margin: 5px 0px 5px 0px;
      overflow: auto;
      max-width: 100%;
      max-height: 450px;
      color: #6d62af;
    }
    .resourcesbullshit h2{
      margin: 5px;
    }
    .resourcesbullshit ol{
      margin: 5px;
      padding: 10px 10px 10px 50px;
      font-size: 19px;
    }
    #main-resource{
      flex: 1;
      order: 2;
      border: #6d62af solid 1.5px;
      background-color: #f4e6c4;
      overflow: hidden;
      width: 856px;
      height: auto;
      margin: 5px;
      padding: 5px;
    }
/* RESOURCES NAV */
    #renav{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: auto;
      margin: 0;
      padding: 2.5px;
      background-color: #c9b4db;
      border: #6d62af solid 1px;
      width: 250;
    }
    .renav-cat{
      background-color: #f4e6c4;
      border: #b4a367 solid 1px;
      text-align: center;
      padding: 5px;
      margin: 2.5px 2.5px 2.5px 2.5px;
      font-size: 20px;
      font-family: 'vt323';
      color: #5a9cdf;
    }
    .renav-item{
      background-color: #fffada;
      border: #b4a367 solid 1px;
      padding: 5px;
      margin: 2.5px 2.5px 2.5px 2.5px;
      font-size: 20px;
      font-family: 'vt323';
      color: #5a9cdf;
    }
    .renav-item a{
      color: #6d62af;
      font-family: 'vt323';
      font-size: 20px;
      text-decoration: none;
    }
    .renav-item a:hover{
      color: #5293d6;
      text-decoration: underline;
    }


/* HEADING STYLE PRESETS! */ 
    h1{
      font-size: 87px;
      font-family: 'ophelia';
      color: #978dd6;
      margin: 15px 5px 15px 5px;
    }
    h2{
      font-size: 35px;
      font-family: 'retrobyte';
      color: #978dd6;
      margin-top: 3px;
      margin-bottom: 3px;
    }
    h3{
      font-size: 21px;
      font-family: 'vt323';
      font-style: italic;
      color: #6d62af;
      margin: 10px 10px 2px 10px;
    }
    h4{
      font-size: 18px;
      font-family: 'VT323';
      color: #f5d9f6;
      font-style: italic;
      margin-top: 3px; 
      margin-bottom: 3px;
    }
    
    
/* TEXT AND LIST STYLE PRESETS! */
    ol{
      font-family: 'vt323';
      padding-left: 32px;
      margin: 0;
    }
    ul{
      margin: 2px;
      padding: 2px;
    }
    li{
      font-family: 'vt323';
      margin: 0;
    }
    p{
      font-family: 'vt323';
      font-size: 18px;
      color: #6d62af;
      margin: 0;
    }
    a{
      text-decoration: underline;
      font-family: 'vt323';
      color: #e7aae8;
    }
    a:hover{
      font-style: italic;
    }
    a:active{
      font-style: italic;
      font-weight: bold;
    }