/*Procrastinating Pixie font: https://www.fontspace.com/pro-pixie-font-f44959*/
/*Itim font: https://fonts.google.com/specimen/Itim*/

@font-face {
    font-family: 'Itim';
    src: url('/assets/miscellaneous/Itim.ttf') format('truetype');
}

@font-face {
    font-family: 'Procrastinating Pixie';
    src: url('/assets/miscellaneous/Procrastinating_Pixie.ttf') format('truetype');
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}


/*Background gradient*/
body {
    color: #333333;
    font-family: 'Procrastinating Pixie', 'Itim', system-ui;
    text-align: center;
    background: linear-gradient(-45deg,
    #8779eb, #7074ec, #6780ee, #5d8ff0, #54a2f2, #4ab8f5, #3fd2f7, #35f1fa);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}


/*Top part of body*/
.header {
    margin-bottom: 20px;
}

.header img {
    width: 6rem;
    height: auto;
    border-radius: 50%;
}


/*Middle part of body*/
.body {
    display: block;
    font-size: 1.25em;
}

hr {
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
}

.button {
    color: #333333;
    display: flex;
    height: 200%;
    width: 100%;
    border: 1px solid #333333;
    border-radius: 1em;
    max-width: 500px;
    max-height: 50px;
    margin: 0 auto 20px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.button_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
}

.compact {
    margin-bottom: -10px;
}

.compact .button {
    display: inline-block;
    height: 50px;
    width: 50px;
}


/*Bottom part of body*/
.footer {
    font-size: small;
    font-family: 'Itim', system-ui;
}

.footer a {
    color: #333333;
}


/* Error page specific styling */
.error-title {
    font-size: 2.5rem;
    margin-bottom: 0.25em;
}

.error-code {
    font-size: 1.1rem;
    margin-bottom: 0.75em;
    opacity: 0.8;
}

.error-message {
    max-width: 500px;
    margin: 0 auto 1.5em;
}


/*Icon formatting*/
ion-icon {
    font-size: 2em;
    padding: 5px;
}


/*Button colors*/
#twitch:hover {
    color: #ffffff;
    background-color: #6441a5;
}

#twitter:hover {
    color: #ffffff;
    background-color: #55acee;
}

#youtube:hover {
    color: #ffffff;
    background-color: #dd0000;
}

#discord:hover {
    color: #ffffff;
    background-color: #7289da;
}

#instagram:hover {
    color: #ffffff;
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

#steam:hover {
    color: #c6c4c2;
    background-color: #171a21;
}

#github:hover {
    color: #ffffff;
    background-color: #211f1f;
}

#mail:hover {
    color: #850122;
    background-color: #ffffff;
}

#home:hover {
    color: #ffffff;
    background-color: #333333;
}