body {
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-family: "Source Code Pro", monospace;

    max-width: 100%;
    margin: auto;
    text-align: left;
    background-color: black;
}

main {
    background-color: white;
    margin: auto;
    /* min-height: 600px; */
}


header {
    /* padding-top: 10px;
    padding-right: 30px; */
    border-bottom: 100px;
    text-align: center;

    font-family: Helvetica, sans-serif;
    font-size: 120%;
    color: rgb(90, 110, 130);
}

p {
    /*font-family: "Source Code Pro", monospace; */
    font-family: 'Courier New', Courier, monospace;
    font-weight: 150;
    /* justify-content: center; */
}


div a {
    color: grey;
    text-align: center;
    text-decoration: none;
}


#top {
    background-color: black;
    color: aliceblue;

    max-width: 100%;
    display: block;

}

#top #topnav {
    background-color: black;
    display: flex;
    flex-direction: row;
    gap: 40px;   /* navigation items spacing */
    margin: auto 30px;
    /* justify-content: space-around; */

    position: sticky;
    top: 0;
}

#top #topnav a {
    padding-top: 10px;
    color: white;
    text-decoration: none;
}


#top #topnav a:hover {
    color: rgb(90, 110, 130);
 }


#home {
    margin-right: auto;    
}

#top header {
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 50px;
    text-align: left; 
    max-width: 600px; 

    color: white;

}




#prevnext {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
    padding-bottom: 40px;
}

#prevnext a {
    background-color: black;
    height: 25px;
    width: 120px;
    color: white;
    text-align: center;
    text-decoration: none;
}


#prevnext a:hover { 
    background-color: rgb(90, 110, 130);
}






/* css styles for project pages */

#projectpage {
    margin: auto 5%;
    display: block;
}

#projectpage header {
    color: rgb(145, 145, 145);
    font-family: 'Courier New', Courier, monospace;
}

/* #projectpage p {
    display: block;
    margin: auto;

    color: rgb(122, 122, 122);
    max-width: 1000px;

    padding-bottom: 2%;
} */






/*dropdown menu code */

.dropbtn {
    background-color: black;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    border: none;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    min-width: 100px;
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    position: relative;
    right: 30px;
    padding: 12px;
    text-decoration: none;
    display: block;

    background-color: black;
    outline: auto;
    outline-color: white;
  }

  .dropdown:hover .dropdown-content {display: block;}

  .dropdown-content a:hover {
    background-color: #ddddddba;
  }
  

/* end of dropdown menu content */





/* main content begins */


#gridcontainer {
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: 200px;
    align-content: center;
   
}

/* hover effect for all grid boxes */
#gridcontainer div:hover {
    background-color: rgb(255, 255, 255);
    background-image: linear-gradient(rgb(255, 255, 255)); 
    z-index: 1;
}

/* font styles for all boxes */
#gridcontainer div a {
    display: block;
    font-weight: bold;
    color: black;
    text-shadow: 20px;
    text-decoration: none;

    font-size: 20px;
    padding-top: 90px;
    padding-bottom: 90px;
    /* have the values above add up to 200px, i.e the grid box size */
    
}

#imagebox1 {
    background-color: rgb(71, 255, 255);
    /* background-image: url("data/koi.png"); */
    min-width: calc(100% / 2);
}
#imagebox2 {
    background-color: rgb(255, 178, 240);
    min-width: calc(100% / 2);
}
#imagebox3 {
    background-color: rgb(251, 251, 155);
    /* min-width: 200%; */
    min-width: calc(100% / 2);

}
 #imagebox4 {
    background-color: rgb(136, 246, 187);
    /* min-width: 200%; */
    min-width: calc(100% / 2);

} 




footer {
    text-align: center;
    background-color: black;
    padding-top: 5x;
    color: white;
    padding-bottom: 5px;
}








/* project teaser windows */

#teasercontainer {
    padding-top: 5%; 
    margin: auto 20%;
    align-content: center;
    background-color: white;
}


#teasercontainer article {
    display: block;
    text-align: left;
}

article {
    color: grey;
    margin: auto 5%;
    justify-content:center;
    align-items: center;
    /* background-color: aqua; */
    max-width: 800px;
}


article a {
    /* text-decoration: none;
    color: gray;
    outline: auto;
    outline-color: grey; */
}

article img:hover {
    opacity: 60%;
    outline: auto;
    outline-color: rgb(200, 200, 200);
}



/* subpage containers */


