/* This will be the basic note for all (well, mostly) css techniques. Thanks, junah :) */
/* visit 'CSS Diner' to solve real-life questions */

* {
    box-sizing: border-box;
}

/* Selector (선택자) */
/* Tag Selector: Put the tag name from html to selector */
/* ID Selector: Put the id name from html to selector (Put '#' at front, Same ID cannot be duplicated) */
/* Class Selector: Put the class name from html to selector (Put '.' at front, Same class can be duplicated) */
/* Child Selector (자손 선택자): Only selects suitable target only from specific parent (See ex> 1) */
/* Multi Selector (다중 선택자): Only selects target that satisfies all conditions (See ex> 2) */
/* All Selector (전체 선택자): Select all html components. Use via '* { property: value; }' */
/* Group Selector (그룹 선택자): Select group of components. Use via '.class1, .class2 { property: value; }' */
/* Pseudo-class Selector (가상 클래스 선택자): Refer Ex> 3 */
/* Ex> :first(last, nth)-of-type || :active (button) || :focus (input box) || :visited (link) */
/* :before || :after */
/* A ~ B { property: value; }: Select 'B' among children that has same parent as 'A' */

/* Ex> 1 (Must have a space between the dots.) */
.box1 .t1 {
    color: green;
}

.box2 .t1 {
    color: yellow;
}

/* Ex> 2 (Must not have a space between tags.) */
.box1 .t1#wow {
    color: brown;
}

/* Ex> 3 */
.box3 p:first-child {
    background: red;
}
.box3 p:last-child {
    background: blue;
}
.box3 p:nth-child(2) {
    background: purple;
}
.box3 p:nth-child(2n) {
    background: purple;
}

/* Font Components */
/* color(yellow), font-size(28px), font-style(italic), text-decoration(underline), font-weight(500) */

/* Box Model: A box-shaped model that frames each html elements when composing them in web browser */
/* Note: All html elements are box-shaped! */
/* Margin - Border - Padding - Content */
/* background-color(gray), width height(400px), padding(30px) */
/* border(size, style, color (Ex> 2px solid red)), margin(30px) */
/* Box sizing: content-box(Based on content size (Default)), boarder-box(Based on content + boarder size) */

/* inline comp vs block comp */
/* block comp: automatically takes up full line, making new block comp will grant you '\n' */
/* Ex> div, p, ul, dl, p, h1-6, section, article, etc.. */
/* inline comp: does not take full line, making new inline comp will not grant you '\n' (Only allocate required tag size) */
/* Ex> a(anchor), span, img, strong, em, input, button, textarea, select, etc.. */
/* Although they are separated, we can use 'display: inline, block' to display like the other comp, and vice versa. */

/* Float vs Flex*/
/* Responsive Web (반응형 웹): A webpage that can flexibly suit into various devices (PC, mobile, tablets, etc) */
/* Why float is not used widely? -> Does not fit into responsive web */
/* clear, float: left | right | both | none (default) -> Or use '<div class="clearfix"><div> && .clearfix { clear: both; }' */

/* Flexible box: Box with flex comp */
/* display: flex */
/* flex-direction: row || column */
/* justify-content: flex-start(Default), flex-end, center, space-between, space-around, space-evenly */
/* align-items: stretch(Default), flex-start, flex-end, center */
/* Caution: align-item works primarily when flex-item is a single line */
/* For multiple lines, use other comp such as align-content */
/* Note that if flex-direction changes, the direction of center(axis)(중심(축)) also changes, 
    meaning that if will also affect justify-content and align-item */

/* Ex> 4 */
.container1 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: yellow;
    height: auto;

    padding: 2px;
    margin: 30px auto;
}

.menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: purple;
    color: gray;
    font-weight: bold;

    border-radius: 8px;
}

/* Ex> 5 */
.container2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 200px;
    background-color: red;
}

.box {
    display: flex;
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    color: white;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 10px;
}    

