body {
    font-family:Arial, Helvetica, sans-serif;
    margin: 10px;

}

.nav {
    text-align: right;
}

.nav a {
    display: inline;
    margin: 10px;
    font-size: 80%;
    color:rgb(54, 54, 54);
}

.nav img {
    margin: 5px;
    vertical-align: middle;
}

#doodle {
    max-width: 60%;
    margin: 40px auto;
    display: block;
    border: 5px white solid;
    border-radius: 150px;
}

#doodle:hover {
    border-radius: 0px;
    filter:hue-rotate(360deg);
    transition: all 2s;
}

.search {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: space-between;
    max-width: 40%;
    margin: 0px auto;
    border: 1px solid white;
    border-radius: 30px;
    box-shadow: 0px 2px 8px rgb(168, 168, 168);
    padding: 5px;
    height: 35px;
}

.search input[type=search] {
    border: none;
    margin: 10px;
    font-size: 90%;
    max-width: 100%;
}

.search a {
    border: none;
    background-color: white;
    margin: 0px 5px;
}

.search img {
    max-width: 20px;
}

.ai-mode img {
    max-width: 18px;
}

.ai-mode {
    border: 2px solid white;
    border-radius: 15px;
    padding: 5px;
}

@keyframes aimode {
  0%   {border-color: red;}
  25%  {border-color: yellow;}
  50%  {border-color: green;}
  75%  {border-color: blue;}
  100% {border-color: red;}
}

.ai-mode:hover {
    border: 2px solid white;
    animation: aimode 4s linear infinite;
    border-radius: 15px;
    padding: 2px 5px;
}



/*Mobile responsive screen:*/

@media screen and (max-width:799px) {

    #doodle {
        max-width: 100%;
        margin: 40px auto;
        display: block;
        border: 5px white solid;
        border-radius: 100px;
    }

    #doodle:hover {
        border-radius: 0px;
        filter:hue-rotate(360deg);
        transition: all 2s;
    }

    .search {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: space-between;
        max-width: 80%;
        margin: 0px auto;
        border: 1px solid white;
        border-radius: 30px;
        box-shadow: 0px 2px 8px rgb(168, 168, 168);
        padding: 5px;
        height: 35px;
    }

}