/*

CSS for EVENTUALLY: The TwiYor (Loid and Yor Forger) Fanlisting
HTML and CSS Hand-coded by Ainna (c) 2024


The characters are from the animanga series "SPYxFAMILY," (c) Tatsuya Endo.


Image header is from Chapter 35 of the manga. Its use is in keeping with the Fair Use Clause: fairuse.stanford.edu/overview/fair-use/what-is-fair-use/


This is a non-profit, fan-based site.
No copyright infringment is intended.

*/




























































































/*

                         -------------------------------
                         |          L E A R N          |         
                         |                             |
                         |           F R O M           |
                         |                             |
                         |           Y O U R           |
                         |                             |
                         |            O W N            |        
                         |                             |
                         |       S O U R C E S !       |    
                         -------------------------------

I put together a LOT of tutorials in the web to come up with this final design.
Copying+pasting my CSS is absolutely NOT okay. 

*/









































@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&family=Roboto+Condensed:wght@300&family=Euphoria+Script&family=Solway:wght@300&display=swap');


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #eee; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #bbb; 
}


body {
  background: #fff;
  color: #909090;
  overflow-x: hidden;
  font: 1.1rem/150% 'Solway', Sans-serif;
}

a, a:active, a:visited {
    color: #D69C60;
    text-decoration: none;
    border-bottom: 0.1vw dotted #bbb;
}


a:hover {
    background: rgb(255, 255, 255, 0.8);
    color: #AF6246;
    border: none;
    text-shadow: none;
}

h1 {
    color: #E7C678;
    font: 3rem/80% 'Euphoria Script', Sans-serif;
    text-align: center;
}

b, strong {
    color: #ceb24d;
}

p {
    font: 1.1rem/150% 'Solway', Sans-serif;
    text-align: justify;
}

.stat, p.listings, .meta, .bq {
    font: 0.8rem/100% 'Roboto Condensed', Sans-serif;
}

.stat a, .stat a:active, .stat a:visited {
    /*background: rgb(202, 250, 209, 0.2);*/
}

.meta, .bq {
    color: #ddd;
}

.meta {
    margin-top: -30px;
    margin-bottom: 40px;
}

.sub, .stat, .meta, .bq {
    text-transform: uppercase;
}

.center, .meta, .bq {
    text-align: center;
}


img {
    filter:Alpha(opacity=50);
    -moz-opacity:0.50;
    opacity:0.50;
    border:none;
    -webkit-filter: grayscale(65%); /* Safari 6.0 - 9.0 */
    filter: grayscale(65%);
}

img:hover {
    filter:Alpha(opacity=100);
    -moz-opacity:1.00;
    opacity:1.00;
    border:none;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transition: 1s ease;
}

.addform {
    text-align: left;
    margin: 10px;
    width: 100%;
    position: relative;
    left: 10%;
}


.joinform {
    margin: 0 auto;
    text-align: center;
}

fieldset {
    border:0px;
    margin:auto;
}

input, textarea, select, input[type=submit], input[type=reset] {
    color: #888;
    border:1px solid #D69C60;
	font: 1rem/100% 'Roboto Condensed', Verdana, Tahoma, sans-serif;
	text-transform: uppercase;
	background: inherit;
	padding: 5px;
}

input[type=submit], input[type=reset] {
    width: 150px;
    text-transform: uppercase;
}

input[type=text], textarea, select {
    width: 68%;
}

textarea {
overflow-x: hidden;
overflow-y: hidden;
width: 400px;
height: 200px;
}

.box {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tupperware {
    width: 1200px;
}

.logo {
    background: url('twiyorhdr.jpg') no-repeat;
    background-position: contain;
    width: 1200px;
    height: 675px;
}

.righttext {
    width: 550px;
    height: 650px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 30px;
    position: absolute;
    top: 30px;
    left: 600px;
}

.title {
    background: url('whitetitle.jpg') no-repeat;
    background-position: contain;
    width: 490px;
    height: 218px;
    position: absolute;
    top: 40px;
    left: -50px;
}

.menu {
    font: 1rem/180% 'Solway', Sans-serif;
    padding: 30px;
    border-radius: 20px;
    background: rgb(200, 200, 200, 0.1);
    width: 40%;
    position: absolute;
    top: 270px;
    left: 80px;
    letter-spacing: 2px;
}

.stat {
    text-align: center;
    padding: 5px;
    letter-spacing: 1px;
    color: #aaa;
    position: absolute;
    top: 500px;
    left: 30px;
}

.accent {
    color: #efd163;
}

.text {
    padding: 10px;
    width: 75%;
    font: 1rem/180% 'Solway', Sans-serif;
    position: relative;
    left: 120px;
}

.layout {
    padding: 20px;
    font: 9px/140% 'Raleway', Sans-serif;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.back {
    text-align: center;
    padding: 10px 5px;
    border-radius: 20px;
    background: rgb(200, 200, 200, 0.1);
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}

.bar {
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px;
    border: 3px dashed #f8ecc5;
    width: 80%;
    font: 0.8rem/120% 'Roboto Condensed', Helvetica, Sans-serif;
}

ul {
    
}

ul li {
    font: 0.8rem/130% 'Roboto Condensed', Helvetica, Sans-serif;
    /*text-transform: uppercase;*/
    color: #c2867a;
    width: 95%;
    margin-top: 5px;
        -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

#linklist ul li {
    margin: 10px;
    border: 1px dashed #502d58;
    font: 1rem/200% 'Libre Franklin', Sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#linklist ul li:hover {
    background: #30293c;
}

#linklist ul {
   columns: 4;
  -webkit-columns: 4;
  -moz-columns: 4;
}


#joined ul {
   columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}

#joined ul li {
    font: 0.9rem/180% 'Libre Franklin', 'Raleway';
    margin: 0 auto;
    list-style: none;
    border-bottom: 1px dotted #555;
    padding: 15px 20px;
    background: url('check.gif') no-repeat 0 15px;
    margin: 0px 50px 0px 30px;
}


.caps {
    width: 180px;
    height: 100px;
    background-color: #bbb;
	outline: 10px double #e2eaec;
	outline-offset: -10px;
	padding: 10px;
}



/* TOOLTIP - BOTTOM */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 90px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 2px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -20px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltiptext, .enthver {
    font: 0.7rem/100% 'Raleway', Sans-serif;
}

.email {
    width:12px;
    height:12px;
}