/* flex-wrap: determines whether to make a new line when flex-item is greater than the limit size. */
/* flex-wrap: nowrap (default, forces to squeeze the items) || wrap */
/* Caution: 'align-item' priorily applies when 'flex-item' is a single line */
/* When it is more than one line, add 'align-content' */
/* align-content: Determines align rule when 'flex-item' takes up multiple lines */
/* align-content: stretch (default) || flex-start || flex-end || center || space-between || space-around || space-evenly */
/* flex-flow: flex-direction + flex-wrap */
/* Ex> flex-direction: row; + flex-wrap: wrap; == flex-flow: column wrap */
/* flex-item: order (determines item order) || flex-basis (determines default font size of an item (ex> flex-shrink, flex-grow..)) */

/* Transform: translate(x, y) || scale(x, y) || skew(x-angle, y-angle) || rotate(angle)*/
/* Ex> transform: translateX(20px) || scaleY(1.1) || skewX(15deg) || rotate(45deg) */

/* Ex> 6-1 */
.moving {
    width: 600px;
    height: 120px;
    background-image: linear-gradient(to top, red, orange);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.moving span {
    font-size: 36px;
    color: white;
    font-weight: 600;

    transition: transform 0.4s ease-in-out;
}

.moving:hover span {
    transform: translateY(-18px);
}

.moving #text1 {
    transition: transform 0.4s ease-in-out;
}
.moving #text2 {
    transition: transform 0.4s ease-in-out 0.1s;
}
.moving #text3 {
    transition: transform 0.4s ease-in-out 0.15s;
}
.moving #text4 {
    transition: transform 0.4s ease-in-out 0.2s;
}
.moving #text5 {
    transition: transform 0.4s ease-in-out 0.25s;
}
.moving #text6 {
    transition: transform 0.4s ease-in-out 0.3s;
}
.moving #text7 {
    transition: transform 0.4s ease-in-out 0.35s;
}

/* Ex> 6-2 */
.tierWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.tier {
    width: calc(25% - 7px);
    aspect-ratio: 6 / 5;
    height: 320px;
    position: relative;
    
    overflow: hidden;
    border-radius: 14px;
}

.imgBox {
    width: 100%;
    height: 100%;
}

.imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.textBox {
    width: 100%;
    height: 100%;
    position: absolute;

    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 20px;
}

.textBox p {
    color: white;
    margin: 5px 0 0;
    z-index: 3;

    opacity: 0;
}

.textBoxName {
    font-size: 22px;
    font-weight: 500;
}

.textBoxDesc {
    font-size: 18px;
    font-weight: 380;
}

.tier:after {
    width: 100%;
    height: 100%;

    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.2);
    /* 4th number: opacity */

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
}

.tier:hover:after {
    opacity: 1;
}

.tier:hover .imgBox img {
    transform: scale(1.1);
    filter: blur(3px);
    /* Helps the image to blur (흐릿하게 하다) */
    opacity: 1;
}

.tier:hover .textBoxName {
    opacity: 1;
}

.tier:hover .textBoxDesc {
    opacity: 1;
}

.tier:after,
.tier .imgBox img,
.tier .textBoxName,
.tier .textBoxDesc {
    transition: all 0.4s ease-in-out;
}


/* Animation */
/* animation-name (what keyframe it will use) || -duration (ex> 2s) || -timing-function (ex> ease-in-out) || -delay (ex> 3s) 
    || -iteration-count (ex> infinite) || -direction (normal (default) || reverse || alternate (normal + iterate) || alternate-reverse (reverse + iterate)) */
/* You can also write in one long sentence in the above order */
/* Ex> animation: moveRight 0.4s linear 1s infinite alternate */

/* Ex> 7 */
.container4 {
    width: 100%;
    height: 104px;
    border: 2px solid red;

    position: relative;
}

.item {
    width: 100px;
    height: 100px;
    background: blue;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    animation-name: moveBox;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    position: absolute;
    z-index: 2;
}

.item span {
    color: white;
}

@keyframes moveBox {
    from {
        border-radius: 0;
        left: 0;
        background: red;
        transform: scale(1);
    }
    to {
        border-radius: 50%;
        left: calc(100% - 100px);
        background: green;
        transform: scale(0.6);
    }
}