@import url('https://fonts.googleapis.com/css2?family=Magra:wght@400;700&family=Overlock:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --loginbackground: #e2e2e2;
    --white: #ffffff;
    --gray: #e2e2e2;
    --primarybg: #317298;
    --btnbg: #008080;
    --froly: #f56c6c;
    --dark-grey: #BDB0AD;
    --light-black: #646564;
    --light-blue: #87B5E3;
    --light-red: #f56c6c52;
    --light-sky: #EDEFF2;
    --dark-orange: #DBA431;
    --off-white: #F8F8F8;
    --accent: #cacaca;
    --heading: #397b64;
}


body {
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    font-family: 'Magra', sans-serif !important;
    filter: saturate(0.6);
    margin-top: -5% !important;
}

form {
    display: grid;
    justify-content: center;
}

.form-control-login {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--heading) !important;
}

.input-group-text {
    background: rgba(255, 255, 255, 0.1) !important;
}

.input-group-text>i {
    color: var(--accent);
}

.btn-accent {
    background: #1a4587 !important;
    border: 1px solid #1a4587 !important;
    color: #fff !important;
}

.content {
    width: 35em;
    padding: 4em 3em;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--accent);
    box-shadow: 0px 0px 3px var(--accent);
    color: #fff !important;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.home-logo {
    width: 25em;
    padding: 1em;
    filter: drop-shadow(2px 2px 1px black);
}

.info-buttons {
    display: flex;
    gap: 1em;
    padding: 1em 0em;
    float: right;
}

.info-buttons>button {
    padding: 0.375rem 2.75rem;
}