/* CSS Reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
p{
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/************* Shiran's Code ************/
body{
    background-color: hsl(233, 47%, 7%);
    font-family: 'Inter', sans-serif;
    color:hsl(0, 0%, 100%);
}

.cardimg{
    width: 51%;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px;
    background:hsl(277, 64%, 61%);
}

img{
    height:100%;
    width:100%; 
    opacity:0.8;  
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px;
    padding:0;
    mix-blend-mode: multiply;
    display:block;
}

.highlight{
    color:hsl(277, 64%, 61%);
}

.parentcontainer{
    display:flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    min-height: 100vh;
}
.panel{
    display:flex;
    flex-direction: row;
    max-width: 1120px;
    background-color:hsl(244, 38%, 16%);
}

.card{
    margin: 2%;   
    padding:4%;
    width:50%;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
    padding-bottom: 0;
}

.chead{
    font-weight: 700;
    font-size: 1.1em;
}

.ctext{
    font-weight:400;
    color:hsla(0, 0%, 100%, 0.6);
    font-size:1em;
}

.stats{
    text-align: left;
    padding-top:60px;
}

.statdata{
    font-weight: 700;
    font-size: 1.2rem;
    display:block;
}

.spstat{
    flex-direction: row;
    display:flex;
    justify-content: space-between;
}

.statheading{
    color:hsla(0, 0%, 100%, 0.6);
    font-family: Lexend Deca, sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

li{
    list-style: none;
    flex-direction: column;
}

ul{
    list-style:none;
    flex-direction: row;
}


ul:first-child{
    padding:0;
}


/* bottom credit line */
.attribution {
   font-size: 0.75rem;
    width: 100%;
    color: hsla(0, 0%, 100%, 0.75);
    text-align: center;
    /* position: absolute; */
    /* bottom: 179px; */
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

/* when in Mobile */
@media  screen and (max-width:901px) {
    .chead{
        font-size: 1em;
    }
    
    .ctext{
        font-size:0.9em;
    }    
    
    .statdata{
        font-size: 1.1rem;
    }
    
    .statheading{
        font-size: 0.7rem;
    }
}

/* 
    h1{
        font-size:1.5em;
    }

    p{
        font-size:1em;
    }
    .statdata{
        font-size:1.2rem;
    }
    .statheading{
        font-size:0.8rem;
    } */

@media  screen and (max-width:791px) {
    .chead{
        font-size: 0.8em;
    }
    
    .ctext{
        font-size:0.8em;
    }    
    
    .statdata{
        font-size: 1.1rem;
    }
    
    .statheading{
        font-size: 0.7rem;
    }
}

@media  screen and (max-width:701px) {
    .chead{
        font-size: 0.7em;
    }
    
    .ctext{
        font-size:0.7em;
    }    
    
    .statdata{
        font-size: 1rem;
    }
    
    .statheading{
        font-size: 0.6rem;
    }
}
@media  screen and (max-width:570px) {
    .chead{
        font-size: 0.7em;
    }
    
    .ctext{
        font-size:0.7em;
    }    
    
    .statdata{
        font-size: 0.9rem;
    }
    
    .statheading{
        font-size: 0.5rem;
    }
}

@media  screen and (max-width:415px) {
    .chead{
        font-size: 0.6em;
    }
    
    .ctext{
        font-size:0.7em;
    }    
    
    .statdata{
        font-size: 0.9rem;
    }
    
    .statheading{
        font-size: 0.4rem;
    }
}
@media  screen and (max-width:376px) {
    .panel{
        flex-direction: column-reverse;
        border-bottom-left-radius: 10px; 
        border-bottom-right-radius: 10px;
    }

    .parentcontainer{
        padding:20px;
    }
    
    .cardimg{
        width:100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius:0;
        border-top-left-radius: 10px;
    }
    
    img{
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius:0;
    }

    .card{
        width:100%;
    }
    h1{
        /* font-size:1em; */
        text-align: center;
    }

    .chead{
        font-size:0.8rem;
    }

    .ctext{
        font-weight:400;
        color:hsla(0, 0%, 100%, 0.6);
        font-size:1em;
        text-align: center;
    }
    
    .spstat{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .statdata{
        text-align: center;
        padding:10px;
        font-size:1.5rem;
    }

    .statheading{
        text-align: center;
        font-size: 1rem;
    }   
   
}