/*This is a comment in CSS*/

body{
    font-family: Verdana, sans-serif;
    margin: 0;
}

header h1{
    font-size: 35px;
    margin:20px 0;
}
header h2{
    font-size: 20px;
    margin: 0px 0px 40px 0px;
    font-weight: normal;
    font-style: italic;
}

main.documentation-page h3{
    margin-top: 40px;
}

li{
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
}
p{
    font-size: 16px;
    line-height: 1.6em;
    margin: 2.5em 0;
    font-family: Helvetica, sans-serif;
}

main,
header{
    width:100%;
    max-width:1400px; /* means it won't be larger than 1200px on larger screens */
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px 3%;
}

header.documentation-header{
    padding: 0 3%;
}

.documentation-header section,
main.documentation-page section{
    margin: 10px 10%;
}

footer{
    width:100%;
    min-height:100px;
}


nav{
    padding:10px 3%;
}

nav a{
    color: black;
    text-decoration: none;
}
nav a:hover{
    color: grey;
}

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

img{
    width: 100%;
}

/* original aspect ratio width="640" height="360" */
.responsive-video{
    position: relative;
    width: 100%; /* adjust this and the padding-top to change how big it is*/
    height: 0;
    padding-top: 57%; /* 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%;
}


/* Flex layouts are one of the easier ways to style responsive layouts that work on all devices */
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox */

.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;
}

.flex-basis-third .flex-item{
    flex-basis: 33.33%; 
}

.flex-basis-half .flex-item{
    flex-basis: 50%; 
}

.flex-item a{
    display: flex;
    width: 100%;
    height: 0;
    padding: 30% 0;
    background-image: url(../assets/images/lightgrey-line.jpeg); /*change the image to one of you choice */
    background-position: center;
    background-size: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color:#4f4f4f;
    transition: all 0.2s; /* CSS transitions https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions */
}

/* want a different background image for each project? */
/* try give each a tag a unique id in your HTML and then set different background images here*/
/* EXAMPLE CSS: won't work if you just un-comment this:*/
/* .flex-item a#my-special-id{
    background-image: url(../assets/images/custom-image-name.jpeg); 
} */


.flex-item a:hover{
    color:#bbbbbb;
    background-size: 120%;
}

.flex-item h4{
   margin:10px;
   background-color: white;
   padding:5px 10px;
}


/* Media Queries for responsive design */

/* Un-comment the body background-colors to see bold debug color change between screen sizes */

/* Extra large */
@media screen and (max-width: 1200px) {
    /* body {
      background-color: rgb(0, 255, 162);
    } */

    .flex-item{
        flex-basis: 33.33%; /*width of the box, take up a quarter of the parent's size*/
    }
}

/* Large */
@media screen and (max-width: 992px) {
    /* body {
      background-color: rgb(255, 81, 0);
    } */

    .documentation-header section,
    main.documentation-page section{
        margin: 40px 5%;
    }

}

/* Medium */
@media screen and (max-width: 768px) {
    /* body {
      background-color: rgb(255, 0, 191);
    } */

    .flex-item{
        flex-basis: 50%; /*width of the box, take up a quarter of the parent's size*/
    }
}

/* Small */
@media screen and (max-width: 576px) {
    /* body {
      background-color: blue;
    } */

    .flex-item{
        flex-basis: 100%; /*width of the box, take up a quarter of the parent's size*/
    }
}