* {
box-sizing: border-box;
}

.snow::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px); /* apply the blur */
    pointer-events: none; /* make the overlay click-through */
}

body {
    background-image: url("/img/home_bg.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transform: scale(1.1);
}

@-webkit-keyframes rainbow {
    0% {color: #8000ff;}
    50% {color: #c300ff;}
    100% {color: #8000ff;}
}
@-ms-keyframes rainbow {
    0% {color: #8000ff;}
    50% {color: #c300ff;}
    100% {color: #8000ff;}
}
@-o-keyframes rainbow {
    0% {color: #8000ff;}
    50% {color: #c300ff;}
    100% {color: #8000ff;}
}
@keyframes rainbow {
    0% {color: #8000ff;}
    50% {color: #c300ff;}
    100% {color: #8000ff;}
}

i.fa-3x {
    color: #7900fa;
}
  
.gradient-hover:hover {
    -webkit-animation:rainbow 4s infinite;
    -ms-animation:rainbow 4s infinite;
    -o-animation:rainbow 4s infinite;
    animation:rainbow 4s infinite;
}

.bg-image::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px); /* apply the blur */
    pointer-events: none; /* make the overlay click-through */
}

.bg-image {
    /* The image used */
    background-image: url("/img/home_bg.png"); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transform: scale(1.1);


    /* Add the blur effect */
/*    filter: blur(4px); */
/*    -webkit-filter: blur(4px); */

    /* Full height */
    height: 100%;
    max-height: 100%;
}

.bg-text {
    border:20px solid transparent; 
    -moz-border-image: -moz-linear-gradient(top left, #8000ff 0%, #c300ff 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #8000ff 0%, #c300ff 100%);
    border-image: linear-gradient(to bottom right, #8000ff 0%, #c300ff 100%);
    border-image-slice: 1;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.7); /* Black w/opacity/see-through */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* for IE 9 */
    -webkit-transform: translate(-50%, -50%); /* for Safari */
    width: 50%;
    padding: 0px 50px 50px 50px;
    color: white;
    text-align: center;
}

h1 {
    text-align: top;
    color: #7900fa;
    font-family: Oswald;
    font-size: 40px;
    text-align: center;
}

p {
    text-align: top;
    color: #ffffff;
    font-family: Calibri, sans-serif;
    font-size: 16px;
    text-align: center;
}

.icon-row {
    display: flex;
    flex-direction: column;
}

.icon-row-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left:20%;
    margin-right:20%;
}

.icon {
    flex: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.icon i {
    font-size:56px;
}

.column {
    width: 10%;
    padding: 5px;
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    font-family: Oswald;
    font-size: 24px;
    font-size: 1.25vw;
}

.column a {
    text-decoration-color: #5900ba;
}

.column i {
    image-rendering: crisp-edges;
    object-fit: cover;
    transition: border 1s;
}

.icon-row::after {
    content: "";
    clear: both;
    display: table;
}

.snow {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 15s linear infinite;
}
  
.snow div {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 15s linear infinite;
}

@keyframes animatedBackground {
0% {
    background-position: 0 0;
}
100% {
    background-position: 950px 950px;
}
}