@import './variable.scss';
@import './minix.scss';

$footer-bg: rgba(20, 25, 31, 0.9);

.footer {
    @include clearfix;
    padding: 3rem 0 0;
    background-color: $footer-bg;
    
    &--icon {
        img {
            width: 100px;
            display: block;
            margin: auto;
            border-radius: 50%;
            box-shadow: 3px 3px 20px #999;
            transition: transform 2000ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 1200ms;
            
            &:hover {
                transform: scale(1.1, 1.1) rotate(360deg);
                box-shadow: 0px 0px 50px #fff;
            }
        }
    }
    
    &--txt {
        text-align: center;
        margin-top: 2rem;
        color: white;
        font: {
            size: 110%;
            weight: 700;
        }
    }
    
    &--links {
        overflow: hidden;
        ul {
            width: 300px;
            margin: 1rem auto;
            position: relative;
            padding: 0;
            display: flex;
            
            li {
                padding: 0;
                margin: 0;
                display: inline-block;
                flex: 1;
                text-align: center;
            }
            
            svg {
                width: 30px;
                fill: white;
            }
        }
    }
    
    &--licence {
        margin-top: 1rem;
        text-align: center;
        color: white;
        font: {
            size: 90%;
            width: 300;
        }
    }
}