@import url("https://fonts.googleapis.com/css?family=Titillium+Web:100,200,300,375,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=VT323:100,200,300,375,400,500,600,700,800,900");
body {
font-family:'Titillium Web', sans-serif;
}


#navigation_box{
height:40px;
position:fixed;
top:0;
border-style:none;
padding:0;
transition:0.25s;
color:rgba(0,0,0,0);
}
#left_navigation_box{
color: rgba(0,0,0,0);
padding:0;
}
#right_navigation_box{
color: rgba(0,0,0,0);
}
#navigation_box a{
font-size:18px;
padding:10px;
padding-top:13px;
padding-bottom:13px;
transition:0.25s;
font-family:'Titillium Web', sans-serif;
font-weight:100;
}
#navigation_box a:nth-child(2){
border-left-style:solid;
border-right-style:solid;
border-width:1px;
border-color:#f2f2f2;
}
#navigation_box a:nth-last-child(2){
border-right-style:solid;
border-width:1px;
border-color:#f2f2f2;
}
#right_navigation_box a:nth-child(3){
border-right-style:solid;
border-right-width:1px;
border-color:#f2f2f2;
}
#left_navigation_box a{
margin-left:-9px;
margin-right:-9px;
}
#right_navigation_box a{
margin-left:-7px;
margin-right:-7px;
}
#left_navigation_box{
margin-left:9px;
}
#right_navigation_box {
  margin-left:7px;
}
#navigation_box a:hover{
background-color:#f2f2f2;
color:#20458c;
}

#header{
margin-top:34px;
}
#wrapper{
border-style:none;
width:100%;
background: #f9f9f9 !important;
padding:0;
}
#content{
max-width:1100px;
background: #f9f9f9 !important;
margin:auto;
}
#header{
border-style:none;
height: calc( 50vh - 34px);
margin-top: 34px;
background: black url("https://cdn.artofproblemsolving.com/images/1/5/2/1526cab286b14e1b92ce583f7d82cc322ad746a2.gif") no-repeat fixed top / 40%;

}
#header h1{
font-size: 150px;
height: 150px;
text-decoration: none;
cursor: default;
font-family: VT323;
font-weight: 25;
padding:0;
margin-top: calc(30vh - 82px);
color: white;
word-wrap: break-word;
}


#feed-wrapper{
display:none;
}
#main{
width:calc(100% - 270px);
}

#post-new-entry-p img{
display:none;
}
#post-new-entry-p{
text-align:center;
margin-bottom:0;
}
.entry{
margin-top:15px !important;
padding-bottom:10px !important;
border-style:none !important
}
.entry h1 a{
font-size:40px;
font-weight:200;
line-height:40px;
}
.entry h2{
color:black;
font-weight:375;
padding-left: 4px;
}
.entry h2 img{
display:none;
}
.entry h2 strong a{
color:black !important;
font-weight:375 !important;
}
.entrywrap{
margin-left:2px !important;
}
.message{
margin-left:4px;
border-style:none !important;
border-left-style:solid !important;
margin-left:4px !important;
background-color:#eaf0fa !important;
border-left-width:5px !important;
border-left-color:#20458c!important; 
margin:0 !important;
padding:7px !important;
color:black;
}
.entrywrap .actions{
padding-left:0;
}
.entrywrap{
background-color:transparent !important;
padding:0!important;
border-style:none !important;
}
.entrywrap .cmty-post-edit-info{
display:none !important;
}

