styles.css

a {
    font-size: 30px;
    color: #5b2b1a;
    transition: color .3s ease-in-out, box-shadow .6s ease-in-out;
} 
a:hover {
    box-shadow: inset 400px 0 0 #d26a44;
    color: #ffd2c1;
}
body {
    background-color: #ff7f50;
    color: #161616;
}
p {font-size: 20px;} 
.container {
    display: inline-block;
    vertical-align: top;
}
@media (max-width: 950px) {
    .container {
        font-size: 80px;
    }
}
@media (max-width: 950px) {
    .p {
        font-size: 80px;
    }
}
button {
    background-color: #f3b39c;
    border: none;
    padding: 13px 13px;
    column-span: 6px;
    margin: 1px 6px;
}
.center {
    top: 50%;
    left: 50%;
    text-align: center
}

iframe {
  border: 1px solid black;
}

.still {
  scrollbar-width: thin;
  still: auto;
}

/* GALLERY CSS */

* {
    box-sizing: border-box;
  }
  
  /* this suckz
  img:hover{
    transform:scale(1.2);
    }

  img{
    transition: transform .2s;
    }
  */ 
  body {
    margin: 0;
  }

.header {
    text-align: center;
    padding: 32px;
  }
  
  .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}