*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
:root{
    --border-color:rgb(201, 201, 201);
    --shadow:rgb(205, 205, 205);
}
body{
    margin:0;
    width:100%;
    box-sizing:border-box;
    display:none;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: space-between;
}
/* buttons in top navigation and sharing in article */
.heading{
font-size: 1.5em;
font-weight:100;
font-family: 'Times New Roman', Times, serif;
color:rgb(35, 34, 34);
border-radius:12px;
cursor:pointer;
padding:8px 16px;
text-decoration:0px white underline;
width:fit-content;
margin:5px;
border:0.5px solid transparent;
border:0.5px solid var(--border-color);
box-shadow:1px 1px 2px var(--shadow);
flex-shrink:1;
}
.heading:hover{
box-sizing:content-box;
background:rgb(244, 243, 243);
}
/* wrapper for the headings that is inside the header*/
.headwrapper{
    max-width:calc(100% - 230px);
    background:transparent;
    padding:10px;
    display: flex;
    justify-content: space-evenly;
    align-items:center;
    border-bottom: 1px solid lightgrey;
    border-left:1px solid lightgrey;
    border-bottom-left-radius:15px;
    border-right:1px solid lightgrey;
    border-bottom-right-radius:15px;
    flex-wrap:nowrap;
    overflow-y:auto;
    height:fit-content;
    flex-shrink:1.4;
}
.headwrapper::-webkit-scrollbar{
    display: none;
}
header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    background:transparent;
    z-index: 3;
    padding-left:10px;
    padding-right:30px;
}
.logo{
    max-width:150px;
    justify-self:flex-start;
    align-self:baseline;
    position:sticky;
    padding:10px;
    margin-top:5px;
    border-radius:6px;
    border: 1px solid rgba(62, 230, 24, 0.631);
    display: flex;
    width:fit-content;
    max-height:70px;
    min-height:70px;
    border-right: 2px dashed black;
    border-left: 2px dashed black;
    outline: 2px dashed black;
    border-top:2px solid black;
    border-bottom:2px solid black;
    background:radial-gradient(transparent 86%, black 87%, transparent 89%);
    box-shadow:0px 3px 3px 0px grey;
    flex-grow:0;
    user-select:none;
}
.logo *{
    margin:1px;
    height:fit-content;
}
main{
    display: flex;
    justify-content: center;
    grid-template-columns: 1fr 5fr;
    width: 100%;
    height:78%;
    z-index: 2;
    
}
.article-list{
    width:calc(100% - 145px);
    padding:30px;
    display: flex;
    justify-content: space-evenly;
    align-content:stretch;
    flex-wrap:wrap;
    overflow-y:auto;
    opacity:0;
    transition:1.5s opacity ease;
}
.article-list::-webkit-scrollbar{
    content:"";
    display:block;
    background: transparent;
    width:10px;
}
.article-list::-webkit-scrollbar-button{
    content:"";
    display:block;
    width:4px;
    height:4px;
    background:black;
    border-radius:2px;
}
.article-list::-webkit-scrollbar-thumb{
    content:"";
    display:block;
    width:4px;
    background:black;
    border-radius:5px;
}

