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

:root {
    --overlay-edge: #00000040;
    --overlay-center: #50000010;
 }
 
 body {
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
 }
 
 #small-head-img {
    width: 100%;
    height: 200px;
    background: linear-gradient(var(--overlay-edge), var(--overlay-center), var(--overlay-edge)), linear-gradient(to right, var(--overlay-edge), var(--overlay-center), var(--overlay-edge)), center 40% / 1000px auto url('./chicken-profile.jpg');
    transform: scaleX(-1);
    position: fixed;
    top: 0;
    z-index: -1
 }
 
 h3 {
    width: calc(100% - 50px);
    font-size: 50px;
    color: #8e8084;
    padding: 25px 25px 0;
    background-color: #ffffff;
    margin: 0 0 25px;
 }
 
 .row-container {
     width: 100%;
     background-color: #ffffff;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 124px 0 0;
 }
 
 .row {
    width: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    padding: 25px 25px 0;
    line-height: 1.5em;
    color: #231f20;
    font-size: 18px;
    position: relative;
 }
 
 .row img {
    width: 100%;
 }

 .row img.border {
     width: calc(100% - 4px);
     border: 2px solid #231f20;
 }

 .row .caption {
     position: absolute;
     bottom: 9px;
     left: 27px;
     padding: 10px;
     font-size: 10px;
     font-style: italic;
     color: #000;
     line-height: 1em;
     text-shadow: 0 0 0px #000, 0 0 2px #fff, 0 0 3px #fff,0 0 4px #fff, 0 0 5px #fff;
 }

 .dotted {
     text-decoration: underline dotted;
 }

 .dotted:hover {
     text-decoration: underline solid;
 }
 
 footer {
    margin: 50px 0 0;
    padding: 25px;
    width: calc(100% - 50px);
 }
 
 @media only screen and (min-width: 600px) {
    #small-head-img {
        height: 300px;
    } 

    .row-container {
        margin: 200px 0 0;
    }
    
    h3 {
       width: calc(100% - 100px);
    }

    h3, .row {
        padding: 50px 50px 0;
        width: 500px;
    }

    .row .caption {
        left: 52px;
    }
    
    footer {
       padding: 50px;
       width: calc(100% - 100px);
    }
 }
 
 @media only screen and (min-width: 1000px) {
    #small-head-img {
        background-size: 100%, 100%, cover;
    } 

    h3, .row {
        width: 700px;
    }

    .row {
        flex-direction: row;
    }
 
    .row > *:not(:first-child) {
       margin-left: 50px;
    }
 
    .row * {
       flex: 1;
    }
    
    .row *.big {
       flex: 1.5;
    }
    
    .row *.small {
       flex: 0.75;
    }
 }