@import url('utilities/borders.css');
@import url('utilities/effects.css');
* {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
body{
    text-overflow: hidden;
}
.page-wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 5%;
    height: 100vh;
}
main {       
    display: flex;
    flex-direction: column;   
    flex: 1;
}
main > h2 {
    display: inline-block;
    padding: 0 1%;
    margin: 0 2.5%;
}
.topics-container {    
    display: flex;
    flex-wrap: wrap;
    margin-top: 20%;
    gap: 3%;
    margin-left: 2.5%;
}

.topics-container > .topic{
    flex-basis: 20%;    
    height: 64px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    text-wrap: nowrap;
    margin-bottom: 2.5%;
    margin-bottom: 10%;
    padding:.5%;
    padding-top : 1%;
    padding-left: 1%;
    /* margin-bottom: 2.5%; */
}
.topics-container > .topic > h4 {
    font-size: 98%;
    margin-left: 2%;
    /* color: black; */
}
.topic > img {
    width:  100%;
    height: 100%;
    min-width: 80px; 
    max-width: 140px; 
    max-height: 100px; 
    min-height: 80px; 
    
}
a:focus,a:active{
    /* box-shadow: 0px 2px 5px 4px cyan; */
}
#toDoList{padding: 2% 15%;}
#toDoList>ul {font-size: .8rem;}
.hide {
    display: none !important;
}
.more-btn {
    border: 1px solid black;
    border-radius: 12px;
    background-color: darkgrey;
    color: yellow;
}
nav.styles-btns{
    display: flex;
    justify-content: flex-start;   
}
footer.footer-header {
    display: flex;
    justify-self: flex-end;
}


@media screen and (max-width:672px){
    .page-wrapper {
        justify-content: space-between;
        max-height: 90vh;
    }
    .page-wrapper main#mainContainer {
        padding-top: 20%;
    }
}