/* Define Global Variables */
:root {
    --body-bg-image: url('../src/bg/spiral.gif');
    --noise-large-image: url('../noise_large.svg');
    --noise-image: url('../noise.svg');

    /* colors */
    --content: #43256E;
    --content-bg: black;
    --content-fg: #ECE5B4;
    --accent1: #9f0191;
    --accent2: #9A4496;
    --gradient-height: 100px
}

/* Include Fonts */

@font-face {
    font-family: Venice;
    src: url('../fonts/VeniceClassic.ttf');
}
@font-face {
    font-family: CeltG;
    src: url('../fonts/CELTG___.TTF');
}
@font-face {
    font-family: Moon;
    src: url('../fonts/moon_phases.ttf');
}
/* General Formatting */

body {
    font-family: 'Venice';
    font-size: 19px;
    height: 200%;
    margin: 0;
    color: var(--content-fg);
    background: linear-gradient(180deg,  
                                #110736, 
                                #110031, 
                                #110736), 
                                var(--noise-image);
}

* {
    box-sizing: border-box;
}


/* Site Main Container */
#container {
    max-width: 900px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    justify-content: center;
}

/* Main Body Links */
#container a {
    color: #ED64F5;
    text-align:center;
    text-decoration:none; 
}

/* Area above Nav Bar */
#header {
    height: 400px;
}

#flex {
    display: relative;
    position:relative;
    top: 0px; 
}

rightBody{
    background-color: transparent;
    float: left;
    width: 70%;
    height: 100%;
    margin-left: 5%;
}

/* Shared formatting for sidebars*/
aside {
    background-color: transparent;
    font-size: smaller;
    float: left;
    width: 20%;
    height: 100%;
}

/* this is the color of the main content area,
between the sidebars! */

.articletop {
    background-color: transparent;
    top: 0;
    height: var(--gradient-height);
    background: linear-gradient(0deg,
        var(--content-bg),
        rgba(0,0,0,0)),
        var(--noise-image);   
    filter: contrast(145%) brightness(650%); 
    mix-blend-mode: color-burn;
}
.articlebottom {
    background-color: transparent;
    top: 0;
    height: var(--gradient-height);
    background: linear-gradient(180deg,
        var(--content-bg),
        rgba(0,0,0,0)),
        var(--noise-image);   
    filter: contrast(145%) brightness(650%); 
    mix-blend-mode: color-burn;
}


main {
    top: var(--gradient-height);
    background-color: var(--content-bg);
    flex: 1;
    padding: 20px;
    order: 2;
}
.row{
    position:relative;
    left:0;
    top:0;
    height:200px;
}
.column1 {
    position:absolute;
    left: 0%;
    top: 0%;
    text-align: center;
    width: 33.33%;
    padding-top: 5%; 
    padding-left: 15%; 
    padding-right: 15%; 
}
.column2 {
    position:absolute;
    left: 33.33%;
    top: 0%;
    text-align: center;
    width: 33.33%;
    padding-top: 5%; 
    padding-left: 15%; 
    padding-right: 15%; 
}
.column3 {
    position:absolute;
    left: 66.66%;
    top: 0%;
    text-align: center;
    width: 33.33%;
    padding-top: 5%; 
    padding-left: 15%; 
    padding-right: 15%; 
}



/* Text Formatting */
h1,
h2,
h3 {
    /* color: var(--accent1); */
    font-family: "CeltG";
}

h1 {
    font-size: 25px;
}

strong {
    /* this styles bold text */
    color: var(--accent1);
}

/* this is just a cool box, it's the darker colored one */
.box {
    background-color: var(--accent2);
    border: 1px solid var(--content-fg);
    padding: 10px;
}

/* CSS for extras */

#topBar {
    background-color: var(--content-bg);
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--content-fg);
}


/* For Gradient Circle */


.noiseHeader {
  margin-top: -70%;
  width: 100%;
  height: 120%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)
    ),
    var(--noise-large-image);
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .noiseHeader {
    filter: contrast(125%) brightness(650%) invert(100%);
    mix-blend-mode: difference;
  }
}

.center {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  border-radius: 50%;
}

@media screen and (max-width: 700px) {
  aside {
    width: 100%;
    height: auto;
    position: relative;
        left:0%;
  }
  rightBody {
        width: 100%;
        height: auto;
        position: relative;
        left:0%;
    }
}