.aops-scroll-outer.aops-scrollbar-not-visible.blog-scroll-outer{
padding:0;
}
.aops-scroll-content{
margin-right:0 !important;
width:100% !important;
}
.aops-scroll-outer.aops-scrollbar-not-visible.blog-scroll-outer .aops-scroll-bar{
display:none !important;
}
.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible .aops-scroll-bar{
display:none !important;
}
.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible{
padding:0;
}
.aops-scroll-content li{
padding:6px !important;
}
.aops-scroll-inner{
width:240px !important;
}
.blog-shout-wrapper{
border-width:1px !important;
}
.blog-tag-wrapper{
border-width:1px !important;
}
#message-box{
width:242px !important;
background-color:transparent !important;
border-width:1px;
border-color:black;
box-sizing: none !important;
}
#message{
width:242px !important;
margin-right:0;
border-width:1px;
border-color:black !important;
background-color:transparent;
}
#shouts-widget .widget-content{
width:240px !important;
}
.blog-shout-wrapper{
width:240px !important;
border-color:#7a7a7a !important;
}
#tags-widget .widget-content{
width:240px !important;
}
.blog-tag-wrapper{
width:240px !important;
border-color:#7a7a7a !important;
}
.cmty-subject-input{
font-family:'Titillium Web', sans-serif;
font-size:15px;
padding-left:3px !important;
}
.cmty-post-textarea{
padding:3px;
font-family:'Titillium Web', sans-serif;
font-size:15px;
}
.cmty-posting-button-row{
background-color:white;
border-color:white;
}
.cmty-bbcode-other.clickable.cmty-bbcode-btn{
color:black;
}
.aops-modal-frame.cmty-posting-modal.ui-draggable{
border-color:white;
}
#side{
float:left;
}
#main{
float:right;
}
#archive-widget{
margin-top:5px;
padding-bottom:10px !important;
margin-bottom:20px !important;
border-bottom-style:dashed;
border-bottom-color: #7a7a7a;
border-bottom-width: 1px;
}
#archive-widget img{
display:none;
}
#archive-widget .widget-header .widget-title{
font-weight:50;
font-size:30px;
margin-bottom:5px;
color:black !important;
}
#shouts-widget .widget-header .widget-title{
font-weight:50;
font-size:30px;
margin-bottom:10px;
color:black !important;
}
#shouts-widget{
margin-top:5px;
padding-bottom:30px !important;
margin-bottom:20px !important;
border-bottom-style:dashed;
border-bottom-color: #7a7a7a;
border-bottom-width: 1px;
}
.blog-num-shouts{
display:none!important;
}
#tags-widget{
margin-top:5px;
padding-bottom:10px !important;
margin-bottom:20px !important;
border-bottom-style:dashed;
border-bottom-color: #7a7a7a;
border-bottom-width: 1px;
}
#tags-widget .widget-header .widget-title{
font-weight:50;
font-size:30px;
margin-bottom:5px;
color:black !important;
}
#tags-widget .widget-header .widget-title{
font-weight:50;
font-size:30px;
margin-bottom:5px;
color:black !important;
}
#stats-widget{
margin-top:5px;
padding-bottom:20px !important;
margin-bottom:20px !important;
border-bottom-style:dashed;
border-bottom-color: #7a7a7a;
border-bottom-width: 1px;
}
#stats-widget img{
display:none;
}
#stats-widget .widget-header .widget-title{
font-weight:50;
font-size:30px;
margin-bottom:5px;
color:black !important;
}
#search-widget .widget-header{
background-color:transparent;
display:none;
}
#search-widget .widget-settings{
display:none;
}
#search-widget .widget-content{
background-color:transparent;
border-style:none;
padding:0;
}
#search-widget .widget-footer{
background-color:transparent;
border-style:none;
}
#blog_searchform input{
background-color:transparent;
}
#blog_searchform fieldset{
border-style:none !important;
width:248px; !important;;
display:inline-block !important;
margin:0 !important;
}
#blog_searchform fieldset input#blog_keywords{
width:calc(100% - 60px);
font-family:'Titillium Web', sans-serif;
border-color:black;
color:black;
}
#blog_searchform fieldset div{
width:4;
float:right;
margin-top:0 !important;
border-color:black !important;
}
#blog_searchform fieldset div input{
height:22px;
font-size:12px;
font-family:'Titillium Web', sans-serif;
font-weight:300;
margin-top:0;
border-color:black;
color:black;
}
#blog_searchform{
margin:0;
}
#search-widget .widget-footer{
display:none;
}

#search-widget{
margin:0 !important;
padding-bottom:px;
}
#search-widget .widget-content{
margin:0;
}
#search-widget{
position:fixed !important;
z-index:1000000000000000000 !important;
top:4px !important;
right:50px !important;
padding:0 !important;
}
#right_navigation_box{
right:210px;
}
#search-widget .button2{
display:inline;
}

#message-box{
height:99px !important;
}
#user-menu-widget{
padding-bottom:10px !important;
border-bottom-style:dashed;
border-color:#7a7a7a;
border-width:1px;
margin-bottom:17px!important;
}
.user-full a{
font-weight:300 !important;
}
.message{
word-wrap:break-word;
}

#right_navigation_box{
right:210px;
}

.entry h2 a {
    color: white;
}
a {
 
}
a:hover {
    color: orange !important;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
}
 
div.total-posts , div.total-posts a{
    color: white;
}

#blog_keywords{
border-style:none;
font-size:18px;
font-weight:300;
color:white !important;
}
#blog_keywords::placeholder{
color:white;
font-style:italic;
}
#main::after {
  /* Rule extends %modal-font */
  content: "CSS credit to Mathlete2017";
  position: relative;
  top: 2em;
  display: block;
  color: #aaa;
  font-size: 6pt;
  text-align: center;
}

/*Loading bar*/
@keyframes loading{
  0%{
    width: 0px;
    top: calc(50vh - 50px);
    font-family: VT323;
    content: "Loading...";
    transition: ease;
    text-align: center;
  }
  75%{
    width: 300px;
    top: calc(50vh - 50px);
    font-family: VT323;
    content: "Loading...";
    text-align: center;
  }
  75.1%{
    width: 300px;
    top: calc(50vh - 50px);
    font-family: VT323;
    content: "Done!";
    text-align: center;
  }
  85%{
    top: calc(50vh - 100px);
    width: 300px;
    font-family: VT323;
    content: "Done!";
    text-align: center;
  }
  100%{
    top: calc(150vh - 50px);
    width: 300px;
    font-family: VT323;
    content: "Done!";
    text-align: center;
  }
}
html::before{
  font-family: VT323;
  content: "Loading...";
  height: 100px;
  position: fixed !important;
  margin: 0px;
  padding: 0px;
  top: calc(150vh - 50px);
  left: calc(50vw - 150px);
  background-color: black;
  color: white !important;
  line-height: 100px;
  white-space: nowrap;
  font-size: 50px !important;
  z-index: 1000000000 !important;
  animation: loading 2s ease !important;
  width: 300px !important;
  box-shadow: 0px 0px 0px 5px white, 0px 50vw 0px calc(50vw + 50vh - 50px) black, 0px 0px 0px 5px white !important; 
/*The box shadow that makes the border is put before and after the background shadow, because of order issues (Firefox displays the first one on top, chrome displays the last one on top)*/
  display: block !important;
}
html::after{
  font-family: VT323;
  content: "Loading... please wait";
  height: 100px;
  width: 0px;
  position: fixed !important;
  margin: 0px;
  padding: 0px;
  top: calc(150vh - 50px);
  left: calc(50vw - 150px);
  background-color: white;
  color: black !important;
  line-height: 100px;
  z-index: 1000000001 !important;
  white-space: nowrap;
  font-size: 50px !important;
  animation: loading 2s ease !important;
  overflow: hidden !important;
}