@font-face {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    src: url('assets/font/times-new-roman.ttf');
}

@font-face {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    src: url('assets/font/times-new-roman.ttf');
    font-weight: 200;
}

@font-face {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    src: url('assets/font/times-new-roman-bold.ttf');
    font-weight: 300;
}

@font-face {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    src: url('assets/font/times-new-roman-bold.ttf');
    font-weight: bold;
}

body {
    background: linear-gradient(#30439b, #c0b083);
    height: 100vh;
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
    font-weight: 300;
    overflow: hidden;
    color: white;
    text-align: center;
}

/* Container to hold both halves */
.container-fluid.home {
    display: flex;
    height: calc(100vh - 30vh);
    /* 100% of the viewport height */
    align-items: center;
    justify-content: center;

}

/* Left Half */
.half {
    flex: 1;
    /* Each half takes up equal space */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.left {

    color: white;
    border-right: .001rem solid #cccccc75;
}

.right {

    color: white;
}

/* Content Styling */
.content {
    text-align: center;
    padding: 20px;
}

/* Optional: Text Animation */
h1 {
    font-size: 2em;
    animation: fadeIn 2s ease-in-out;
}

img {
    width: 80%;
    margin-bottom: .75rem;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.half:hover img {
    transform: scale(1.01);
}

@media screen and (max-width:999px) {
    .container-fluid.home {
        flex-direction: column;
        height: calc(100vh - 20vh);
    }

    .left {
        border-right: unset;
        border-bottom: .001rem solid #cccccc75;

    }
}





@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;1,500&display=swap");

a:hover {
    color: #fff;
}

h1 {
    font-size: 3em;
    margin-bottom: 0.2em;
}

h2 {
    font-size: 2em;
}

.main {
    height: 80vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    align-items: center;
}

.main:before, .main:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -3;
}

.main:before {
    right: 0;
    top: -19rem;
    height: 15em;
    width: 15em;
    border-radius: 30em;
    background: linear-gradient(#083578, #F4DA67);
    align-self: flex-end;
    -webkit-animation: gradient-fade 8s ease-in-out 3s infinite alternate;
    animation: gradient-fade 8s ease-in-out 3s infinite alternate;
}

.main:after {
    top: 0;
    left: 30;
    height: 10em;
    width: 10em;
    border-radius: 10em;
    background: linear-gradient(#083578, #F4DA67);
    -webkit-animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;
    animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;
}

.main__text-wrapper {
    position: relative;
    /* padding: 2em; */
    display: flex;
    align-items: center;
    top: 0rem;
    width: 100%;
    margin: auto;
}

.main__text-wrapper:before, .main__text-wrapper:after {
    content: "";
    display: block;
    position: absolute;
}

.main__text-wrapper:before {
    z-index: -1;
    top: -3em;
    right: -3em;
    width: 13em;
    height: 13em;
    opacity: 0.7;
    border-radius: 13em;
    background: linear-gradient(#ffdc49, #1c3dd6);
    -webkit-animation: rotation 7s linear infinite;
    animation: rotation 7s linear infinite;
}

.main__text-wrapper:after {
    z-index: -1;
    bottom: -8em;
    width: 20em;
    height: 20em;
    border-radius: 20em;
    background: linear-gradient(#f4da67, #0a58ca);
    -webkit-animation: rotation 7s linear infinite;
    animation: rotation 7s linear infinite;
    left: -6rem;
}

.arrow {
    z-index: 1000;
    opacity: 0.5;
    position: absolute;
}

.arrow--top {
    top: 0;
    right: 0;
}

.arrow--bottom {
    bottom: 0;
    left: 3em;
}

.circle {
    transform: translate(50%, -50%) rotate(0deg);
    transform-origin: center;
}

.circle--ltblue {
    height: 20em;
    width: 20em;
    border-radius: 20em;
    background: linear-gradient(#15e0ff, #3800e7);
}

.backdrop {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: block;
    background-color: pink;
}

.dotted-circle {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.3;
    -webkit-animation: rotation 38s linear infinite;
    animation: rotation 38s linear infinite;
}

.draw-in {
    stroke-dasharray: 1000;
    stroke-dashoffset: 10;
    -webkit-animation: draw 15s ease-in-out alternate infinite;
    animation: draw 15s ease-in-out alternate infinite;
}

@-webkit-keyframes draw {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.item-to {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}

.bounce-1 {
    -webkit-animation-name: bounce-1;
    animation-name: bounce-1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

.bounce-2 {
    -webkit-animation-name: bounce-2;
    animation-name: bounce-2;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;

}

.bounce-3 {
    -webkit-animation-name: bounce-3;
    animation-name: bounce-3;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

@-webkit-keyframes bounce-1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes bounce-1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes bounce-2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes bounce-2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes bounce-3 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes bounce-3 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes gradient-fade {
    from {
        transform: translate(10%, -10%) rotate(0deg);
    }

    to {
        transform: translate(50%, -50%) rotate(360deg);
    }
}

@keyframes gradient-fade {
    from {
        transform: translate(10%, -10%) rotate(0deg);
    }

    to {
        transform: translate(50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes gradient-fade-alt {
    from {
        transform: translate(-20%, 20%) rotate(0deg);
    }

    to {
        transform: translate(-60%, 60%) rotate(360deg);
    }
}

@keyframes gradient-fade-alt {
    from {
        transform: translate(-20%, 20%) rotate(0deg);
    }

    to {
        transform: translate(-60%, 60%) rotate(360deg);
    }
}

.flag {
    margin-right: .5rem;
    cursor: pointer;
}

.flag:hover {
    transform: scale(1.01);
}

.btn-new {
    background-color: #F4DA67;
    padding: .25rem 1.25rem;
    border-radius: 2rem;
    color: #083578;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0rem 0 .5rem;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);
}

.btn-new:hover {
    color: #F4DA67;
    background-color: #083578;
    box-shadow: 0 1px 10px #F4DA67;
}

a {
    text-decoration: none;
    color: #fff;
}

@media screen and (max-width:999px) {
    .col-lg-4.col-sm-6.text-start {
        justify-items: center;
    }

    .index-logo {
        width: 45%;
        display: block;
    }

    .main {
        height: 75vh;
        display: flex;
        position: relative;
        align-items: flex-end;
        flex-direction: column;
        z-index: 2000;
        width: 100%;
    }

    .main__text-wrapper {
        flex-direction: column;
        position: relative;
        /* padding: 2em; */
        display: flex;
        align-items: center;
        top: 0rem;
        width: 90%;
        margin: auto
    }

    .main:before {
        left: -30px;
        top: 21rem;
    }

    .main:after {
        bottom: 0;
        top: unset;
    }

    .flag:first-child {
        /* border-bottom: 1px solid #cccccc75; */
        margin: .5rem 0;
        /* padding-bottom: 1.5rem; */
    }

    img {
        width: 90%;
        margin-bottom: .5rem;
    }

    .main__text-wrapper:after {
        display: none;
    }

    .main__text-wrapper:before,
    .main:before {
        width: 4.5em;
        height: 4.5em;
        right: 1em;
    }

    .flag-new {
        margin-top: .5rem;
    }
}