/* Original color palette
-- Dark purple: #1f1c39;
-- Purple: #524ab3;
-- Black: #0f0e1c;
-- White: #fff;
*/

/* Easy changeable colors */
:root {
    --dark-purple: #111111;
    /* --purple: #524ab3; */
    --black: #0f0e1c;
    --white: #fff;
    --main-font: icebox;
    --sec-font: sf;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    background-image: url(../img/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--dark-purple);
    line-height: 1.5rem;
    margin: 0;
    overflow: hidden;
}

.frogMenu {
    display: flex;
}

.frogLogo img {
    width: 6rem;
    margin: 2.5rem;
    padding: 0 2rem;
}

.frogLink {
    display: inline-block;
    margin: 5rem -4rem;
    font-family: var(--main-font);
}

.frogLink a {
    color: var(--white);
    padding: 0 0.5rem;
}

.frogMain {
    margin: 2rem 5rem;
    color: #fff;
}

.frogMain div {
    padding: 0.5rem 0;
}

.frogTitle h2 {
    font-family: var(--main-font);
}

.frogDesc p {
    font-family: var(--sec-font);
    width: 50rem;
}

.frogRender {
    margin: -19rem 52rem;
}

.frogRender img {
    width: 25rem;
}

.frogFooter {
    position: absolute;
    margin: 4rem 0;
    padding: 5rem;
}

.frogCopyright a {
    font-family: var(--main-font);
    color: #fff;
}

.frogSocial i {
    color: #fff;
    font-size: 20px;
    margin: 10px 5px;
    position: relative;
    left: -5px;
    transition: 0.5s ease;
}

table {
    margin: 1rem -3px;
}

/* Hover social color */
#discord i:hover {
    color: #7289da;
}
#youtube i:hover {
    color: #cc181e;
}
#twitter i:hover {
    color: #55acee;
}
#instagram i:hover {
    color: #f44747;
}
#facebook i:hover {
    color: #326ada;
}

/* Responsive */
@media only screen and (max-width: 980px) {
    body {
        background-size: cover;
    }
    .frogMain {
        margin: 2rem 2rem;
    }
    .frogRender {
        display: none;
    }
    .frogDesc p {
        width: 100%;
    }
    .frogLogo img {
        padding: 0 27.5%;
    }
    .frogMenu {
        display: block;
    }
    .frogLink {
        margin: 0 10%;
        padding: 0 10%;
    }
}

/* Custom fonts */
@font-face {
    font-family: icebox;
    src: url(../fonts/icebox.otf);
}
@font-face {
    font-family: sf;
    src: url(../fonts/sf.otf)
}
@font-face {
    font-family: ak47;
    src: url(../fonts/ak47.ttf)
}