/*
 * Apply Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');


/*
 * Reset the browser default
 */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



:root {

    /* Main Colors */
    --color-main: rgb(125, 0, 84);
    --color-primary: rgb(207, 0, 186);
    --color-secondary: rgb(242, 0, 255);

    /* Secondary Colors */
    --color2-main: rgb(133, 113, 0);
    --color2-primary: rgb(195, 169, 24);
    --color2-secondary: gold;

    /* Basic Colors */
    --black: black;
    --white: white;
    --text: gold;
    --test: lime;
    --error: red;

}

h1, h2, h3 {
    color: var(--black);
}

p {
    color: var(--black);
}

body {
    color: var(--black);
    font-size: 1rem;
    font-weight: 300;
    padding: 5rem 0 5rem 0;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.img-logo {
    min-width: 24px;
    height: 24px;

}

.trap a {
    color: var(--color-main);
    text-decoration: none;
}

.trap a:hover {
    animation: blinker .5s infinite alternate;
    color: var(--color-main);
}

@keyframes blinker {
    0% {
        color: var(--color2-main);
    }

    50% {
        color: white;
    }

    100% {
        color: var(--color-main);
    }
    
}



/* Goto_top Button */
.fixed_Goto_top {
    z-index: 999;
    position: fixed;
    right: 5%;
    bottom: 5%;
    font-size: 40px;
    border: 3px solid var(--color2-secondary);
}


footer {
    padding: 15px;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

footer img {
    padding: 4px;
    width: 20px;
    height: 20px;
}


.icons {
    margin: 5px;
    display: flex;
    justify-content: flex-end;
    height: 40%;
}

footer{
    background-color: var(--black);
}

.information-footer {
    padding: 5px;
    border: 3px inset var(--color2-secondary);
    background-color: var(--white);
}