@media screen and (max-width: 500px) {
    .header{
        flex-direction: column;
        /* font-size: font-size: 30px;; */
        font-size: 30px;

    }
}
@font-face {
    font-family: cap;
    src: url(./Capture\ it.ttf);
}
.header{
    display: flex; justify-content: space-around;text-align: center;
    /* color: black; */
    font-family: cap;
}
div>a{
    text-decoration: none;
}
.i{
    color: red;
}
.i0{
    color: blueviolet;
}
.i1{
    color: blue;
}
.i2{
    color: yellowgreen;
}
.i3{
    color: orange;
}
.iii{
    margin-left: 75%;
    align-items: center;
    display: flex;
    position: absolute;
    z-index: 1;
    width: 120px;
    /* height: 100px; */
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    height: 100px !important;
    top: 0;
    display: flex;
    position: absolute;
    z-index: 1;
    flex-direction: column;
    flex-wrap: wrap;
    height: 75px !important;
    top: 0;
}
.iii>nav{
    width: 20px;
    height: 20px;
}
body{
    font-family: comic;
    transition-duration: 1s;
}