/*       _  _ 
        (_)(_)
         _  ___      _____ 
        | || \ \ /\ / / __|
        | || |\ V  V /\__ \
        | || | \_/\_/ |___/
       _/ |/ |
      |__/__/   Links: Homepage CSS
*/
body{font-family:"Segoe UI",sans-serif;min-height:100vh;}

header{
    background-color:#6234cc;/*399912*/
    color:#fff;
    padding:50px 0;
}

h1,.h1,h2,h3{font-weight:400}
h1,.h1{
    font-weight: 400;
    font-size:64px;
    margin:0;
}
h2{font-size:24px;}
.content{
    padding:20px 8px;
    width:60vw;
    margin:0 auto;
    margin-top:20px;
    padding-bottom:30px;
    font-size:18px;
}
.content .h1{font-size:36px;}
.content p{
    font-weight:400;
    margin:10px 2px;
    padding-top:5px;
    padding-bottom:16px;
}

.row{margin: 8px -16px;}
/* Add padding BETWEEN each column */
.row, .row > .column{padding: 8px;}
/* Create four equal columns that floats next to each other */
.column{float:left;width:25%;}
/* Clear floats after rows */ 
.row:after {
    content:"";
    display:table;
    clear:both;
}
.column a{
    display:block;
    background-color:#333;
    color:#fff;
    padding:10px;
    text-decoration: none;
}
.column a h3 {
    font-weight:600;
    text-align:center;
}
.users a img {width:100%}

/*Dark Mode Styling*/
body.dark-theme {
    background-color:#222;
    color: white;
}
body.dark-theme .column a {background-color:#6234cc;}
body.dark-theme footer {box-shadow:0px 0px 20px #00000090;}

.dark-toggle {
    background-color:#333;
    color:#fff;
    border: 5px solid #333;
    padding: 5px;
    width: 100px;
    /*desktop positioning is in the media query that floats images*/
    display:block;
    margin:0 auto;
    margin-bottom: -25px;

}
body.dark-theme .dark-toggle {
    background-color:#6234cc;
    color: white;
    border: 5px solid #333;
}
.dark-toggle:hover {cursor: pointer;}
.dark-toggle::after{content: "Dark Mode";}
body.dark-theme .dark-toggle::after {content: "Light Mode";}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {.column {width: 50%;}}
@media screen and (max-width: 950px) {.content {width: 80%;}}
@media screen and (max-width: 900px) {.users {width: 70%;margin: 0 auto;text-align: center;}}
@media screen and (max-width: 750px) {.users {width: 100%;}}


@media only screen and (min-width:1700px){
    header{padding:100px 0}
    .content{padding-right:200px;}
    /* Floating example image for large-format displays */
    .img-float{
        background-color:#333;
        display:block;
        position:absolute;
        right:32px;
        width:500px;
        min-height:450px;
        top:30px;
        border-radius:20px;
        box-shadow:0px 5px 20px #00000080;
    }
    .img-float img{
        border-radius:20px 0 0 0;
        width:500px;
        border:10px solid #333;
        border-bottom:none;
    }
    .img-float .caption{
        text-align:center;
        margin:8px 0;
        display:block;
        color:#fff;
    }
    /* .column a's rounded edges on large-screen layout */
    .left-border-radius{border-radius:10px 0 0 10px}
    .right-border-radius{border-radius:0 10px 10px 0}

    .dark-toggle {
        font-family:sans-serif;
        position: fixed;
        top: 20px;
        left: 20px;
    }
}