al13ntown/app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
// <weight>: Use a value from 300 to 900
// <uniquifier>: Use a unique and descriptive class name
.header ul ul {
  background: var(--content-background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  border: var(--border);
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

.header ul li:hover ul,
.header ul li:focus-within ul {
  display: block;
}

.webringy {
width: 29rem;
overflow: scroll;
height:8rem;
background: #3a6662;}

.header ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

.header ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.winky-sans-all{
  font-family: "Winky Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
table.intereststable {

padding: 4px;
}

.dropdown {
float: none;
 width: 5rem;}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 1rem;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
 }

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: purple;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}
section.bottomindex {
border: 1px solid black;
width: 550px;
height: 230px;
overflow: scroll;
margin-top: 20px;
margin: 0 auto;
}
section.etc {
border: 1px solid black;
padding: 10px;
width:260px;
height: 350px;
overflow: scroll;
margin-left: 730px;
}
@font-face { font-family: "rustic roadway"; src: url('../fonts/RusticRoadway.otf'); format("opentype");}
@font-face { font-family: "brillant"; src: url('../fonts/brillant.otf'); format("opentype");}

#writer {
  margin: 0 auto;
  padding: 10px; /* creates some space around the widget */
  font-size: 12px;
  font-family: "brillant"
}

#writer a {
  color: #A04668;
  text-decoration: none;
}

#writer a:hover {
  color: #FFB17A;
  text-dcoration: dotted underline;
}

#writer table {
/* makes the background pure white */
  margin: 0 auto; /* centers the widget */
}

#writer table tr td {
 /* creates some space between the links and text inside the widget */
}

#writer .webring-prev {
  text-align:right;
}

#writer .webring-info {
   text-align:center;
}

#writer .webring-next {
  text-align:left;
}

#writer .webring-links {
  font-size:small;
}

section.blogdesc {
border: 1px solid black;
padding: 5px;
}
#minty {
    padding: .5em;
    background-color:#e4c5e6;
    border: 1px solid #3af2e6;
color: #000;}

#minty a {
color: #000;
}
#minty-username {
    margin-bottom: .5em;
}
.marquee {
position: absolute;
width:100%;
margin-top: 25px;
}
#minty-content {
    margin: 0 1em 0.5em 1em;
}
section.aboutus {
border: 1px solid black;
padding:10px;
width: 29.375rem;
height: auto;
text-align: center;

margin-left:230px;
overflow: scroll;
margin-bottom: 15px;
}

section.latestpost {
position: absolute;
width: 12.5rem;
height: 28rem;
overflow: scroll;
margin-left: -15px;
border: 1px solid black;
padding: 10px;
}
section.posts {
margin: 0 auto;
border: 1px solid black;
padding: 4px;
}
section.interests {
float: right;
width: 250px;
border: 1px solid black;
padding: 1px;
}
section.createmember {
float: right;
top: 0px;
}
section.membertable {
border: 1px solid black;
padding: 3%;
}
section.memberspecific {
border: 1px solid black;
}
table {
padding: 3%;
margin: 0 auto;
}
tr.member {
border: 1px solid black;
}
td.member {
padding: 25px;

}
td.memberinterests {
border: 1px solid black;
padding: 5px;
}
section.memberlist {
width: 850px;
height: auto;
border: 1px solid black;
text-align: center;
margin: 0 auto;
padding: 9px;
}
section.avatarimg {
border: 3px double black;
width: 100px;
height: 100px;
margin: 0 auto;
}
section.memberinner {
border:1px solid black;
width: 243px;
height: auto;
float: left;
padding: 4px;
}
 body {
 color: #fff;
 font-family: monospace;
font-size: 1rem;
background: #2d0042;
background: linear-gradient(90deg, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);
section.inner {
 text-align: left;
 }

 section.about {

 text-align: center;
 margin: 0 auto;
 width: 480px;
 height: auto;
  border:2px outset #000;
 }
 section.footer {
background: #2d0042;
background: linear-gradient(90deg, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);
 width: 750px;
 color: #fff;
 height: 30px;
 text-align: center;
 padding-left: 2%;
 padding-right: 2%;
 padding-bottom: 1%;
 margin: auto;
  border:3px outset #000;
 }
 h1 {
border: 5px outset #42f548;
 color: #000;
width: auto;
 text-align: center;
 }
 .profilenews {
 background: #fff;
 color: #000;
 }
 main {
 width:46.875rem;
height: auto;
 margin: 0 auto;
background: #2d0042;
background: linear-gradient(90deg, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);
border: 8px groove #00918A;
 box-shadow: 8px 2px 5px 2px #a3ffc3;
padding-left: 2%;
padding-right: 2%;

 }
 .header {
 
text-align: center;
background: #2d0042;
background: radial-gradient(circle, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);
color: #fff;}
 .headerall {
 color: #fff;
background: #ffe0e8;
background: #2d0042;
background: radial-gradient(circle, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);}
 a {
 color: #fff;
 }
a:visited {
color: #fff;
}
.header a{
color: #fff;
}
 section.profileinner {
 text-align: left;
 padding: 15px;
 }
section.article {
text-align: center;
background-color: #fff;
padding: 5px;
color: #000;
}
section.profile {
text-align: center;
padding: 15px;
color: #fff;
background-color:#845d91; 
}
h1.h1bio {
width: 350px;
color:#fff;
margin: auto;
background: #2d0042;
background: radial-gradient(circle, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);}
section.homepage {

}
 a:visited {
 color: #000;
 }
 a:hover {
 color: #000;
 }
 section.auth {
 float:right;
 box-shadow: 3px 3px 3px gray;
background: #fff;
 color: #000;

 }
 section.newstuff {
 width:200px;
 border:5px outset #42f548;
background: pink;
 color: #000;
 text-align: center;
  margin: auto;
  padding: 3px;

 }

 section.articleshow {
 align-content: center;
 background: pink;
 color: #000;
  border:5px outset #42f548;
 }
 section.newstuff a, a:visited, a:hover {
 color: #fff;
 }
 table.articleshowing {
margin: auto;
  }

table.articleshowing a {
 color: #000;
 }

table.articleshowing  a:visited {
 color: #000;
 }
 table.articleshowing a:hover {
 color: #000;
 }


 section.profilelist { margin: auto; width: 300px; align-content: center; padding: 10px; overflow: scroll; background-color: 
 pink; color: #000;
   border:5px outset #42f548;
   }

@media screen and (max-width: 490px) {
main {
 width:22.875rem;
height:100%;
 margin: 0 auto;
background: #2d0042;
background: linear-gradient(90deg, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);
border: 8px groove #00918A;
 box-shadow: 8px 2px 5px 2px #a3ffc3;
padding-left: 2%;
padding-right: 2%;

 }
section.aboutus {
border: 1px solid black;
padding:10px;
width: 13.3rem;
height: auto;
margin: 0 auto;
text-align: center;
overflow: scroll;
}

section.latestpost {
width: 4.5rem;
height: 15rem;
overflow: scroll;
border: 1px solid black;
padding: 10px;
}

 section.footer {
background: #2d0042;
background: linear-gradient(90deg, rgba(45, 0, 66, 1) 0%, rgba(0, 145, 138, 1) 49%, rgba(255, 161, 252, 1) 100%);
 width: 25rem;
 color: #fff;
 height: 2rem;
 text-align: center;
 padding-left: 2%;
 padding-right: 2%;
 padding-bottom: 1%;
 margin: auto;
  border:3px outset #000;
 }
}