Website/css/main.css

* {
   margin: 0;
   padding: 0;
   scrollbar-color: #222222 #000000;
}

body {
   font-family: 'Raleway', sans-serif;
   font-weight: 300;
   color: #fff;
   background: #222 url(../images/cover-1.png) center no-repeat fixed;
   background-size: cover;
}

#rules-title,
.button {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
   z-index: 100;
   padding: 10px 55px;
   background: rgba(255, 255, 255, 0.1);
   color: #c8c8c8;
   text-align: left;
}

#rules-title:hover,
.button:hover {
   background: rgba(200, 200, 200, 0.2);
}

#online {
   font-weight: 200
}

#rules-title {
   border-radius: 0px;
   font-weight: 100
}

.admins ul,
.cover-1,
.cover-2,
.cover-3 .section-title,
.rank {
   text-align: center;
   position: relative
}

.brand-logo {
   margin-top: 5px;
   margin-bottom: 5px;
   font-weight: 200
}

.button-collapse {
   margin-top: 5px;
   margin-bottom: 10px
}

.cover-1 {
   font-size: 1.5em;
   color: rgba(255, 255, 255, 0.4);
   height: 100vh
}

.cover-1 a,
.cover-1 h3 {
   margin-top: 15%
}

.cover-2 {
   background: url(../images/cover-2.png) center fixed;
   background-size: cover;
   height: auto;
   padding-bottom: 40px;
   -webkit-box-shadow: 0 0 40px 4px black;
   box-shadow: 0 0 40px 4px black
}

.rule {
   z-index: 100;
   display: none;
   padding: 30px;
   text-align: left;
}

#rules-title,
.admins>ul>a {
   padding: 10px;
   display: inline-block
}

#rules-title {
   font-size: 1.9em;
   background: rgba(180, 180, 180, 0.1);
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease
}

#rules-title:hover {
   background: rgba(150, 150, 150, 0.2);
   -webkit-transform: scale(1.01, 1.01);
   -ms-transform: scale(1.01, 1.01);
   transform: scale(1.01, 1.01);
   color: #fff
}

.admins>ul>a,
i.rules-icon {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease
}

i.rules-icon {
   position: relative;
   float: right;
   color: rgba(150, 150, 150, 0.3);
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease
}

i.rules-icon:hover {
   color: #969696
}

.cover-2 h2,
.cover-2 p {
   width: 75%;
   font-weight: 300;
   margin: 0 auto
}

.cover-2 p {
   font-size: 1.2em;
   height: auto
}

.section-title {
   font-size: 2.5em;
   color: white;
   z-index: 100;
   font-weight: 100
}

.cover-3 {
   background: url(../images/cover-3.png) no-repeat fixed;
   background-size: cover
}

.admins>ul>a {
   margin: 5px;
   background: rgba(0, 0, 0, 0.3);
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
   border-radius: 5px;
   z-index: 200;
   font-size: 0.9em
}

.admins>ul>a:hover {
   background: rgba(0, 0, 0, 0.5);
   -webkit-transform: translateY(-3px);
   -ms-transform: translateY(-3px);
   transform: translateY(-3px)
}

.admins ul {
   z-index: 101
}

.admins a li {
   color: rgba(255, 255, 255, 0.5);
   font-size: 1.1em;
   z-index: 102;
   font-weight: 300
}

.rank {
   font-size: 1.6em;
   z-index: 103;
   font-weight: 200
}

.rest>li>a,
.useful a {
   padding: 10px;
   z-index: 100;
   text-align: center
}

.rest>li>a {
   font-size: 1.35em;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.6);
   border-radius: 10px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -ms-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
   display: inline-block;
   position: relative;
   padding-right: 10px
}

.rest>li>a:before {
   font-family: 'FontAwesome';
   content: '\f105';
   position: absolute;
   right: 30%;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   font-size: 1.35em;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -ms-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
   opacity: 0
}

.rest>li>a:hover:before {
   opacity: 1;
   padding-right: 10px;
   right: 0
}

.rest>li>a:hover {
   background: rgba(100, 100, 100, 0.2);
   color: #fff;
   padding-right: 30px
}

.rest>li {
   margin-top: 50px;
   display: inline-block
}

h3.discord-widget-title {
   font-size: 2em;
   font-weight: 100
}

.discord-widget {
   text-align: center;
   margin: 50px auto 0;
   -webkit-box-shadow: 0 5px 5px 5px rgba(34, 34, 34, 0.9);
   box-shadow: 0 5px 5px 5px rgba(34, 34, 34, 0.9)
}