.mini-article-link{
align-items:center;
border:1px solid var(--border-color);
border-radius:15px;
padding:15px;
height:fit-content;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor:pointer;
text-decoration: none;
font-size:15px;
margin:20px;
padding-top:15px;
padding-left:15px;
padding-right:15px;
}
.mini-article-link img{
   background-repeat:no-repeat;
    border-radius:10px;
    margin-top:10px;
    margin-bottom:10px;
}
.mini-article-link div.mini-title{
   color:black;
    text-decoration: none;
    font-family: 'Times New Roman', Times, serif;
    font-size:20px;
    margin:1px;
    margin-top:5px;
    padding:6px;
    border-top:1px solid lightgrey;
    overflow:show;
    text-align:center; 
}
.mini-article-link:hover div.mini-title{
text-decoration: 0.8px underline;
}
.adspace{
    width:140px;
    border:1px solid black;
    margin-top:20px;
    margin-left:5px;
    margin-bottom:10px;
    justify-self: baseline;
    background:linear-gradient(45deg, transparent 50%, black 51%, transparent 52%), linear-gradient(-45deg, transparent 50%, black 51%, transparent 52%);
}
.article{
    width:calc(100% - 145px);
    overflow:auto;
    padding:10px 20px;
    padding-bottom:80px;
    font-family: 'Times New Roman', Times, serif;
    font-weight:light;
    display: flex;
    flex-direction: column; 
}
.article::-webkit-scrollbar{
    content:"";
    display:block;
    background: transparent;
    width:10px;
}
.article::-webkit-scrollbar-button{
    content:"";
    display:block;
    width:4px;
    height:4px;
    background:black;
    border-radius:2px;
}
.article::-webkit-scrollbar-thumb{
    content:"";
    display:block;
    width:4px;
    background:black;
    border-radius:5px;
}
.article-image-container img{
    align-self: center;
    margin-top:20px;
    margin-bottom:20px;
    border-radius: 20px;
    max-width:500px;
    height:auto;
}
.article-image-container{
    display: flex;
    justify-content: baseline;
    flex-direction: column-reverse;
    align-items:baseline;
    margin-bottom:40px;
}
.article-title{
    font-size:40px;
    font-weight: 500;
    margin:auto;
    margin-top:30px;
    text-align: center;
}
.article-body{
    font-size:25px;
    font-weight:300;
    text-indent:2em;
    margin-left:4vw;
    margin-right:4vw;
    margin-bottom:20px;
    margin-top:20px;
    line-height: 1.4em;
}
.shared-notes{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}
.shared-notes *{
    flex-shrink: 0;
    font-family: Arial, sans-serif;
color:rgb(35, 34, 34);
border-radius:12px;
cursor:pointer;
text-decoration:0px white underline;
width:fit-content;
margin:5px;
border:0.5px solid var(--border-color);
box-shadow:1px 1px 2px var(--shadow);
    text-decoration: none;
    font-size:20px;
    padding:8px 16px;
}
.editor-notes:hover, .share:hover, .editor-notes:hover{
    background:rgb(235, 235, 235);
}
.share:active, .heading:active, .editor-notes:active{
    border:1px solid black;
}
.horizontal-adspace{
    padding:50px;
     border:1px solid black; 
     margin-bottom:40px;
     margin-top:20px;
     margin-left:auto;
     margin-right:auto;
     width:80%; 
     background:linear-gradient(45deg, transparent 50%, black 51%, transparent 52%), linear-gradient(-45deg, transparent 50%, black 51%, transparent 52%);

}

.search-container{
    width:50px;
    height:50px;
    position:sticky;
    flex-shrink:0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search{
    border-bottom:1px solid lightgrey;
    border-radius:40px;
    border:3px solid black;
    width:28px; 
    height:28px;
    min-width:28px;
    min-height:28px;
    transform: rotate(-45deg);
    cursor:pointer;
    transition: 0.35s transform ease;
}
.search::before{
    content:"";
    display:block;
    z-index: 2;
    margin:auto;
    margin-top:23px;
    height: 16px;
    width:3px;
    background-color: black;
    border-radius:2px;
}
.search:hover{
    transform:rotate(315deg);
}
.search:active::before{
    background-color: grey;
}
.search:active{
    border-color:grey;
}
#search_center{
    align-self:baseline;
    padding:15px;
    margin:10px;
    width:calc(100% - 30vw);
    max-height:70%;
}
#search_input{
border:1px solid grey;
padding:5px 10px;
font-size:18px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border-radius:5px;
align-self:center;
margin-bottom:6px;
width:90%;
height:90%;

}
#search_input:focus{
    border:1px solid grey;
    outline:none;
}
.search-result-content{
    margin-top:20px;
    padding:10px;
    padding-bottom:40px;
    border-bottom:1px solid grey;
    font:calibri;
    display: block;
    max-height:150px;
    height:150px;
    overflow-y:auto;
    pointer-events:none;

}
.search-result-content::-webkit-scrollbar{
    display: none;
}
.search-result{
    margin-top:20px;
    font-size:20px;
    font-family: Calibri, sans-serif;
    font-weight:400;
    text-decoration: none;
    color:black;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.search-link{
    font-size:22px;
    font-weight:bold;
    margin-top:15px;
    text-decoration: none;
    color:blue;
    font-family:"Comic Sans"
}
#search_results{
max-height:90%;
overflow-y: auto;
display: flex;
flex-direction: column-reverse;
}

