/* Reset rule */
* {
    margin: 0; bottom: 0; padding: 0; box-sizing: border-box;
}

/* Could also use html as the selector instead of :root */
:root {
    font-size: 62.5%; /* Probably the most common root font size, to make following font sizes easier. */
}

body {
    font-size: 1.6rem;
    /* background-color: hsla(200, 80%, 40%, .7); Can also be written as seen in the following line: */
    background-color: hsla(200 80% 40% / .7);
    color: hsla(200 80% 10% / .9);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* ==== Consistent styles for all articles =============================================================== */
article {
    border: 4px solid hsla(200 100% 90% / .9);
    margin: 24px 8px;
    padding: 8px;
}

article h2 {
    text-align: center;
    color: hsla(10 100% 30% / 1);
    font-size: 2.5rem;
}

article section {
    border: 4px solid hsla(200 80% 10% / .9);
    margin: 24px;
    min-height: 200px;
}

article div {
    width: 180px; height: 180px;
    background-color: burlywood;
    border: 2px solid #222;
}


/* ==== Styles for individual articles =================================================================== */
#article1 section div {
    margin: 24px auto;
}





#article2 section {
    min-height: 232px;
    position: relative;
}

#article2 section div {
    position: absolute; 
}

#article2 section div:nth-of-type(1) {
    top: 24px; left: 24px;
}

#article2 section div:nth-of-type(2) {
    top: 24px; right: 24px;
}






#article3 section {
    overflow: hidden; /* Clearfix for floaters */
}

#article3 section div {
    margin: 24px;
}

#article3 section div:first-child {
    float: left;
}

#article3 section div:last-child {
    float: right;
}






/* Using flexbox */
#article4 section {
    display: flex; /* Makes this a flex parent. Automatically moves children divs side by side. */
    justify-content: center;
}

#article4 div {
    margin: 24px;
}








#article5 section {
    text-align: center;
    padding: 24px 0px;
}

#article5 div {
    display: inline-block;
}








#article6 section {
    display: flex;
    justify-content: space-evenly;
    padding: 24px 0px;
}

#article6 div:nth-of-type(3) {
    background-image: url(../images/elsa.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#article6 div:nth-child(3) h3 {
    background-color: orange;
    text-align: center;
    width: 120%;
    margin: 2px auto;
    transform: translateX(15%)
               translateY(10px)
               rotate(20deg);
}






/* === Several further experiments ======================================================================= */
/* Display: flex
   Transform: translate, rotate */
#article7 section {
    display: flex;
    justify-content: space-evenly;
}

#article7 div {
    margin: 8px;
}

.diamond {
    width: 80px; height: 80px;
    border: 2px solid red;
    transform: translateX(15%)
               translateY(50%)
               rotate(45deg);
}

#article8 section {
    text-align: center;
    padding: 24px 0;
}

/* Display: inline-block, position: absolute, relative, transform: scale, skew */
#article8 div {
    display: inline-block;
    margin: 24px;
    position: relative;
}

#article8 div>div {
    margin: 0px;
    width: 120px; height: 120px;
    background-image: url(../images/elsa2-resize.jpg);
    background-size: cover;
    background-position: center;
    transform: scale(125%);
    position: absolute; top: 28px; left: 28px;
}

#article8 section>div:nth-of-type(3) {
    transform: skewX(30deg);
}

/* Display: none */
#article9 section div {
    display: none;
}

/* Display: inline and block - just messing around */
#article10 section div {
    display: inline;
    text-align: center;
}

#article10 h3 {
    display: block;
    margin: 10px auto;
}

/* Sticky! This isn't quite working how I imagined it would. I'm going to keep tinkering to see if I can get a better grasp on it but for now, I'm going to leave this section as is. */
#article11 section {
    display: flex;
    justify-content: center;
    padding-bottom: 800px;
}

#article11 div {
    margin: 120px;
    /* position: sticky; */
    overflow: hidden;
}

#article11 div:nth-of-type(2) {
    background-color: hsla(0 90% 50% / 0.7);
    /* position: fixed;
    top: 200px; */
}

#article11 div:nth-of-type(2) h3 {
    background-color: lightgray;
    text-align: center;
    width: 150%;
    transform: rotate(-45deg)
               translateY(100%)
               translateX(-80px);
}

/* Dive flag */
#article11 div:nth-of-type(3) {
    background-color: hsla(0 70% 50% / 1);
}

#article11 div:nth-of-type(3) h3 {
    background-color: #eee;
    text-align: center;
    width: 150%;
    transform: rotate(45deg)
               translateX(25px)
               translateY(375%);
}