/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  
@import "constants.css";

* {
    padding: 0;
    border: none;
    margin: 0;
}

::selection {
    color: white;
    background-color: black;
}

body {
  background-color: white;
  color: black;
  font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "Chalkboard SE", sans-serif;
}

a {
    display: block;
    text-decoration: none;
    color: #FF0036;
    font-weight: bold;
}

.font-georgia {
    font-family: Georgia, "Times New Roman";
}

.font-impact {
    font-family: Impact, "Segoe UI";
}

.font-helve {
    font-family: Helvetica, Arial;
}

.font-comic {
    font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "Chalkboard SE", sans-serif;
}

button {
    background: linear-gradient(45deg, maroon, var(--signature-red));
    color: white;
    padding: 5px;
    border: outset 2px var(--signature-red);
    /*border-top-color: white;*/
    /*border-left-color: pink;*/
    cursor: pointer;
}

button:hover {
    filter: brightness(50%);
}

button:active {
    border-style: inset;
    /*border-top-color: initial;*/
    /*border-left-color: initial;*/
}

button

h1 {
    text-shadow: white 3px 3px;
}

#header-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.bold, .bolder {
    font-weight: bold;
}

.rounded {
    border-radius: 50%;
}

.hide {
    display: none;
}

.img-25 {
    width: 30%;
    min-width: 200px;
}

.text-center {
    text-align: center;
}

.body-firsthalf {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: solid 1px black;
    /*position: absolute;*/
}

@keyframes bg-move-generic {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 200px 200px;
    }
}

@keyframes bg-move-vacation {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 900px 636px;
    }
}

@keyframes bg-move-forgotcss {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 200px 0;
    }
}

.body-bg {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-repeat: repeat;
    animation: bg-move-generic 10s infinite linear;
    overflow: hidden;
    z-index: -1;
}

.theme-flowers {
    .body-bg {
        background-color: pink;
        background-image: url("images/BG-daisies.png");
        background-size: 200px 200px;
    }
}

.theme-space {
    .body-bg {
        background-color: navy;
        background-image: url("images/BG-outaspace.png");
        background-size: 200px 200px;
    }
    
    h1 {
        color: yellow;
        text-shadow: none;
        font-family: Consolas;
    }
    
    h3 {
        color: cyan;
        font-family: Times;
    }
    
    #header-title > img {
        color: white;
        mix-blend-mode: exclusion;
    }
}

.theme-vacation {
    .body-bg {
        background-color: navy;
        background-image: url("images/BG-vacation.png");
        background-size: 900px 636px;
        animation-name: bg-move-vacation;
        animation-duration: 40s;
    }
    
    h1, h3 {
        color: gold;
        text-shadow: #002091 3px 3px;
        font-family: Helvetica, Arial, sans-serif;
    }
    
    h3 {
        text-shadow: #002091 2px 2px;
    }
    
    #header-title > img {
        color: gold;
        mix-blend-mode: exclusion;
    }
}


.theme-forgotcss.body-firsthalf {
    display: block;
}

.theme-forgotcss {
    
    .img-25 {
        width: 100%;
    }
    
    .body-bg {
        background-color: white;
        /*background-image: url("images/BG-forgotcss.png");*/
        animation-name: bg-move-forgotcss;
        animation-timing-function: ease-in-out;
    }
    
    .body-bg::after {
        font-family: 'Times New Roman';
        content: "wait where'd the css go?";
        font-size: 10px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    h1, h3 {
        font-family: 'Times New Roman';
        color: black;
        text-align: left;
    }
    
    #theme-randomizer {
        color: blue;
        font-style: normal;
        transition: .05s;
    }
    
    #theme-randomizer:hover {
        text-shadow: none;
        font-size: 1em;
    }
    
    #theme-randomizer:active {
        color: red;
    }
    
    #header-text {
        padding: 8px;
    }
    
    #header-title {
        display: block;
        text-align: left;
    }
    
    #header-title > img {
        color: gold;
        mix-blend-mode: exclusion;
    }
}

@keyframes a-flower {
    0% {
        background-image: url("images/a_flower/000.png");
    }
    25% {
        background-image: url("images/a_flower/001.png");
    }
    50% {
        background-image: url("images/a_flower/002.png");
    }
    75% {
        background-image: url("images/a_flower/003.png");
    }
    100% {
        background-image: url("images/a_flower/004.png");
    }
}

.clickable {
    transition: .2s;
    cursor: pointer;
    user-select: none;
}

.clickable:hover {
    font-size: 30px;
    color: white;
    text-shadow: black 1px 1px;
}

.btn-img {
    position: absolute;
    width: inherit;
    /*z-index: -1;*/
}


.btn-img-container {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-img-container div {
    z-index: 1;
    pointer-events: none;
}


.body-secondhalf {
    display: flex;
    justify-content: space-between;
    padding: 8px;
}


@media only screen and (max-width: 768px) {
    .body-secondhalf {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .body-secondhalf a {
        display: flex;
        justify-content: center;
    }
    
    .btn-img-container {
        grid-column-end: span 1;
    }
    
    #header-title {
        display: block;
    }
}

@media only screen and (max-width: 324px) {
    .body-secondhalf {
        display: flex;
        flex-direction: column;
    }
}

/*@media only screen and (min-width: 1024px) {*/
/*    .col-l2 { grid-column-end: span 2; }*/
/*    .col-l3 { grid-column-end: span 3; }*/
/*    .col-l4 { grid-column-end: span 4; }*/
/*    .col-l6 { grid-column-end: span 6; }*/
/*    .col-l8 { grid-column-end: span 8; }*/
/*    .col-l9 { grid-column-end: span 9; }*/
/*    .col-l12 { grid-column-end: span 12; }*/
/*}*/