Nosotros estamos juntos de nuevo - Memberlist
am
Nosotros estamos juntos de nuevo - Memberlist
HTML
Code:
<script src="https://kit.fontawesome.com/7c7ef4c073.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<div class="epic-memberlist_overview">
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653488ry.png" title="Unterwelt"></div>
<div class="epic-memberlist_player">- Rebbi -</div>
<div class="epic-memberlist_username"><a href="LINK">Hades</a></div>
</div>
<img src="https://up.picr.de/44653526fn.png">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> xxxx Jahre</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Hades</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Gott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> Unterwelt</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Verheiratet</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> Feuer</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 23.12.2021, 15:09</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 5</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> 31.05.2022, 16:17 <a href="LINK">Test2</a> </div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653487xe.png" title="Olymp"></div>
<div class="epic-memberlist_player">- Anni -</div>
<div class="epic-memberlist_username"><a href="LINK">Zeus</a></div>
</div>
<img src="https://up.picr.de/44653526fn.png">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> xxxx Jahre</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Gott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Verheiratet</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> Blitz</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 23.12.2021, 19:26</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 3</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> Keine Inplaybeiträge</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653485mv.png" title="Meer"></div>
<div class="epic-memberlist_player">- Bekky -</div>
<div class="epic-memberlist_username"><a href="LINK">Poseidon</a></div>
</div>
<img src="https://up.picr.de/44653526fn.png">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> xxxx Jahre</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Meer</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Gott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> Meer</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Verheiratet</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> Wasser</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 24.12.2021, 15:31</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 0</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> Keine Inplaybeiträge</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653487xe.png" title="Olymp"></div>
<div class="epic-memberlist_player">- Rebbi -</div>
<div class="epic-memberlist_username"><a href="LINK">Ares</a></div>
</div>
<img src="https://up.picr.de/44653526fn.png">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> xxxx Jahre</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Gott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Affäre</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> Schwert</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 23.12.2021, 15:09</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 5</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> 31.05.2022, 16:17 <a href="LINK">Test2</a> </div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653487xe.png" title="Olymp"></div>
<div class="epic-memberlist_player">- Anni -</div>
<div class="epic-memberlist_username"><a href="LINK">Dionysos</a></div>
</div>
<img src="https://up.picr.de/44653526fn.png">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> xxxx Jahre</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Gott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Verheiratet</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> Weinrebe</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 28.12.2021, 17:29</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 5</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> 11.07.2022, 16:17 <a href="LINK">Hallo</a> </div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653487xe.png" title="Olymp"></div>
<div class="epic-memberlist_player">- Bekky -</div>
<div class="epic-memberlist_username"><a href="LINK">Artemis</a></div>
</div>
<img src="https://up.picr.de/44653527kw.png" title="Olymp">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> xxxx Jahre</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Gott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> Olymp</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Single</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> Bogen</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 23.12.2021, 19:20</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 5</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> 11.02.2022, 15:48 <a href="LINK">Test</a> </div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
<div class="epic-memberlist_user">
<div class="epic-memberlist_user_left">
<div class="epic-memberlist_user_avatar">
<div class="epic-memberlist_group"><img src="https://up.picr.de/44653526fn.png"></div>
<div class="epic-memberlist_player">- Team -</div>
<div class="epic-memberlist_username"><a href="LINK">Göttergericht</a></div>
</div>
<img src="https://up.picr.de/44653527kw.png">
</div>
<div class="epic-memberlist_user_right">
<div class="epic-memberlist_outer"><label class="epic-memberlist_switch"> <input type="checkbox"> <span class="epic-memberlist_slider"></span> <div class="epic-memberlist_inner">
<div class="epic-memberlist_container">
<div class="epic-memberlist_wrapper">
<div class="epic-memberlist_facts"><i class="fas fa-birthday-cake" title="Alter"></i> k.A.</div>
<div class="epic-memberlist_facts"><i class="fas fa-home" title="Wohnort"></i> Forum</div>
<div class="epic-memberlist_facts"><i class="fas fa-bolt" title="Wesen"></i> Übergott</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-crown" titel="Zugehörigkeit"></i> k.A.</div>
<div class="epic-memberlist_facts"><i class="fas fa-heart" title="Beziehungsstatus"></i> Single</div>
<div class="epic-memberlist_facts"><i class="fa-solid fa-star" title="Symbol"></i> k.A.</div>
<div class="epic-memberlist_wrapper2">
<div class="epic-memberlist_longtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</div>
</div>
</div>
</div>
</div>
</label></div>
<div class="epic-memberlist_statfacts"><i class="fas fa-calendar-alt" title="Registrierdatum"></i> 23.12.2021, 14:49</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-feather-alt" title="Beiträge"></i> 1</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-keyboard" title="letzter IP-Post"></i> Keine Inplaybeiträge</div>
<div class="epic-memberlist_statfacts"><i class="fas fa-envelope" title="PN schreiben"></i> <a href="LINK">Private Nachricht</a></div>
</div>
</div>
</div>CSS
Code:
body {
background-color: #666;
}
:root {
--epic_col1:#262523;
--epic_col2:#384c35;
--epic_col3:#567050;
--epic_col4:#42382a;
--epic_col5:#b8b7a3;
--epic_font1: 'Calibri', sans serif;
--epic_font2: 'Abel', sans serif;
--epic_transition1: 2s;
}
.epic-memberlist_overview {
box-sizing: border-box;
width: 1200px;
height: 1750px;
margin: auto;
padding: 15px;
background: var(--epic_col1);
}
.epic-memberlist_overview a {
color: var(--epic-col5);
text-decoration: none;
}
.epic-memberlist_overview a:hover {
text-decoration: underline;
}
.epic-memberlist_user {
box-sizing: border-box;
width: 47%;
height: 400px;
margin: 15px;
padding-top: 20px;
background: url('https://thisisfaith.de/images/desire/headerbox.png');
float: left;
display: flex;
justify-content: space-evenly;
}
.epic-memberlist_user_left {
width: 250px;
height: 95%;
background: var(--epic_col2);
order: 1;
overflow: hidden;
position: relative;
}
.epic-memberlist_user_left img {
width: 250px;
height: 200;
margin-top: -100px;
border-top: 2px solid var(--epic_col1);
border-bottom: 2px solid var(--epic_col1);
}
.epic-memberlist_user_left .epic-memberlist_user_avatar {
box-sizing: border-box;
width: 100%;
height: 250px;
padding-top: 50px;
background: var(--epic_col1);
position: relative;
top: -130px;
transition: 1s;
clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
overflow: auto;
}
.epic-memberlist_user_left:hover .epic-memberlist_user_avatar {
top: 0px;
transition: 1s;
}
.epic-memberlist_username {
position: absolute;
width: 100%;
top: 160px;
color: var(--epic_col5);
font-family: var(--epic_font1);
font-size: 25px;
text-align: center;
text-transform: lowercase;
}
.epic-memberlist_player {
position: absolute;
width: 100%;
top: 140px;
font-family: var(--epic_font2);
font-size: 15px;
text-align: center;
text-transform: lowercase;
color: var(--epic_col5);
opacity: 0.7;
}
.epic-memberlist_group img {
position: absolute;
top: 10px;
width: 250px;
height: 100px;
margin: auto;
}
.epic-memberlist_user_right {
width: 250px;
height: 95%;
background: var(--epic_col2);
order: 2;
}
.epic-memberlist_outer {
margin:auto;
width:250px;
position:relative;
height:200px;
}
.epic-memberlist_inner {
margin: auto;
margin-left: -110px; /* hier die Positionsangabe von .switch mit einem MINUS eintragen */
margin-top: 12px;
width: 250px;
background: rgba(var(--epic_col2));
font-size: 14px;
line-height: normal;
overflow: hidden;
}
.epic-memberlist_container {
margin: auto;
width: 250px;
height: 150px;
transition: var(--epic_transition1); }
.epic-memberlist_wrapper, .epic-memberlist_wrapper2 {
position: relative;
margin: auto;
width: 250px;
height: 150px;
padding: 7px 2px;
background: var(--epic_col3);
background-size: auto 250px;
background-position: 300px 10px;
transition: var(--epic_transition1);
}
.epic-memberlist_wrapper2 {
position: absolute;
top: 0;
padding: 0px;
background: var(--epic_col3);
background-size: auto 250px; background-position: -150px 0;
transform: rotate3d(0, 1, 0, -180deg);
opacity: 0;
}
.epic-memberlist_switch {
position: absolute;
display: inline-block;
width: 24px;
height: 12px;
left: 110px;
top: 5px;
}
.epic-memberlist_switch input {
opacity: 0;
width: 0;
height: 0;
}
.epic-memberlist_slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--epic_col3);
-webkit-transition: var(--epic_transition1);
transition: var(--epic_transition1);
}
.epic-memberlist_slider:before {
position: absolute;
content: "";
height: 4px;
width: 8px;
left: 4px;
bottom: 4px;
background-color: var(--epic_col5);
-webkit-transition: var(--epic_transition1);
transition: var(--epic_transition1);
}
input:checked ~ .epic-memberlist_slider {
background-color: var(--epic_col3);
}
input:focus ~ .epic-memberlist_slider {
box-shadow: 0 0 1px #2196f3;
outline: none;
}
input:checked ~ .epic-memberlist_slider:before {
-webkit-transform: translateX(8px);
-ms-transform: translateX(8px);
transform: translateX(8px);
}
input:checked ~ * .epic-memberlist_container {
-webkit-transform: rotate3d(0,1,0, -180deg);
-ms-transform: rotate3d(0,1,0, -180deg) transform: rotate3d(0, 1, 0, -180deg);
}
input:checked ~ * .epic-memberlist_wrapper2 {
opacity: 1;
}
.epic-memberlist_facts {
float: left;
margin: 7px;
width: 110px;
height: 35px;
box-sizing: border-box;
padding: 11px 15px;
background-color: var(--epic_col1);
text-align: center;
font-size: 11px;
color: var(--epic_col5);
margin-top: 3px;
font-family: var(--epic_font2);
letter-spacing: 1px;
}
.epic-memberlist_longtext {
box-sizing: border-box;
margin: 5px;
padding: 5px;
width: 245px;
height: 140px;
text-align:justify;
font-family: var(--epic_font2);
font-size:12px;
line-height: 20px;
overflow:auto;
color: var(--epic_col5);
background-color: var(--epic_col3);
overflow: auto;
scrollbar-color: var(--epic_col1) var(--epic_col2);
scrollbar-width: thin;
scrollbar-padding: -2px;
}
.epic-memberlist_longtext::-webkit-scrollbar {
width: 2px;
background: var(--epic_col2);
}
.epic-memberlist_longtext::-webkit-scrollbar-thumb {
background: var(--epic_col1);
}
.epic-memberlist_statfacts {
box-sizing: border-box;
margin: auto;
padding: 9px 15px;
width: 250px;
height: 35px;
background-color: var(--epic_col3);
text-align: center;
font-size: 12px;
color: var(--epic_col5);
margin-top: 3px;
font-family: var(--epic_font2);
letter-spacing: 1px;
}8
