@import url('https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtapYCP.ttf');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    font-family: 'Raleway', sans-serif;
    --font: 'Raleway', sans-serif;
    --background: rgb(95, 123, 247);
    --color: #232333;
    --normal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.13),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0934511),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0774939),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.065),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0525061),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0365489);
  --text-shadow: 0px 100px 145px rgba(0, 0, 0, 0.25),
    0px 41.7776px 60.5775px rgba(0, 0, 0, 0.179714),
    0px 22.3363px 32.3876px rgba(0, 0, 0, 0.149027),
    0px 12.5216px 18.1562px rgba(0, 0, 0, 0.125),
    0px 6.6501px 9.64265px rgba(0, 0, 0, 0.100973),
    0px 2.76726px 4.01252px rgba(0, 0, 0, 0.0702864);
  }
  
html, body, div, h1, h2, h3, p, a, code, img, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Raleway', sans-serif;
}
html {
    backdrop-filter: blur(10px);
    z-index: 10;
}
body {
    position: relative;
    font-family: 'Raleway', sans-serif;
    line-height: 1;
    background-color: #192027;
    background-image: url('../img/ooorganize3.svg');
    /*background-image: url('https://raw.githubusercontent.com/Arnyx-Pi/xpi.angellabs.xyz/main/img/background.jpg');*/
    background-position: center;
    /*background-size: cover;*/
    background-repeat: repeat;
    background-attachment: fixed;
}
ul {
    list-style: none;
}

h1, h2, h3, p {
    color: rgb(213, 213, 213);
}

a:link {
    color: rgb(100, 130, 255);
    text-decoration: none;
}
a:visited{
    color:rgb(255, 49, 111);
    text-decoration: underline;
}
a:hover{
    color:rgb(145, 255, 180);
    text-decoration:underline;
}
a:active{
    color:rgb(59, 224, 111);
    text-decoration: underline;
}
li {
    color: #46af4b;
    font-weight: 400;
}
.title {
    font-size: 60px;
    text-align: center;
    padding-bottom: 32px;
}
.description {
    font-size: 20px;
    text-align: center;
}
.logo {
    display: block;
    margin: 0 auto;
    padding-bottom: 18px;
}
.page-w {
    position: relative;
    min-height: 100vh;
}
.page {
    /*background-color: #2b2c2e;*/
    font-weight: 400;
    line-height: 1.6;
    padding-bottom: 28em;
    padding-top: 2em;
}
.wrapper {
    display: flex;
    flex-direction: column;
    align-content: center;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 40px;
    background-color: rgb(21, 23, 26, 0.4);
    backdrop-filter: blur(4px);
    border-radius: 3%;
    border: 6px solid whitesmoke;
    box-shadow: var(--normal-shadow);
}
.h1-footer {
    text-align: center;
}
.footer-title {
    padding: 15px;
    margin-top: .5em;
    font-size: 3em;
    background: -webkit-linear-gradient(0deg, rgba(20, 200, 250, 1), rgba(20, 100, 150, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.link-title {
    font-size: 16.5px;
    font-weight: 600;
    color: #afafaf;
}
.link {
    font-weight: 500;
}
.footer-credit {
    color: rgb(170, 170, 170);
    paddint: 10px;
    margin-bottom: 1em;
}
.credit-link {
    color: #ff5596;
}
.credit-link:hover {
    background: -webkit-linear-gradient(45deg, #ff5596, #529dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer {
    position: absolute;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111212;
    background-image: url("../img/ft-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.f-page {
    display: flex;
    align-content: space-around;
    row-gap: 3em;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.linklist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    justify-content: space-between;
    gap: 3em;
}
.f-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1.5em;
    align-content: space-between;
}
.links {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.3em;
}






.bold {
    font-weight: 700;
}
.list {
    list-style-type: disc;
    padding-bottom: 16px;
    padding-left: 10px;
}
.twitter-handle:link{
  color: rgb(255, 177, 177);
  text-decoration: none;
}
.twitter-handle:visited{
  color: rgb(255, 177, 177);
  text-decoration: none;
}
.twitter-handle:hover{
  color: rgb(255, 35, 82);
  text-decoration: none;
}
.twitter-handle:active{
  color: rgb(198, 27, 64);
  text-decoration: none;
}


/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background: linear-gradient(90deg, rgba(20, 120, 120, .6), rgba(20, 100, 150, .6));
  color: whitesmoke;
  cursor: pointer;
  padding: 17px;
  max-width: 1400px;
  min-width: 300px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: all .4s ease-in-out;
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 17px;
}
.cls-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.cls-bottom {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: rgba(20, 100, 150, 1);
  transition: all .12s ease-in-out;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: rgba(10, 30, 40, 1);
}
.contents {
    padding-top: 10px;
}

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

/* Track */
::-webkit-scrollbar-track {
  background: #192027;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #dedede;
}

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