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

body {
     background-image: url('images/background.svg');
     background-size: cover;
     background-attachment: fixed;
     background-color: #111111;
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     font-family: Inkfree;
     text-align: center;
     /*animation: colorcycle 10s infinite linear;*/
     color: white;
}

@keyframes colorcycle {
     0% { background-color: #181818; }
     14.28% { background-color: #300000; }
     28.57% { background-color: #332100; }
     42.85% { background-color: #312e00; }
     57.14% { background-color: #052900; }
     71.42% { background-color: #020061; }
     85.71% { background-color: #24003b; }
     100% { background-color: #181818; }
}

.banner {
     width: 100%;
}

.logo {
     width: 33%;
}

h1 {
     font-size: 5em;
     margin: 0;
}

h2 {
     font-size: 3em;
     margin: 0;
}

p {
     font-size: 2em;
     margin: 0;
}

.avatar {
     width: 20%;
     border-radius: 50%;
     margin-top: 1em;
}

.separator {
     margin: 2em;
     width: 70%;
     height: 10px;
     background-color: rgba(255, 255, 255, 0.432);
     margin-top: 1em;
     margin-left: auto;
     margin-right: auto;
     border-radius: 5px 5px 5px 5px;
}

.member-container {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     font-family: Arial, Helvetica, sans-serif;
}

.member {
     width: 30%;
     margin: 1em;
     padding: 1em;
     background-color: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(15px);
     border-radius: 5px;
     transition: 500ms;
}

.btn {
     background-color: #636363;
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: 500ms;
     height: 50px;
     width: 100px;
     font-size: 1em;
     text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
}

.btn:hover {
     background-color: #555555;
     padding: 10px 30px;
}

::-webkit-scrollbar {
     width: 15px;
}

::-webkit-scrollbar-track {
     background: transparent;
}

::-webkit-scrollbar-thumb {
     background: rgb(49, 49, 49);
     border-radius: 5px; 
     transition: 500ms;
}

.socials {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 1em;
}

.fa-brands {
     color: white;
     font-size: 2em;
     margin: 0.5em;
     transition: 500ms;
}

.fa-brands:hover {
     color: #aaaaaa;
}

@media only screen and (max-width: 600px) {
     .logo {
          width: 50%;
     }
     h1 {
          font-size: 3em;
     }
     
     h2 {
          font-size: 2em;
     }
     
     p {
          font-size: 1em;
     }
     .separator {
          width: 90%;
          height: 5px;
     }
     .member {
          width: 90%;
          backdrop-filter: blur(10px);
     }
}