/* style.css */

:root {
    --red: #F44336;
    --pink: #E91E63;
    --purple: #9C27B0;
    --deepPurple: #673AB7;
    --indigo: #3F51B5;
    --blue: #2196F3;
    --lightBlue: #03A9F4;
    --cyan: #00BCD4;
    --teal: #009688;
    --green: #4CAF50;
    --lightGreen: #8BC34A;
    --lime: #CDDC39;
    --yellow: #FFEB3B;
    --amber: #FFC107;
    --orange: #FF9800;
    --deepOrange: #FF5722;
    --dracGrey: #1d1e26;
    --dracLightGrey: #2a2c37;
    --dracGreen: #50fa7b;
    --dracLightGreen: #8aff80;
    --dracPurple: #9580ff;
    --dracDarkPurple: #24202e;
    --dracPink: #ff80bf;
    --dracYellow: #ffff80;
    --dracPeach: #ff9580;
    --dracCyan: #80ffea;
}

@keyframes colorFrames {
    0% { color: var(--deepOrange); }
    6% { color: var(--orange); }
    12% { color: var(--amber); }
    18% { color: var(--yellow); }
    24% { color: var(--lime); }
    30% { color: var(--lightGreen); }
    36% { color: var(--green); }
    42% { color: var(--teal); }
    48% { color: var(--cyan); }
    54% { color: var(--lightBlue); }
    60% { color: var(--blue); }
    66% { color: var(--indigo); }
    72% { color: var(--deepPurple); }
    78% { color: var(--purple); }
    84% { color: var(--pink); }
    100% { color: var(--pink); }
}

@keyframes box-shadowFrames {
    0% { box-shadow: 0px 0px 25px var(--deepOrange); }
    6% { box-shadow: 0px 0px 25px var(--orange); }
    12% { box-shadow: 0px 0px 25px var(--amber); }
    18% { box-shadow: 0px 0px 25px var(--yellow); }
    24% { box-shadow: 0px 0px 25px var(--lime); }
    30% { box-shadow: 0px 0px 25px var(--lightGreen); }
    36% { box-shadow: 0px 0px 25px var(--green); }
    42% { box-shadow: 0px 0px 25px var(--teal); }
    48% { box-shadow: 0px 0px 25px var(--cyan); }
    54% { box-shadow: 0px 0px 25px var(--lightBlue); }
    60% { box-shadow: 0px 0px 25px var(--blue); }
    66% { box-shadow: 0px 0px 25px var(--indigo); }
    72% { box-shadow: 0px 0px 25px var(--deepPurple); }
    78% { box-shadow: 0px 0px 25px var(--purple); }
    84% { box-shadow: 0px 0px 25px var(--pink); }
    100% { box-shadow: 0px 0px 25px var(--pink); }
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-text {
    color: var(--red);
    animation: colorFrames 20s ease infinite alternate;
}

.animated-box-shadow {
    animation: box-shadowFrames 20s ease infinite alternate;
}

.animated-bg {
    background-size: 300% 300%;
    background-image: linear-gradient(45deg, 
        var(--red), 
        var(--pink),
        var(--purple),
        var(--deepPurple),
        var(--indigo),
        var(--blue),
        var(--lightBlue),
        var(--cyan),
        var(--teal),
        var(--green),
        var(--lightGreen),
        var(--lime),
        var(--yellow),
        var(--amber),
        var(--orange),
        var(--deepOrange));
    animation: gradient 20s ease infinite alternate;
}

html {
    color: #f2f2f2;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0.5rem;
    text-align: center;
    background-color: var(--dracGrey);
    font-family: 'Courier New', Courier, monospace;
}

.wrapper {
    display: flex;
    flex-flow: row wrap;
}

.wrapper > * {
    flex: 1 100%;
    padding: 10px;
}

.header {
    --placeholder: 0;
    /* background: var(--dracPeach); */
}

.footer {
    --placeholder: 0;
    /* background: var(--dracLightGreen); */
}

.main {
    text-align: left;
    /* background: var(--dracPurple); */
}

.main h2, h3 {
    text-align: center;
}

.aside-1 {
    --placeholder: 0;
    /* background: var(--dracYellow); */
}

.aside-2 {
    --placeholder: 0;
    /* background: var(--dracPink); */
}

.brick {
    padding: 2rem 0;
    border-radius: 15px;
    box-shadow: 0px 0px 25px #444;
}

.brick h1 {
    margin: 0;
    line-height: 1;
    font-weight: 400;
    font-family: 'Bungee Shade', sans-serif;
}

.brick h2 {
    margin: 0;
    line-height: 2;
    font-weight: 400;
    font-family: 'Rock Salt', sans-serif;
}
.brick p {
    font-family: 'Courier New', Courier, monospace;
}

/* Flexbox Media Queries */
@media all and (min-width: 700px) {
    .aside { flex: 1 0 0; }
}

@media all and (min-width: 1025px) {
    .main    { flex: 3 0px; }
    .aside-1 { order: 1; } 
    .main    { order: 2; }
    .aside-2 { order: 3; }
    .footer  { order: 4; }
}

/* Font Size Media Queries */
@media only screen and (max-width: 480px) {
    .brick h1 {
        font-size: 1.5rem;
    }
    .brick h2 {
        font-size: 1.2rem;
    }
    .brick p {
        font-size: 1.5rem;
        margin: 0 0 1rem 0;
    }
}

@media only screen and (min-width: 481px) and (max-width: 700px) {
    .brick h1 {
        font-size: 2rem;
    }
    .brick h2 {
        font-size: 1.5rem;
    }
    .brick p {
        font-size: 2rem;
        margin: 0 0 1rem 0;
    }
}

@media only screen and (min-width: 701px) and (max-width: 1024px) {
    .brick h1 {
        font-size: 3rem;
    }
    .brick h2 {
        font-size: 2rem;
    }
    .brick p {
        font-size: 2.5rem;
        margin: 0 0 1.5rem 0;
    }
}

@media only screen and (min-width: 1025px) {
    .brick h1 {
        font-size: 4rem;
    }
    .brick h2 {
        font-size: 2.5rem;
    }
    .brick p {
        font-size: 3rem;
        margin: 0 0 2rem 0;
    }
}