/* Imports a font from a website */
@import 
url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/* Changes the font size */
@keyframes fontSizeChange {
    from {
        font-size: 10px;
    }
    to {
        font-size: 24px;
    }
}

/* Slides element right */
@keyframes slideRight {
    /* Can use percentages */
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    } 
}

/* Slides element up */
@keyframes slideUp {
    /* Can use pixels(px) too */
    from {
        transform: translateY(1000px);
    }
    to {
        transform: translateY(0px);
    } 
} 

/* Turns background black and makes elements in body futura font */
body {
    /* If futura font doesn't exist, use sans-serif font */
    background-color: black;
    color: white;
    font-size: 100%;
    font-family: "Merriweather", system-ui, sans-serif;
    margin: 0;
}

/* Adds border around image and centers it */
h1 {
    margin: 1em;
    padding: 0;
    text-align: center;
    position: relative;
    border: 1px solid blue;
    /* FIXME: Have image properly scale on mobile */
}

/* Center aligns element and uses fontChange animation */
.header {
    /* Can align using text-align */
    height: 40vh;
    padding-top: 30vh;
    background-color: purple;
    margin-top: 0;
    text-align: center;
    animation-name: fontSizeChange;
    animation-duration: 3s;
    text-shadow: .1em .1em .1em silver;
    /* 1st value offsets shadow right */
    /* 2nd value offsets shadow down */
    /* 3rd value adds blur to the shadow */
}

main {
    margin: 1em;
}

blockquote {
    outline: 4px dotted red;
}

/* Makes paragraphs have monospace font and have first line indents */
p {
    /* p.first takes priority so first paragraph is green */
    font-family: Arial;
    color: red;
    text-indent: 1em;
}

/* Make first paragraph green and uses slideRight animation */
p.first {
    /* Can change colors with names but also rgb, rgba, and hsl numbers */
    color: rgb(0, 255, 0);
    background-color: grey;
    animation-name: slideRight;
    animation-duration: 3s;
} 

/* Makes subsequent paragraph blue and uses slideUp animation */
.subsequent {
    /* Even stating just the class has more priority over p */
    color: blue;
    background-color: grey;
    animation-name: slideUp;
    animation-duration: 3s;
} 

ul {
    list-style-type: disc;
    /* FIXME: Pick image to show as bullet point */
    list-style-position: outside;
}

/* Centers figures with .photo class */
figure.photo {
    text-align: center;
    padding: 0;
    background-color: #111;
    position: relative;
    line-height: 1em;
}

.photo img {
    width: 100%;
}

/* Makes figure captions look like on image subtitles */
.photo figcaption {
    color: rgba(255, 255, 255, 0.8);
    /* Directions dictate how far it is from it */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Width statement removes whitespace on its sides */
    width: fit-content;
    background-color: rgba(150, 150, 150, 0.8);
    margin: 0 auto 0.5em auto;
    padding: 0.3em 0.5em;
}

/* Makes table element centered and have border */
table {
    text-align: center;
    margin: 5% auto;
    border: 5px solid gray;
}

/* Adds borders to elements within vertical tables */
/* tr>* makes sure it only applies only to elements within table rows */
table.vertical-table tr>* {
    border: 1px solid gray;
    padding: 1.5% 3%;
}
/* Can add vertical alignment in table elements using vertical-align */

/* Adds borders to elements within horizontal table */
table.horizontal-table tr>* {
    border: 1px solid gray;
    padding: 1.5% 3%;
}

table.horizontal-table thead th {
    color: pink;
}

table.horizontal-table tbody th {
    color: red pink;
}