myriad/myriad/static/style.css

@font-face {
    font-family: 'daydream';
    src: url('/fonts/daydream.otf');
}

body{
    background: #00b7ff;
    background: linear-gradient(90deg, #00b7ff 0%, #57c785 50%, #eddd53 100%);
    font-family:monospace;
    font-size:12px; 
    scrollbar-color:#008bcc #b3e7ff;
}
hr{
    width:50%;
    margin-top:20px;
    margin-bottom:20px;
}

a{
    text-decoration:none;
}
a:hover{
    font-weight:bold;
}

form{
    margin:20px;
}
label,input{
    margin:10px;
}
form textarea{
    height:100px;
    width:300px;
    vertical-align: top;
}


.danger{
    color:red;
}




.profile{
    margin:15px;
    border-style:solid;
    border-width:1.2px;
    border-color:#99dfff;
    border-radius:5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); 
}
.clear { clear: both; }
.dsgame{
    position:relative;
    float:right;
    margin-right:10px;
    margin-bottom:10px;
}

.heading{
    background-color:#b3e7ff;
    border-left:solid;
    border-color:#008bcc;
    padding: 4px 0px 8px 10px;
    margin-bottom: 5px;
    margin:15px;
    border-width:5px;
}

.manage_images{
    max-height:400px;
    overflow-y:scroll;
}
.manage_images_2{
    clear:both;
    width:500px;
}
.manage_icons_3{
    display:block;
   width:200px;
   height:200px;
   float:left;
}
.manage_blinkies_3{
    display:block;
   width:200px;
   height:50px;
   float:left;
}
.manage_stamps_3{
    display:block;
   width:120px;
   height:100px;
   float:left;
}



.blinkie
{
    height:20px;
    width:auto;
}





.icon{
    display:inline;
    float:left;
    width:120px;
    height:120px;
    object-fit: cover;
    border-radius:10px;
    margin:12px;
    border-style:solid;
    border-width:2px;
    border-color:#008bcc;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.bio{
    display:inline-block;
    vertical-align:middle;
    padding:10px;
    width:60%;
    color:black;
}

.minis{
    padding:20px;
}

.divider{
    width:50%;
    height:auto;
    margin:auto;
    display:block;
}

.title{
    font-size:20px;
    margin-top:20px;
    margin-bottom:20px;
    display:block;
}
.heading.big{
    font-size:20px;
    font-weight:bold;
}
.heading.links{
    position:relative;
    float:left;
    padding-right:20px;
}

.maintext{
    display:block;
}

#blog{
    max-height:300px;
    overflow-y:scroll;
}
.post .title{
    font-size:20px;
    margin:10px;
}
.post .timestamp{
    font-style:italic;
    font-size:10px;
    color:rgb(80, 80, 80);
    margin:10px;
}
.post .content{
    margin:10px;
}
.post{
    border-width:1px;
    border-radius:5px;
    border-style:solid;
    margin:20px;
}
.post .icon{
    width:60px;
    height:60px;
}

.imgbullet{
    margin-right:10px;
}
.imgright{
    display: block;
    margin-left: auto;
}

#frontbanner{
    font-size:20px;
}
#frontbanner sub{
    font-size:10px;
}

.log{
    max-height:300px;
    overflow-y:scroll;
}



#mobile-nav{
    display:none;
    background-color:#e6f7ff;
    border-color:#99dfff;
    border-style:solid;
    border-width:2px;
    border-radius:5px;
}
#main{
    background-color: rgb(255, 255, 255, 0);
    border-radius: 5px;
    width: 60%;
    margin:auto;
    padding:20px;
    display:flex;
    margin-top:20px;
}
#nav{
    margin-right:20px;
    flex:20%;
    height:fit-content;
    position:sticky;
    position: -webkit-sticky;
}
.navitem{
    display:block;
}

.container{
    background-color:#e6f7ff;
    border-color:#99dfff;
    border-style:solid;
    border-width:2px;
    border-radius:5px;
    flex: 80%;
    padding: 10px;
}

.mobile{
    display:none;
}

@media (max-width: 1000px) 
{
  #main{
    width:90%;
  }
  #nav{
    display:none;
  }
  .mobile{
    display:inline;
  }
  #mobile-nav
  {
    display:inline-block;
    top:0;
    position:absolute;
    padding:10px;
    margin-left:20px;
    margin-top:10px;
  }
  .container{
    margin:20px;
  }
  
}