.useful {
   margin-top: 150px
}

.useful a {
   display: inline-block;
   font-size: 1.05em;
   color: rgba(255, 255, 255, 0.6);
   border: 2px solid rgba(200, 200, 200, 0.3);
   margin-right: 10px;
   border-radius: 50px;
   width: 200px;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
   margin-bottom: 10px
}

.useful a:hover {
   background: rgba(100, 100, 100, 0.1);
   color: #fff;
   -webkit-transform: translateY(-5px);
   -ms-transform: translateY(-5px);
   transform: translateY(-5px)
}

.useful h3 {
   font-weight: 100
}

.useful a>li>i {
   font-size: 2em;
   margin-bottom: 10px
}

#note {
   text-align: center;
   color: #ccc;
   border-radius: 150px;
   padding: 15px;
   z-index: 1
}

#note h5 {
   margin-bottom: -20px
}

#note a {
   color: #c8c8c8;
   font-weight: 700
}

nav .nav-wrapper {
   margin-top: -7px;
   height: 65px;
   background: rgba(17, 17, 17, 0.7)
}

nav .nav-wrapper li>a {
   font-weight: 300;
   font-size: .9em
}

.cover-2 a {
   font-size: 1.17em;
   color: rgba(255, 255, 255, 0.3)
}

.head-icon {
   width: 20px;
   height: 20px;
   float: left;
   margin-right: 5px;
   border-radius: 2px
}

small {
   font-size: 0.9em
}

.modal {
   background: rgba(10, 10, 10, 0.8);
   color: #ccc
}

.modal a {
   color: #c8c8c8
}

.modal ul {
   display: inline-block
}

.modal ul li {
   display: inline-block;
   padding: 10px;
   margin: 4px;
   background: rgba(100, 100, 100, 0.2);
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
   border-radius: 5px;
   font-size: 0.8em
}

.modal ul li:hover {
   background: rgba(150, 150, 150, 0.3)
}

.modal h4 {
   margin-bottom: 38px;
   font-size: 1.2em;
   font-weight: 200
}

.modal-msg {
   background: rgba(34, 34, 34, 0.3);
   display: inline-block;
   margin: 100px auto;
   padding: 20px 40px
}

.modal-msg h5 {
   font-weight: 100;
   font-size: 0.85em;
   border-bottom: 3px solid rgba(204, 204, 204, 0.3);
   padding-bottom: 20px
}

.modal-msg span {
   font-size: 0.9em;
   font-weight: 200
}

.modal>.modal-footer {
   background: rgba(50, 50, 50, 0.3)
}

.modal>.modal-footer .modal-close {
   font-size: .9em;
   text-transform: none
}

.waves-effect.waves-brown .waves-ripple {
   background-color: rgba(230, 230, 230, 0.3)
}

.typed-cursor {
   display: none
}

.readmore {
   text-align: center;
   color: #bbb
}

footer.page-footer .footer-copyright {
   height: auto !important;
   margin-bottom: -15px
}

h3 {
   color: rgba(255, 255, 255, 0.6);
   font-size: 1.35em;
   text-align: center;
   margin-top: 2px;
}

.github {
   position: absolute;
   right: 10px;
   font-size: 16px;
   z-index: 1;
   color: #ddd;
}

.github-icon {
   font-family: FontAwesome;
}

.github-icon::before {
   content: '\f09b'
}

@media only screen and (max-width:991px) {

   .cover-2 h2,
   .cover-2 p {
      width: 100%
   }

   .online-part {
      padding: 25% .7%
   }

   .rule {
      padding: 15px
   }

   .useful {
      margin-top: 0;
      margin: 0
   }

   .discord-widget {
      padding-left: 0;
      -webkit-transform: translateX(25%);
      -ms-transform: translateX(25%);
      transform: translateX(25%)
   }

   .admins>ul>a {
      display: block;
      border-radius: 0
   }

   .head-icon {
      width: 20px;
      height: 20px;
      margin-right: 0;
      float: left;
      border-radius: 50%
   }

   .modal li {
      display: block;
      width: 100%;
      padding: 5px 70px
   }

   .modal-msg {
      margin: 25px 0;
      padding: 5px
   }

   .nav-wrapper {
      background: #111
   }

   .modal.modal-fixed-footer .modal-content {
      padding: 10px
   }

   nav .nav-wrapper li>a {
      font-weight: 500;
      font-size: 1em
   }
}