@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');


* {color:#12173C;}

html{ font-family: "IBM Plex Sans", sans-serif; line-height: 1.25; margin: 0; padding: 0; background-color:#3c3382}
body{margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh;}
code {font-family: "IBM Plex Mono", monospace;}


header {font-family: "DynaPuff", sans-serif; text-underline-offset: 0.2rem; font-size: 125%; 
    background-color: #F2F2F2; padding: 0 0 0.5rem 0; margin: 0rem 0 1rem 0; 
}
header img {margin-top: 0.5rem; max-height: 150px; max-width: 250px;}

header h1{color: #3F5DCC}
header nav {margin: 0 5rem 0 5rem; padding-bottom: 0rem; 
    display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;}
header nav a {margin: 0 1rem 0 1rem;}
aside h1 {font-family: "DynaPuff", sans-serif; font-size: 125%; color: #3F5DCC}
aside h2 {font-family: "DynaPuff", sans-serif; font-size: 125%; color: #3F5DCC}

main{padding-bottom: 1rem; margin: 0 0 0rem 0 ; display: flex; flex-direction: row; gap: 1rem; justify-content: center; flex: 1;
background-image: url("../static/SiteLogoTransparent.png"); background-size: 220px;}
aside{background-color: #F2F2F2; border-radius: 10px; width: 20%; display: flex; flex-direction: column; align-items: center;}
aside details{align-self: flex-start; padding-left: 1rem;}
aside details a{padding-left: 2rem; margin: 0;}
aside details summary{cursor: pointer;}
aside ul {align-self: flex-start; padding-left: 2rem; margin-top: 0;}
aside h1 {padding-bottom: 0;}


button{cursor: pointer;}



/*main page css*/
main div{display: flex; flex-direction: column; width: 70%;}
main div nav{display: flex; flex-direction: row; justify-content: space-between; 
    background-color: #F2F2F2; border-radius: 0 0 10px 10px; line-height: 1.5; padding: 0 1rem 0 1rem; }
table{line-height: 1.5;  background-color: #F2F2F2; border-radius: 10px 10px 0 0; padding: 1rem 1rem 1rem 1rem;}
table tbody tr td h1{padding: 0;}
table tbody tr td nav {padding: 0; justify-content:left}
table img{max-height: 250px; max-width:250px;}
table tfoot td{display: table-footer-group;}
footer{background-color: #F2F2F2;  height: 15%; display: flex; flex-direction: row; justify-content:center}
footer p{margin:0.25rem 0 0.25rem 0}

/*extra search results css*/
main div h1{background-color: #F2F2F2; color: #3F5DCC; margin-bottom: 0; margin-top: 0; border-radius:  10px 10px 0 0; padding: 1rem 1rem 1rem 1rem;}

/*blog page css*/
article{width: 70%; background-color: #F2F2F2; border-radius: 10px;  padding: 0 1rem 0 1rem;
    display: flex; flex-direction: column;}
article footer {margin-top:2rem; display: flex; flex-direction: column; justify-content: end;}
article footer div.tags {display: flex; flex-direction: row; justify-content: start; margin-bottom: 1rem;}
article footer nav{display: flex; flex-direction: row; justify-content: space-between;}
article a{color:#3F5DCC}
article p{margin: 1rem 0 0 0;}
article h1{margin: 0rem 0 1rem 0;}
article h2{margin: 1rem 0 0 0;}
textarea{resize: vertical; width: 50%; min-height: 4rem;}
article button{margin-bottom: 1rem; }

/*make nav links not show underline unless hovering*/
header nav a{text-decoration: none; }
header nav a:hover {text-decoration: underline;}
td a{text-decoration: none; color: #3F5DCC; font-weight: bold;}
td a:hover{text-decoration: underline;}
article footer a{text-decoration: none; color: #3F5DCC; font-weight: bold;}
article footer a:hover{text-decoration: underline;}
main div nav a{text-decoration: none; color: #3F5DCC; font-weight: bold;}
main div nav a:hover{text-decoration: underline;}
aside details a{text-decoration: none; color: #3F5DCC; font-weight: bold;}
aside details a:hover{text-decoration: underline;}
aside ul a{text-decoration: none; color: #3F5DCC; font-weight: bold;}
aside ul a:hover{text-decoration: underline;}




@media (max-width: 1130px)
{
    aside{width: 30%;}
    main div{width: 60%;}
}

/*
@media(max-width:750px)
{
    aside{display: none;}
    header img {max-height: 100px;}
    main div{width:95%}
    main article{width:95%; margin-left: 1rem; font-size: 150%;}
    main article footer {font-size: 100%;}
    header img {margin-top: 0.5rem; max-height: 350px; max-width: 350px;}
    header{font-size: 200%;}
    header nav{flex-direction: column;}
    footer{font-size: 150%; padding: 0.5rem;}
    main{font-size:x-large;}
    main table td{padding-right: 1rem;}
    table{padding:0 0 0 1rem;}
}
*/
@media(max-width:750px)
{
    aside{display: none;}
    
    main div{width:95%}
    main article{width:95%; margin-left: 1rem; font-size: 100%;}
    main article footer {font-size: 100%;}
    header img {margin-top: 0.5rem; max-height: 200px; max-width: 200px;}
    header{font-size: 110%;}
    header nav{flex-direction: column; width: 100%; margin: 0;}
    footer{font-size: 100%; padding: 0.5rem;}
    main{font-size:medium;}
    main table td{padding-right: 1rem;}
    main div table img {max-width: 100px; }
    table{padding:0 0 0 1rem;}
    table td {vertical-align: top;}
}