@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');
@keyframes bg-animation {
    from {
        background-size: 150% 150%;
    }
    to {
        background-size: 110% 110%;
    }
}

@keyframes bg-animation-vert {
    from {
        background-size: 200% 200%;
    }
    to {
        background-size: 150% 100%;
    }
}

html, body {
    padding: 0;
    margin: 0;
}
.main {
    font-family: 'Open Sans', sans-serif;
    width: 100vw;
    height: 100vh;
    animation-delay: 100ms;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main .choose .devfest-logo, .choose-par {
    width: 400px;
    display: block;
    margin: 0 auto;
}
.choose-par {
    text-align: center;
    font-size: 26px;
    font-weight: 300;
}
.main .places .place {
    width: 50%;
    text-align: center;
    font-weight: 300;
    text-decoration: none;
    color: #191919;
}
.place:visited {
    color: #191919;
}
.place:hover {
    background-color: rgba(57,80,138,0.6);
    color: #fff;
}
.bold {
    font-weight: 400;
}


@media all and (max-width: 600px) {
    .main {
        background-image: url("images/devfest-artwork.svg");
        background-repeat: repeat;
        animation-name: bg-animation-vert;
    }
    .main .places {
        display: block;
        width: 100%;
        margin-top: 20px;
    }
}

@media all and (min-width: 601px) {
    .main {
        background-image: url("images/devfest-artwork.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 120% 120%;
        animation-name: bg-animation;
    }
    .main .places {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-top: 30px;
    }
}