h1 {
    color: #becab2;
    text-shadow: 1px 1px 9px black;
    /*text-align: center;*/
    font-weight: lighter;
    font-family: ghoust_solidregular, SansSerif, serif;
    font-size: 10vw;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    /*padding: 0;*/
}

@keyframes dim {
    from {
        filter: brightness(0%);
    }
    to {
        filter: brightness(100%);
    }
}

.main_container {
    animation-name: dim;
    animation-duration: 6s;
    background-image: url('bgs/sector5.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    width: 100%;
    transition: 1s;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main_container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    animation: darken-bg 4s ease-in-out 2.5s forwards;
    z-index: 0;
}

@keyframes darken-bg {
    to {
        opacity: 0.6;
    }
}

.main_container > * {
    position: relative;
    z-index: 1;
}

#first-text {
    margin: 0;
    bottom: 23vh;
    /*padding-left: 50px;*/
    left: 10vw;
    position: absolute;
    animation-delay: 1s;
    animation-duration: 1.5s;
}

#first-text:before {
    content: 'le';
    -webkit-animation: colorchange-after 5s;
}

#first-text:after {
    content: 'cagot';
    -webkit-animation: colorchange 5s;
}

@-webkit-keyframes colorchange {
    50% {
        color: #F0F8FF; /* Alice Blue */
        text-shadow: 0 0 8px #00D4FF, 0 0 12px #00D4FF; 
    }
    100% {
        color: #becab2;
        text-shadow: 1px 1px 9px black;
    }
}

@-webkit-keyframes colorchange-after {
    50% {
        color: #00D4FF; /* Bright Neon Cyan */
        text-shadow: 0 0 10px #000000;
    }
    100% {
        color: #becab2;
        text-shadow: 1px 1px 9px black;
    }
}

#icon-container {
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    bottom: 0.5em;
}

.single-icon {
    fill: #b5c1b5;
    margin: 0 0.5em 0 0.5em;
    width: 3vh;
}

.icn {
    transform: translate(0em, 0%);
}

#mail:hover {
    transition: fill 0.25s ease;
    fill: #D14836;
}

#github:hover {
    transition: fill 0.25s ease;
    fill: #181717;
}
/* 
#discord:hover {
    transition: fill 0.25s ease;
    fill: #7289DA;
} */

#steam:hover {
    transition: fill 0.25s ease;
    fill: #000000;
}

/* #facebook:hover {
    transition: fill 0.25s ease;
    fill: #1877F2;
} */

/* #twitter:hover {
    transition: fill 0.25s ease;
    fill: #1da1f2;
} */

/* #instagram:hover {
    transition: fill 0.25s ease;
    fill: #E4405F;
} */
/* 
#spotify:hover {
    transition: fill 0.25s ease;
    fill: #1ED760;
} */

#linkedin:hover {
    transition: fill 0.25s ease;
    fill: #0a66c2;
}

/*.inner_container {*/
/*    min-height: 200px;*/
/*    min-width: 600px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    position: relative;*/
/*    border: 3px solid green;*/
/*}*/

/*.inner_container_position {*/
/*    margin: 0;*/
/*    position: absolute;*/
/*    top: 70%;*/
/*    left: 25%;*/
/*    -ms-transform: translate(-50%, -50%);*/
/*    transform: translate(-50%, -50%);*/
/*}*/

/*.center {*/
/*    margin: 0;*/
/*    position: absolute;*/
/*    !*top: 50%;*!*/
/*    left: 50%;*/
/*    -ms-transform: translate(-50%, -50%);*/
/*    transform: translate(-50%, -50%);*/
/*}*/