#gallery {
     padding-top: 0%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     font-family: sans-serif;
 }
 
 h1 {
     color: coral;
 }
 
 .grid-container {
     columns: 3;
     column-gap: 1.5rem;
     width: 90%;
     margin: 0 auto;
 }
 
 #photoframe {
     width: 150px;
     display: inline-block;
     width: 100%;
     padding: 5px;
     transition: all .25s ease-in-out;
 }
 
 #photo {
     width: 100%;
     transition: all .25s ease-in-out;
 }
 
 #checkbox {
     padding: 2%;
     float: left;
     padding-top: 0%;
 }
 
 .ckeckboxcontainer {
     display: block;
     position: relative;
     padding-left: 35px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 20px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 /* Hide the browser's default checkbox */
 
 .ckeckboxcontainer input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }
 /* Create a custom checkbox */
 
 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 23px;
     width: 23px;
     background-color: #eee;
 }
 /* On mouse-over, add a grey background color */
 
 .ckeckboxcontainer:hover input~.checkmark {
     background-color: #ccc;
 }
 /* When the checkbox is checked, add a blue background */
 
 .ckeckboxcontainer input:checked~.checkmark {
     background-color: #444444;
 }
 /* Create the checkmark/indicator (hidden when not checked) */
 
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }
 /* Show the checkmark when checked */
 
 .ckeckboxcontainer input:checked~.checkmark:after {
     display: block;
 }
 /* Style the checkmark/indicator */
 
 .ckeckboxcontainer .checkmark:after {
     left: 9px;
     top: 5px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 
 @media screen and (max-width: 600px) {
     .ckeckboxcontainer {
         display: inline-block;
         position: relative;
         padding-left: 35px;
         margin-bottom: 12px;
         cursor: pointer;
         font-size: 20px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
     }
     #checkbox {
         width: 96%;
         padding: 2%;
         float: left;
         padding-top: 6%;
     }
     #gallery {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         font-family: sans-serif;
         width: 96%;
         padding-top: 0%;
     }
     .grid-container {
         columns: 2;
         column-gap: 1.5rem;
         width: 90%;
         margin: 0 auto;
     }
 }