:root {
    --insta-primary-blue: #67B6FA;
    --insta-primary-white: #FFFFFF;
    --insta-background-grey: #FAFAFA;
    --insta-border-grey: #DBDBDB;
    --or-font-color: #8E8E8E;
    --facebook-blue: #385185;
    --sign-up-color: #0095F5;
}

/* Main */

body {
    background-color: var(--insta-background-grey);
    margin: 0;
}

.flex-container {
    display: flex;
    justify-content: center;
    margin: 33px;
    gap: 20px;
}

/* Iphone */

#instagram-phone {
    display: block !important;
}

.ig-phone {
    width: 450px;
}

/* Right side */

.instagram-login {
    display: flex;
    flex-direction: column;
    padding: 15px;
    height: 400px;
    width: 300px;
    border: none;
}

.instagram-login>div {
    display: flex;
    flex-direction: column;
    margin: 20px;
    gap: 5px;
}

.insta-logo {
    justify-content: center;
    align-items: center;
}

.insta-logo>img {
    width: 175px;
}

.login>input {
    background-color: var(--insta-background-grey);
    border: 1px solid var(--insta-border-grey);
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    border-radius: 5px;
}

.login>button {
    background-color: var(--insta-primary-blue);
    padding: 8px;
    margin-top: 15px;
    border-radius: 10px;
    margin-bottom: -20px;
    border: none;
    color: white;
}

.instagram-login>.OR-row {
    color: var(--or-font-color);
    flex-direction: row;
}

.OR-row>h3 {
    margin: 0px;
}

.OR-row>hr {
    border: -6 solid var(--or-font-color);
    width: 50%;
    height: 1px;
    background-color: var(--or-font-color);
}

.fb-row {
    cursor: pointer;
}

.instagram-login>.fb-row {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--facebook-blue);
    margin: -15px;
    gap: 10px;
    padding-right: 25px;
}

.fb-row>img {
    width: 20px;
    height: 20px;
}

.instagram-login>.forgot-pass {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 2px;
    color: var(--facebook-blue);
    cursor: pointer;
}

.instagram-login>.sign-up-box {
    margin-top: 10px;
    margin-left: -16px;
    padding: 5px;
    height: 50px;
    width: 320px;
    flex-wrap: wrap;
}

.sign-up-box>div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.sign-up {
    color: var(--sign-up-color);
    cursor: pointer;
}

.app-box>p {
    margin-top: -20px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.app-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.app-icons>img {
    width: 130px;
    margin: 0px;
}

/* Footer */

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
}

footer>div {
    flex-direction: row;
    margin: 8px;
    font-size: 77%;
    color: var(--or-font-color);
    cursor: pointer;
}

footer>div:hover {
    text-decoration: underline;
}

.second {
    margin-top: 0;
}

/* @media */

@media only screen and (min-width: 820px) {
    
    .flex-container {
        margin-top: 30px;
    }

    .instagram-login {
        background-color: var(--insta-primary-white);
        border: var(--insta-border-grey);
        border-width: 1px;
        border-style: solid;
    }

    .instagram-login>.sign-up-box {
        background-color: var(--insta-primary-white);
        border: var(--insta-border-grey);
        border-width: 1px;
        border-style: solid;
        margin-top: 20px;
    }

}

@media screen and (max-width: 820px) {

    #instagram-phone {
        display: none !important;
    }

    footer {
        margin-top: 70%;
    }

    footer>div {
        margin: 8px;
    }

    .second-bottom {
        margin: 0%;
    }

    .flex-container {
        display: flex;
        justify-content: center;
        gap: 20px;
    }
}

@media only screen and (max-width: 414px) {

    #instagram-phone {
        display: none !important;
    }

    footer {
        margin-top: 60%;
    }

    .flex-container {
        margin: 20px;
        gap: 20px;
    }

    .instagram-login {
        border: none;
        background: none;
    }

    .instagram-login>.sign-up-box {
        background: none;
        border: none;
    }
    
}