/* 
main
h1
ul
li *5
section
div *3
button */
* {
    margin: 0;
    box-sizing: border-box;
}
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
button{
    width: 100px;
    height: 50px;
}

/* del 1 */

/* legg til dekorativ linje før overskrift, endre farge og størrelse */
h1::before {
content: "~ ";
font-size: 50px;
color: green;
}

/* legg til stjerne etter hvert listepunkt, endre farge og størrelse */
li::after{
    content: " ★";
    font-size: 15px;
    color: rgb(246, 197, 2);
}

/* del2 2 */
/* endre bakgrunnsfargen på alle ulike listeelementer */
li:nth-child(odd){
    background-color: rgb(187, 141, 226);
}

/* legg til en overgangseffekt på knappen når brukeren holder musen over den */
button:hover{
background-color:rgb(88, 68, 68);
transform: scale(1.5);
transition: 2s ease;
}
/* gi det første og siste elementet i listen en annen tekstfarge  */
li:first-child{
    color:aliceblue;
}
li:last-child{
    color: rgb(235, 12, 12);
}

/* ekskludere et element fra styling. */
div:not(:first-child){
    background-color: grey;
    
}
/* En dekorativ ::before og ::after som lager en "boks" rundt teksten. */
div span::before{
    content: "[";
    font-size: 30px;
    color: blue;
}
div span::after{
    content: "]";
    font-size: 30px;
    color: blue;
}
/* gi en spesialeffekt på et tekstfelt når det er i fokus. */
input:focus{
    border: 10px solid red;
    transform: scale(2);
}
/* style én spesifikk underseksjon.  */
div:nth-of-type(2){
font-size: 50px;
}