:root {
     --primary-color: #000000;
     --secondary-color: #777777;
     --bg-color: #ffffff;
}
 [data-theme="dark"]{
     --primary-color: #ffffff;
     --secondary-color: #a9a9a9;
     --bg-color: #000000;
}
 * {
     box-sizing: border-box;
}
 body {
     margin: 0;
     font-family: "Raleway", sans-serif;
     font-size: 14pt;
     line-height:145%;
     color: var(--primary-color);
     background-color: var(--bg-color);
}
 #container {
    width: 80%;
     margin: 0 auto;
}
 header {
     padding: 15px;
     margin-top:25px;
}
 .title {
     text-align:center;
     line-height: 110%;
     font-size: 41pt;
}
 footer {
     text-align:center;
     padding: 15px 0;
     font-size:85%;
}
 p {
     text-align:center;
     margin: 3px 0;
     padding: 3px 0;
}
 a {
     color: var(--primary-color);
     text-decoration: none;
     border-bottom: 1px dotted var(--primary-color);
}
 a:hover {
     color: var(--secondary-color);
}
 .socials {
     text-align:center;
}
 .fa-brands {
     font-size:45px;
     padding: 10px 5px;
     color: var(--primary-color);
}
 .fa-brands:hover {
     color: var(--secondary-color);
}
 .socials a {
     border-bottom: none;
}
 .image {
     border-radius: 0;
     cursor: pointer;
     transition: 0.3s;
}
 .image:hover {
     opacity: 0.8;
}


/* Flexbox, flexbox. you're my flexboxxxxxx */
 .row {
     display: flex;
     flex-wrap: wrap;
     padding: 0 4px;
}
 .column {
     flex: 25%;
     max-width: 25%;
     padding: 0 4px;
}
 .column img {
     margin-top: 8px;
     vertical-align: middle;
}


/* Modal components */
 .modal {
     display: none;
     position: fixed;
     z-index: 1;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.85);
}
 .modal-img {
     margin: auto;
     display: block;
     max-width: 1000px;
     max-height:85%;
}
 #caption {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 800px;
     text-align: center;
     color: #fff;
     padding: 10px 0;
     height: 150px;
}
 .modal-img, #caption {
     animation-name: zoom;
     animation-duration: 0.6s;
}
 @keyframes zoom {
     from {
        transform:scale(0.4)
    }
     to {
        transform:scale(1)
    }
}
 .close {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #fff;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
}
 .close:hover, .close:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
}


/* Dark mode toggler */
 .theme-switcher {
     display: flex;
     align-items: center;
     padding: 15px;
}
 .theme-switcher em {
     margin-left: 10px;
     font-size: 1rem;
}
 .theme-switch {
     display: inline-block;
     height: 26px;
     position: relative;
     width: 44px;
}
 .theme-switch input {
     display:none;
}
 .slider {
     background-color: #ccc;
     bottom: 0;
     cursor: pointer;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transition: .4s;
}
 .slider:before {
     background-color: #fff;
     bottom: 4px;
     content: "";
     height: 18px;
     left: 4px;
     position: absolute;
     transition: .4s;
     width: 18px;
}
 input:checked + .slider {
     background-color: #597bb4;
}
 input:checked + .slider:before {
     transform: translateX(18px);
}
 .slider.round {
     border-radius: 26px;
}
 .slider.round:before {
     border-radius: 50%;
}


/* Responsive components */
 @media screen and (max-width: 1600px) {
     #container {
         width:95%;
    }
}
 @media screen and (max-width: 850px) {
     .modal-img {
        max-width: 85%;
        height: auto;
        max-height: none;
    } 
}
 @media screen and (max-width: 700px) {
     .column {
         flex: 100%;
         max-width: 100%;
    }
}
 @media screen and (max-width: 700px){
     .modal-content {
         width: 100%;
    }
}