/* 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." */
/* tags */
 a:link {
     color: rgb(77, 7, 60);
     background-color: transparent;
     text-decoration: underline;
}
 a:visited {
     color: rgb(191,17,149);
     background-color: transparent;
     text-decoration: none;
}
 a:hover {
     color: blue;
     background-color: transparent;
     text-decoration: underline;
}
 a:active {
     color: rgb(77, 7, 60);
     background-color: transparent;
     text-decoration: underline;
}
 #left {
     text-align: left;
}
/* centering */
 html, body {
     height: 100%;
}
 html {
     display: table;
     margin: auto;
}
 img {
     display: inline;
     margin-left: auto;
     margin-right: auto;
}
 h2 {
     color: #8c0d6e;
     font-family: Verdana;
     text-align: center;
}
 marquee {
     color: #ffffff;
     font-family: Verdana;
     font-size: 20px 
}
 p {
     color: #8c0d6e;
     font-family: Verdana;
     text-align: center;
}
 h1 {
     color: #8c0d6e;
     font-family: Verdana;
     text-align: center;
}
 ul {
     background-color: white;
     color: #8c0d6e;
     font-family: Verdana;
     text-align: center;
}
/* start of layout */
 body {
     font-family: Verdana;
     padding: 100px;
}
/* topnav bar */
 .topnav {
     overflow: hidden;
     background-color: rgba(89, 16, 92, .8);
     border: 3px solid #59105C;
     border-radius: 10px;
     
}
/* topnav links */
 .topnav a {
     float: left;
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}
/* hover color */
 .topnav a:hover {
     background-color: #ddd;
     color: black;
}
/* left column */
 .leftcolumn{
     float: left;
     width: 50%;
     padding-right: 10px;
}
/* right column */
 .rightcolumn {
     float: left;
     width: 50%;
     padding-left: 10px;
}
/* scrolling bar */
 .scrollbox {
     background-color: RGBA(255, 255, 255, .8);
     padding: 20px;
     margin-top: 20px;
     border: 5px solid white;
     border-radius: 10px;
     width: auto;
     height: 250px;
     overflow-y: scroll;
}
/* card effect for articles */
 .card {
     background-color: RGBA(255, 255, 255, .8);
     padding: 20px;
     margin-top: 20px;
     border: 5px solid white;
     border-radius: 10px;
}
/* clear floats after the columns */
 .row:after {
     content: "";
     display: table;
     clear: both;
}
/* header */
 .header{
     text-align: center;
     background: rgba(221, 221, 221, .8);
     margin-top: 20px;
     border: 5px solid #ddd;
     border-radius: 10px;
}
/* footer */
 .footer {
     text-align: center;
     background: rgba(221, 221, 221, .6);
     margin-top: 20px;
     border: 5px solid #ddd;
     border-radius: 10px;
     width: auto;
     height: auto;
     font-size: 12px;
     overflow: hidden;
}
 .center {
     text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
 @media screen and (max-width:600px) {
     .column {
         width: 100%;
    }
}
/* Start https://www.cursors-4u.com */
 * {
     cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym597.cur), auto !important;
}
/* background */
 body {
     display: table-cell;
     vertical-align: middle;
     background-image: url("https://galactixstar.neocities.org/Images/black_galaxy.gif");
     background-repeat: repeat;
}
/* snow code (not mine) (https://codepen.io/z0ner/pen/KKNqbwR) */
 .snowflake {
     color: #fff;
     font-size: 1em;
     font-family: Arial;
     text-shadow: 0 0 1px #000;
}
/* extra (important) stuff */
 @-webkit-keyframes snowflakes-fall{
    0%{
        top:-10%
    }
    100%{
        top:100%
    }
}
@-webkit-keyframes snowflakes-shake{
    0%{
        -webkit-transform:translateX(0px);
        transform:translateX(0px)
    }
    50%{
        -webkit-transform:translateX(80px);
        transform:translateX(80px)
    }
    100%{
        -webkit-transform:translateX(0px);
        transform:translateX(0px)
    }
}
@keyframes snowflakes-fall{
    0%{
        top:-10%
    }
    100%{
        top:100%
    }
}
@keyframes snowflakes-shake{
    0%{
        transform:translateX(0px)
    }
    50%{
        transform:translateX(80px)
    }
    100%{
        transform:translateX(0px)
    }
}
.snowflake{
    position:fixed;
    top:-10%;
    z-index:9999;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:10s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:10s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running
}
.snowflake:nth-of-type(0){
    left:1%;
    -webkit-animation-delay:0s,0s;
    animation-delay:0s,0s
}
.snowflake:nth-of-type(1){
    left:10%;
    -webkit-animation-delay:1s,1s;
    animation-delay:1s,1s
}
.snowflake:nth-of-type(2){
    left:20%;
    -webkit-animation-delay:6s,.5s;
    animation-delay:6s,.5s
}
.snowflake:nth-of-type(3){
    left:30%;
    -webkit-animation-delay:4s,2s;
    animation-delay:4s,2s
}
.snowflake:nth-of-type(4){
    left:40%;
    -webkit-animation-delay:2s,2s;
    animation-delay:2s,2s
}
.snowflake:nth-of-type(5){
    left:50%;
    -webkit-animation-delay:8s,3s;
    animation-delay:8s,3s
}
.snowflake:nth-of-type(6){
    left:60%;
    -webkit-animation-delay:6s,2s;
    animation-delay:6s,2s
}
.snowflake:nth-of-type(7){
    left:70%;
    -webkit-animation-delay:2.5s,1s;
    animation-delay:2.5s,1s
}
.snowflake:nth-of-type(8){
    left:80%;
    -webkit-animation-delay:1s,0s;
    animation-delay:1s,0s
}
.snowflake:nth-of-type(9){
    left:90%;
    -webkit-animation-delay:3s,1.5s;
    animation-delay:3s,1.5s
}
/* Demo Purpose Only*/
 .demo {
     font-family: 'Raleway', sans-serif;
     color:#fff;
     display: block;
     margin: 0 auto;
     padding: 15px 0;
     text-align: center;
}
 .demo a{
     font-family: 'Raleway', sans-serif;
     color: #000;
}