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

html {
    height: 100%;
}

body {
    background: radial-gradient(#FF0080, #0c2a34) !important;
    font-family: Roboto;
    margin: 0;
    height: 100%;
    color: #fff;
    font-size: 20px;
}

header {
    padding-bottom:3rem;
}

.container {
    max-width:1024px;
    margin:0 auto;
    padding:3rem;
}

h2 {
    font-weight: 300;
    font-size: 2.5rem;
    margin:0;
}

.image-section {
    display:flex;
    gap:2rem;
}

    .image-section figure {
        flex:1;
        margin:0;
    }

    .image-section figure img {
        max-width:100%;
    }
    
    .image-section div {
        flex: 1;
    }

.button {
    display: inline-flex;
    background: #092832;
    color: #fff;
    padding: .75rem 2rem;
    border-radius: 4px;
    text-decoration:none;
    transition:all .2s ease-in-out;
}

    .button:hover {
        background: #17687A;
    }

@media only screen and (max-width: 800px) {
    .image-section {
        flex-direction:column-reverse;
    }
}