/* ==============
   Font Family

Font size       => rem
padding, margin => em
widths          => em or percentage
   ============== */


@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

:root {
    --main-width: 250px;
  }





* {
    box-sizing: border-box;
}



body {
    
    background: #1c1c1c;
    /* border: 2px solid white; */
    color: white;
    font-family: 'Montserrat';
}

/* =================
   Typography 
   ================= */


h1 {
    /* border: 2px solid white; */
    font-size: 8rem;
    margin-bottom: 1.0em;
    
}

h2 {
    font-size: 4rem;
    /* border: 2px solid white; */
}


h5 {
    font-size: 2rem;
}



p{
    border: 2px solid white;
    font-size: 2rem
}

footer{
    
    /* border: 2px solid white; */
    font-size: 2rem;
    margin-top:5em;
    text-align: center;
    
    
}

/* =================
   Layout 
   ================= */

/* The Container */
.box-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 1.5rem;
    justify-items: center;
    padding: 0;
  }
  
  /* Styles for the caption overlays */
  /* Standard Box: Top Center */
  .box-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.2rem;
    background-color: #333333;
    color: #d9d9d9;
  }
  
  /* Box: Center Center */
  .box-flex-center {
    align-items: center;
  }
  
  /* Box: Bottom Center */
  .box-flex-bottom {
    align-items: flex-end;
  }
  
  /* Box: Top Right */
  .box-flex-top-right {
    justify-content: flex-end;
  }
  
  /* Box: Center Left */
  .box-flex-center-left {
    align-items: center;
    justify-content: flex-start;
  }
  
  /* Box: Bottom Right */
  .box-flex-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .box-img {
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
  }
  
  .box-img:hover {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
  
  .box-caption {
    position: absolute;
    max-width: 200px;
    margin: 0;
    padding: .5rem;
    word-break: break-word;
    font-size: 1.25rem;
    background-color: rgba(0,0,0,.3);
    color: #f2f2f2;
  }
  
  .box-caption:hover {
    background-color: rgba(0,0,0,.5);
    color: #e6e6e6;
    transition: all ease .5s;
  }
  
  /* Styles for multiple caption overlays */
  
  /* align-self: flex-start */
  .align-start {
    align-self: flex-start;
  }
  
  /* align-self: center */
  .align-center {
    -ms-grid-row-align: center;
    align-self: center;
  }
  
  /* align-self: flex-end */
  .align-end {
    align-self: flex-end;
  }



    
/* =================
   Media Queries 
   ================= */







/* =================
   White space, Color, Contrast, Scale, Alignment
   Typography, Visual Hierarchy 
   ================= */