/*
    CSS RESET: https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
    margin: 0;
}

/*
    3. Allow percentage-based heights in the application
  */
html,
body {
    height: 100%;
}

/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
    font: inherit;
}

/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

/*
  Theme
  */

html {
    width: 100vw;
}

body {
    background: #091f30;
    font-family: "Lato", sans-serif;
    color: #e2f0f4;
    font-size: 1.3em;
    width: 100vw;
    margin: 0px;
}

.wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 10px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    font-family: "Fjalla One", sans-serif;
    color: #2b6b89;
    font-size: 4em;
    margin: 10px;
}

.rounded-img {
    border-radius: 250px;
    max-width: 75%;
    width: 400px;
}

.center-text {
    text-align: center;
}

.header {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.glow {
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

quote {
    font-size: 0.8em;
    font-style: italic;
}

hr {
    border: 1px solid #2b6b89;
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #091f30,
            0 0 40px #091f30, 0 0 50px #091f30, 0 0 60px #091f30,
            0 0 70px #091f30;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #2b6b89, 0 0 40px #2b6b89,
            0 0 50px #2b6b89, 0 0 60px #2b6b89, 0 0 70px #2b6b89,
            0 0 80px #2b6b89;
    }
}

@media only screen and (min-width: 1200px) {
    .wrapper {
        flex-direction: row;
    }

    .boxes {
        width: 100%;
    }
}


/*
  #F4F5F6

*/