* {
    margin:0; padding: 0; border: 0;
    box-sizing: border-box;
}
/* default styles for the root/html */
:root {
    font-size: 62.5%; /*16px * .625 = 10px root font size */

    /* css variables for site colors */
    --color-bg1: #EEE5E9;
    --color-bg2: #EFC88B;
    --color-font1: #222222;
    --color-accent1: #CF5C36;
}

body {
    background-color: lightblue;
    color: var(--color-font1);
    font-size: 1.4rem;
    text-align: center;
}

h1 {
    font-size: 4em; text-align: center; margin: 24ps 0px 32px 0px;
    text-shadow: 2px 2px 4px #500;
   
}

h1 span{
    font-weight: normal;
}

.thumb_gallery span{
    display: inline-block;
    width: 250px; height: 300px; margin:20px; 
    border:2px solid rgb(131, 111, 71);
    border-radius: 250px;
    box-shadow: 4px 4px 3px hsla(40, 10%, 50%, .6);
    border-width: 0px 10px 16px 0px;
}

.span1 {
    background-image: url(/images/my_fire_bird.webp);
    background-position: 0px center;
    
}

.span2 {
    background-image: url(/images/my_flower_thmb.webp);
    background-position: center;
    background-size: cover;
    transform: translateX(0px) rotate(0deg);
    
}

.span3 {
    background-image: url(/images/my_guy1_thmb.webp);
    background-position: center;
    background-size: cover;
}

.span4 {
    background-image: url(/images/my_guy2_thmb.webp);
    background-position: center;
    background-size: cover;
}

.span5 {
    background-image: url(/images/my_skate_thmb.webp);
    background-position: center;
    background-size: cover;
}

.span6 {
    background-image: url(/images/my_star_thmb.jpg);
    background-position: center;
    background-size: cover;
}

.span7 {
    background-image: url(/images/my_sword1_thmb.jpg);
    background-position: center;
    background-size: cover;
}

.span8 {
    background-image: url(/images/my_sword2_thmb.webp);
    background-position: center;
    background-size: cover;
}


/* big pictures*/

.big-image{

}

.big-image > div {
    float: left;
}

.big-image > div:nth-child(1) {
    
    width: 20%;
    transform: rotate(-90deg);
    margin-top: 25%;
}

.big-image > div:nth-child(2) {
 
    width: 60%;
    
}

.big-image > div:nth-child(2) > img {
    width: 60%;
    border: 4px solid rgb(149, 149, 165);
    border-radius: 50px/20px;
   
    
   
}
.home {
    
    float: left;
    margin: 30px;
    position: absolute; top: 0px; left: 0px;
    
}


.big-image > div:nth-child(3) {
    
    width: 20%;
    transform: rotate(90deg);
    margin-top: 25%;
}