@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css');

html {
    padding-top: 25px;
    padding-bottom: 25px;
    background:
        linear-gradient(135deg, black 25%, transparent 25%) -50px 0,
        linear-gradient(225deg, black 25%, transparent 25%) -50px 0,
        linear-gradient(315deg, black 25%, transparent 25%),
        linear-gradient(45deg, black 25%, transparent 25%);
    background-size: 2em 2em;
    background-color: #232323;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #F6F6F6;
    border: solid 5px #0B00A4;
    width: 500px;
    margin: auto;
}

img {
    width: 100%;
    height: auto;
}

#banner {
    transition: height 2s;
}

#banner:hover {
    height: 150px;
}

svg {
    position: relative;
    animation-name: moving;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-direction: alternate-reverse;
    animation-timing-function: linear;
}

@keyframes moving {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 100px;
        top: 0px;
    }

    50% {
        left: 200px;
        top: 0px;
    }

    75% {
        left: 100px;
        top: 0px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

#animation {
    width: 500px;
    text-align: center;
    height: 4.5rem;
    border: 1px solid #000;
    overflow: hidden;
}

#animation p {
    font-size: 3rem;
    padding: 0 1rem;
    margin: 4.5rem 0;
    color: white;
    background-color: #F7544A;
}

#animation p:first-child {
    background-color: #1F64BF;
}

#animation p:second-child {
    background-color: #F20519;
}

#animation p:last-child {
    background-color: #F2E205;
}

div p:first-child {
    animation: roll 5s linear infinite;
}

@keyframes roll {
    0% {
        margin-top: 4.5rem;
    }

    5%,
    33% {
        margin-top: 0;
        /* MY visible */
    }

    38%,
    66% {
        margin-top: -9rem;
        /* COOL visible */
    }

    71%,
    99.99% {
        margin-top: -18rem;
        /* ANIMATION visible */
    }

    100% {
        margin-top: 4.5rem;
    }
}

footer {
    background-color: #0B00A4;
    color: white;
    padding: 10px;
}

footer a {
    color: white;
}

footer a:hover {
    color: greenyellow;
    text-decoration: none;
}

h4 a:hover {
    background-color: lightblue;
    text-decoration: none;
}

.navbar {
    display: flex;
    background-color: #333;
    max-width: 60%;
    height: auto;
    margin: auto;
    flex-direction: column;
}

.navbar a {
    color: white;
    padding: 20px;
    text-decoration: none;
    text-align: center;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

@media only screen and (min-width: 1200px) {
    body {
        width: 1000px;
    }

    #groupwebpages {
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar {
        background-color: #333;
        width: 250px;
        height: auto;
        margin: auto;
        flex-direction: column;
    }

    #animation {
        width: 1000px;
    }

}