/* coverup is used for a screen that will cover and blur out all contents except for cover-center*/
.coverup{
position:fixed;
z-index:5;
background:rgba(122, 122, 122, 0.326);
height:100vh;
width:100vw;
display: none;
justify-content: center;
align-items: center;
}
.coverup-center{
    display:flex;
    flex-direction: column;
    font-family: 'Segoe UI', Calibri, Tahoma, Geneva, Verdana, sans-serif;
    font-size:14px;
    border:1px 1px 1px solid lightgrey;
    border-radius:10px;
    padding:15px;
    background:white;
    min-width:40%;
    max-width:60%;
    transition: 0.5s all ease;
}
footer{
    background:rgba(167, 167, 167, 0.228);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-top:1px solid rgb(118, 118, 118);
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    margin:auto;
    height:fit-content;
    width:99.99%;
    height:10%;
    align-self:flex-end;
}
footer a{
    color:black;
    cursor:pointer;
    font-size:18px;
    font-family: Verdana, Geneva, Calibri, sans-serif;
    text-decoration: none;
}
footer a:hover{
    color:white;
    
}
#big{
display: flex;
flex-wrap:wrap;
border-top:1px solid lightgrey;
padding-top:20px;
max-width: 100%;
}
#next{
width:100%;
display:flex;
justify-content: space-evenly;
flex-direction: row-reverse;
}
#next a{
    transform:scale(0.9);
}
.mini-link-container{
    display: flex;
    width:100%;
    justify-content: space-evenly;
}
@media only screen and (max-width:516px){
    main{
        height:75%;
    }
}
@media only screen and (max-width:716px) {
    .share, .heading, .editor-notes, #esharer, #xsharer, .shared-notes *{
        margin:4px;
        font-size:17px;
        padding:6px 12px;
    }

.mini-article-link div.mini-title{font-size:14px;}
    .heading{
font-size: 1.3em;
padding:6px 12px;
width:fit-content;
margin:4px;
    }
    header{
        padding-right: 10px;
    }
    .search-result{
        font-size:15px;
    }

.mini-article-link{
margin:5px;
padding-top:3px;
padding-left:3px;
padding-right:3px;
width:44%;
}

.mini-article-link div{
font-size:12px;
}
    .headwrapper{
    max-width:calc(100% - 50px);
    flex-wrap: wrap;
    justify-content: flex-start;
    }
.article-image-container img{
    max-width:350px;
}
.article-body{
    margin:5px;
    padding:4px;
    font-size:18px;
}
.article{
    padding:0px 3px 0px 3px;
    margin:0px;
    width:100%;
}
.logo{
    display: none;
}
.adspace{
    display: none;
}
.article-link div{
    font-size:20px;
    margin:0px;
}
.article-list{
    padding:10px;
    width:100%;
    height:100%;
}
.article-list *{
    margin:5px;
}
.article-title{
    margin:5px;
    font-size:30px;
}
.share{
max-height: fit-content;
margin-right:20px;
}
.shared-notes{
    flex-wrap:wrap;
    justify-content: space-between;
}
.coverup-center{
    max-width:90%;
}
footer a{
    font-size:12px;
}
main{
    display: flex;
}
}
.ads{
    padding:50px;
    border:1px solid black;
    margin:20px auto; 
    width:80%; 
    background:linear-gradient(45deg, transparent 50%, black 51%, transparent 52%),
    linear-gradient(-45deg, transparent 50%, black 51%, transparent 52%);
}
.ads::after{
    content:"Ads coming soon";
}
.categories a{
    margin:3px;
    text-decoration:none;
    font-family: sans-serif;
    color:rgb(0, 149, 241);
}
.categories a::before{
    content:"#";
    color:rgb(0, 149, 241);
}
.date{
    border: 0px solid grey;
    box-shadow:0px 0px 0px transparent;
}
.mini-date{
    font-family:Comic, Arial, sans-serif;
    font-size:12px;
    font-weight:500;
    margin:3px;
    justify-self: baseline;
    align-self:baseline;
    color:black;

}