@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,300;0,500;1,300&display=swap');

:root {
    --color-font: #333;
    --color-primary: #AD3DA4;
    --color-secondary: #ce8a02;
    --color-success: #3BA614;
    --color-info: #458E96;
    --color-danger: #E66A1E;
    --color-background: #FDFDFD;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    /* this an experimental line-height; if it breaks, add line-height: 1.5 to body */
}

html,
body {
    height: 100%;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

/* until you get a feel for overflow, I'll keep these next two commented out */
/* p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
} */

/* p {
  overflow-wrap: break-word;
  hyphens: auto;
} */

/* temp CSS for HTML only assignments */
picture img {
    width: 100%;
}

svg {
    width: 200px;
}

/* temp fix to size about img */
img[srcset] {
    width: 50%;
    height: auto;
    margin: 2rem auto;
}

/* temporary fix to size svg images */
img[src$="svg"] {
    width: 200px;
}

/************ add your CSS here *****************/

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: var(--color-font);
    padding: 0 7rem;
    max-width: 1080px;
    margin: 0 auto;
    float: none;
}

article {
    padding: 0 1rem;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
    margin: 1rem auto;
}

h1 {
    color: var(--color-primary);
    font-size: 7em;
    text-align: center;
    margin: 4rem auto;
}

h2 {
    color: var(--color-secondary);
    font-size: 3em;
}

h3,
h4,
h5 {
    color: var(--color-info);
}

h3 {
    font-size: 1.75rem;
}

a {
    color: var(--color-info);
    font-weight: 400;
    transition: 300ms ease-in-out;
    text-decoration: none;
}

a[href]:hover {
    color: var(--color-danger);
    cursor: pointer;
}

p {
    font-size: 1.1em;
    margin: 1rem auto;
    line-height: calc(1em + 0.5rem);
}

ul,
ol {
    margin: 1rem auto;
}

a.button {
    background-color: var(--color-info);
    color: var(--color-background);
    text-decoration: none;
    padding: 10px 50px;
    display: inline-block;
    text-align: center;
    border-radius: 8px;
    transition: 200ms;
    letter-spacing: .15px;
    max-width: 255px;
    width: 100%;
    border: 2px solid var(--color-info);
    text-transform: uppercase;
}

a.button:hover {
    background-color: var(--color-background);
    border: 2px solid var(--color-info);
    cursor: pointer;
    color: var(--color-danger);
}

aside {
    padding: 2rem;
    background-color: var(--color-secondary);
}


footer {
    padding: 2rem;
    background-color: var(--color-font);
    color: var(--color-background);
}

footer h2 {
    font-size: 2rem;
}

footer p {
    font-size: 1rem;
}

form {
    padding: 0 1rem;
    width: 38%;
}

form label {
    display: block;
    margin: 1rem 0;
}

form input {
    width: 100%;
}

form input[type=submit] {
    height: 2rem;
    width: 25%;
    min-width: 70px;
    text-align: center;
}

.editor {
    width: 100%;
}

.example {
    /* height: 300px; */
    /* max-height: 300px; */
    width: 100%;

}

.result {
    width: 100%;
    max-height: 300px;
    overflow: scroll;
    background-color: #f7f7f7;
    padding: 1rem;
    margin-top: 1rem;
}

.result:empty {
    display: none;
}

.subtitle {
    text-align: center;
    font-size: 1.5rem;
}

h1+.subtitle {
    margin-bottom: 4rem;
}


button {
    background-color: var(--color-info);
    color: var(--color-background);
    text-decoration: none;
    padding: 10px 50px;
    display: inline-block;
    text-align: center;
    border-radius: 8px;
    transition: 200ms;
    letter-spacing: .15px;
    max-width: 255px;
    width: 100%;
    border: 2px solid var(--color-info);
    text-transform: uppercase;
}

button:hover {
    background-color: var(--color-background);
    border: 2px solid var(--color-info);
    cursor: pointer;
    color: var(--color-danger);
}

.vstack {
    display: flex;
    flex-direction: column;
}

.hstack {
    display: flex;
}

.example>.hstack .material-icons {
    color: var(--color-primary);
    transition: 333ms;
}

.example>.hstack .material-icons:hover {
    cursor: pointer;
    color: #ef7fe5;
}

.on-clicked {
    filter: brightness(85%);
}

@media screen and (max-width: 600px) {

    body{
        padding: 0 1em;
    }

    h1 {
        color: var(--color-primary);
        font-size: 4em;
        text-align: center;
        margin: 1rem auto;
    }

    h2 {
        color: var(--color-secondary);
        font-size: 1.5em;
    }

    h3{
        font-size: 1.2em;
    }

    article.example{
        padding: 0;
    }

    p.subtitle{
        font-size: 1.3em;
    }

    
    
}