/*This is a comment in CSS*/

nav{
    padding:10px 3%;
}

/* original aspect ratio width="640" height="360" */
.responsive-video{
    position: relative;
    width: 79%; /* adjust this and the padding-top to change how big it is*/
    height: 0;
    padding-top: 45%; /* padding top is in reltation to the width of parent, it preserves aspect ratio*/
    /* margin: 0 auto; */ /*this would center your video in the section container*/
}
.responsive-video iframe{
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}

/*simple way to handle responsiveness, set a max-width and width 100% so if screen is smaller than 500px, image is 100% of that size */
#striped-image0{
    width:100%;
    max-width:400px;
    height: auto;
    margin-left: 3%;
}

#striped-image{
    width:100%;
    max-width:500px;
    height: auto;
}

#striped-image2{
    width:100%;
    max-width:427px;
    height: auto;
}
#striped-image3{
    width:100%;
    max-width:1083px;
    height: auto;
}

.flex-container{
    display: flex; /* all children will now be flex items */
    flex-direction: row; /* other option is column */
    flex-wrap: wrap; /* means the children will wrap to a new line */
}
.flex-item{
    display: flex;
    /* the following three items can be put on one line: https://developer.mozilla.org/en-US/docs/Web/CSS/flex */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%; /*width of the box, take up a quarter of the parent's size*/
    box-sizing: border-box; /*this means that we can add padding, line below, and still only take 25% width of parent*/
    padding: 5px;
}