styles.css

/* You can target elements by name/type */
ul {
    background-color: plum;
}

ol {
    background-color: goldenrod;
}

table,
th,
td {
    border: 1px solid black;
    padding: 5px;
    border-collapse: collapse;
}

/* You can target elements by class as well by preceding the class name with . */
.text {
    background-color: violet;
    color: white;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.text h4 {
    color: greenyellow;
    font-style: italic;
}

.list-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* You can target elements by id by preceding the id name with # */
#greeting {
    color: darkblue;
}

#exampleFormBtn {
    background-color: #008cba;
    color: white;
    border-color: white;
    border-radius: 10px;
    transition-duration: 0.4s;
}

/*
    For buttons, you can style them differently based on if the mouse is hovering over them or not.
    This can be done using :hover after the button name.
*/
#exampleFormBtn:hover {
    background-color: white;
    color: #008cba;
    border-color: #008cba;
    border-radius: 10px;
}

/*
    Feel free to mess around with the padding, border and margin here
    to see how the content is affected. You may notice the content's
    box change size (padding), the border getting thinner/thicker (border),
    and the distance between the two content boxes change (margin).
*/
#the-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    border: 5px solid black;
    background-color: gray;
}

#content1 {
    background-color: lightcoral;
    padding: 10px;
    border: 10px dotted red;
    margin: 100px;
}

#content2 {
    background-color: lightgreen;
    padding: 5px;
    border: 5px dashed green;
    margin: 10px;
}

/* 
    Animations are one of the more advanced topics in CSS, but they can be simple
    enough to use for your ZotHacks project. The basic idea is that any element has an animation property
    where the animation can be applied to it. The property has 3 main subproperties we will focus on:
    name, duration, iteration. The name of the animation is defined by keyframes, which describes
    all the steps in the animation. Duration is how long each cycle of the animation lasts. Iteration
    is how long you want the animation to repeat.

    More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
*/

#petr {
    height: 10%;
    width: 10%;
    animation: spin 0.5s infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}