#ldacontainer {
    padding-top: 20px;
    margin: auto 10%;
    padding-bottom: 50px;

    align-content: center;
}

#ldacontainer image {
    min-width: calc(100%);

    box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -moz-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
}

#anicontainer {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    /* grid-auto-rows: 200px; */
    align-content: center;

    padding-top: 20px;
    gap: 20px;
    margin: auto 10%;
    padding-bottom: 20px;
}

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
  }

/* #anicontainer video {
    max-width: calc(100%);
} */ 

#illcontainer {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    /* grid-auto-rows: 200px; */
    align-content: center;

    padding-top: 20px;
    gap: 20px;
    margin: auto 5%;
    padding-bottom: 50px;

}

#illcontainer img {
    min-width: calc(100%);

    box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -moz-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
}

#comcontainer {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    /* grid-auto-rows: 200px; */
    align-content: center;

    padding-top: 20px;
    gap: 20px;
    margin: auto 5%;
    padding-bottom: 50px;

}

#comcontainer img {
    min-width: calc(100%);

    box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -moz-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
}


#typcontainer {

    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    align-content: center;

    padding-top: 20px;
    gap: 20px;
    margin: auto 10%;
    padding-bottom: 50px;

}

#typcontainer img {
    min-width: 100%;
    box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
    -moz-box-shadow: 1px 6px 22px -3px rgba(0,0,0,0.6);
}



img {
    display: block;
    max-width: 100%;
    margin:auto;
  }



  /* smallest screen size */

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

    /* displays as a single column of blocks */
    #gridcontainer {
        display: grid;
        grid-template-columns: auto;
        grid-auto-rows: 200px;
        align-content: center;
    }

    #gridcontainer div { 
        min-width: 100%;
        text-align: center;
        margin: auto;
    }

    #teasercontainer article {
        margin: 0 0 auto;
        padding-bottom: 10%;
    }


  }




/* medium screen size */

@media screen and (min-width:600px) and (max-width:1280px) {

    body {
        width: 100% ;
      }

    #teasercontainer {    
        /* margin: auto 50px; */
        
        display: grid;
        align-items: center;
    }

    #teasercontainer article {
        margin: 0 0 auto;
        padding-bottom: 10%;
    }


    /* displays as a 2x2 square of blocks */

    #gridcontainer {

        display: grid;
        grid-template-columns: auto auto;
        grid-auto-rows: 50vh;
        align-content: center;
    }

    #gridcontainer div { 
        min-width: calc(100%/3);
    }

    #gridcontainer div a {
        display: block;
         
        position: relative;
        top: 80px;
      
        font-size: 20px;
        padding-top: calc(100%-10px);
        padding-bottom: calc(100%-10px);
        /* height: 100vh; */
        /* have the values above add up to 50vh, i.e the grid box size */
        
    }

    #illcontainer {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto auto auto;
        /* grid-auto-rows: 200px; */
        align-content: center;
    
    }
    

}




/*largest screen size*/

@media screen and (min-width:1280px) {

    body {
        width: 100% ;
      }

        #teasercontainer {    
        margin: auto;
        
        display: flex;
        flex-wrap: wrap;
        min-height: 500px;

        justify-content: center;

        }

        .last-item {
            margin-left: auto;
          }

    
        #teasercontainer article {
            margin: auto;
            width: 600px;
            padding-bottom: 100px;
        }


    /* displays as a single row of 4 blocks */
    #gridcontainer {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-auto-rows: 60vh;
        align-content: center;
    }

    #gridcontainer div { 
        min-width: calc(100%/3);
    }

    #gridcontainer div a {
        display: block;
        color: black;
        text-decoration: none;
  
        position: relative;
        
        top: 100px;
        font-size: 20px;
        padding-top: calc(100%-20px);
        padding-bottom: calc(100%-20px);
        /* have the values above add up to 60vh, i.e the grid box clickable area size */
        
    }

    #illcontainer {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: auto auto auto auto;
        /* grid-auto-rows: 200px; */
        align-content: center;
    
    }
    
    #comcontainer {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto auto auto;
        /* grid-auto-rows: 200px; */
        align-content: center;
    
        padding-top: 20px;
        gap: 20px;
        margin: auto 5%;
        padding-bottom: 50px;
    }

    #typcontainer {
        display: grid;
        grid-template-columns: auto auto auto auto;
        /* grid-auto-rows: 200px; */
        align-content: center;
        margin: auto 5%;
    }
  
}