body{
    background-color: #d4f1b6;
    
    --highlight-color: #61ff97;
    --border-color: #10472B; 
    --text-color-light: #e3faaa;     
    --text-color-dark: #00391e; 
    --focus: rgb(136, 0, 255);
    --infobox-dark: #003D12;
    --infobox-light: #CBFFBD;
    
    --header-font: 'Bitcount', Arial, Helvetica, sans-serif;

    display:flex;
    justify-content: flex-end;
    font-family: 'Handjet', Arial, Helvetica, sans-serif;
    color: var(--text-color-dark);
    min-height: 100vh;
    margin: 0;
}

*:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/*viewport and header contained in main*/
main{
    display:flex;
    flex-direction: column;
    flex:1;
    margin: 0px 10px 0px 10px;

}

header{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

h1{
    color: var(--highlight-color);
    font-family: var(--header-font);
    margin: 0;
    font-weight: bolder;
    font-size: 3.5rem;
    padding: 0.5rem;

    text-shadow: 
        -2px -2px 0 var(--border-color),
        2px -2px 0 var(--border-color),
        -2px  2px 0 var(--border-color),
        2px  2px 0 var(--border-color);
}

.toggle{
    display:flex;
    align-items: center;
    gap: 0.5em;
}

.toggle button{
    padding: 1em;
    border: 2px solid var(--border-color);
    border-radius: 0.5em;
    font-size: large;
}

.toggle #day{
    background-color: rgb(161, 235, 255);
    color: var(--text-color-dark);
    /* font-family: inherit; */
    font-family: var(--header-font);
}

.toggle #night{
    background-color: rgb(0, 80, 74);
    color: var(--text-color-light);
    /* font-family: inherit; */
  font-family: var(--header-font);
}

.viewport{
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    min-height: 80%;
    position: relative;
    overflow: hidden;

    background-image: linear-gradient(rgba(78, 255, 196, 0.3), rgba(78, 255, 196, 0.3)), 
            url("images/sky-day.png");
    background-size: cover;
}

.viewport img{
    width: 10rem;
    position: absolute;
}

/* Bug positions in viewport */
#wasp{
    top: 20%;
    left: 70%;
}

#moth{
    top: 30%;
    left: 20%;
}

#ant{
    top: 70%;
    left: 40%;
}

#cricket{
    top: 65%;
    left: 60%;
}

#katydid{
    top: 75%;
    left: 15%;
}

#yen{
    top: 55%;
    left: 75%;
}

.viewport-day-sky{
    background-image: url("images/sky-day.png");
    /*background-image: linear-gradient(rgba(208, 255, 239, 0.3), rgba(208, 255, 239, 0.3)), */
    /*        url("images/sky-day.png");*/
}

.viewport-night-sky{
    background-image: url("images/sky-night.png");
    /*background-image: linear-gradient(rgba(208, 255, 239, 0.3), rgba(208, 255, 239, 0.3)), */
    /*        url("images/sky-night.png");*/
}

.viewport-day-ground{
    background-image: url("images/ground-day.png");
    /*background-image: linear-gradient(rgba(208, 255, 239, 0.3), rgba(208, 255, 239, 0.3)), */
    /*        url("images/ground-day.png");*/
}

.viewport-night-ground{
  background-image: url("images/ground-night.png");
    /*background-image: linear-gradient(rgba(208, 255, 239, 0.3), rgba(208, 255, 239, 0.3)), */
    /*        url("images/ground-night.png");*/
}

#wasp{
  width: 15rem;
  height: 15rem;
  object-fit: contain;
  transform: translate(50px 100px);
}

menu{
    display:flex;
    flex-direction: column;
    width: 30vw;
    max-width: 300px;
    background-color: var(--highlight-color);
    margin: 0;
    border: 2px solid var(--border-color);
    padding: 1rem;
}

h2{
    font-family: 'Bitcount', sans-serif;
    font-size: 1.8em;
    padding: 0;
    margin: 0.1em 0 0.1em 0;
}

#bug-name{
    font-size: clamp(1em, 1.8em, 1.8em);
}

#bug-info{
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    font-weight: 600;
    font-size: 1.1em;

    background-color: var(--infobox-dark);
    color: var(--infobox-light);
    
    overflow-y: auto;
    height: 11rem;
    border: 2px solid var(--border-color);
    padding: 0.5em 0.7em 0.5em 0.7em;
    flex-shrink: 0;
    margin-top: 0.5em;

    scrollbar-color: var(--infobox-dark) var(--infobox-light);
    scroll-behavior: smooth;
}

#bug-info a{
    color: #6BFF42;
}

#bug-info a:hover{
    color: #31E000;
}

#bug-icons{
    display:flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 1;
    list-style-type: none;
    padding: 0;
    margin-top: 1em;
}

.bug-icon{
    width: 100%;
    max-width: 3rem;
    height: auto;
    border: 2px solid var(--border-color);
    background-color: var(--infobox-light);
    border-radius: 0.2rem;
}