@import url('https://fonts.cdnfonts.com/css/bignoodletitling');
@import url('https://fonts.cdnfonts.com/css/proxima-nova-condensed');
body {
    color:white;
}

.teamspeak {
background-color:##1C80BE;
}

.header {
    margin-bottom:0;
}
.box {
    background-color:#2C302A;
}
.container {
        background-image:url("https://i.imgur.com/DfxS6JW.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-color:#1A1A1A;
}
.content_header {
    text-align:center; 
    margin-left:10%;
    margin-bottom:10%;

}
.section_header {
       margin-top:15px;
        font-family: 'BigNoodleTitling', sans-serif;
    color: white;

}
.section1 {
    flex-wrap:wrap;
}
.box_cluster {
    flex-wrap:wrap;
}
.box_cluster .section_header {
    text-align:center;
}
.content_header h1 {
        font-family: 'BigNoodleTitling', sans-serif;
    color: #FFCC3E;
    font-size:150%;
    text-shadow: 2px 2px black;
    line-height:0.1px;
        text-align:center; 

}
.content_header p {
           font-family: 'BigNoodleTitling', sans-serif;
    color: white;
    font-size:120%;
    text-shadow: 2px 2px black;
    text-align:center; 
}
.content_header span {
    color:#FFCC3E;
}
.box_image {
    display:none;
}

.content_button {
border-radius:0;
    background-color: #5865F2;
    border-bottom: 1px solid rgba(var(--theme-text_light), 0.15);
    -webkit-box-shadow: 0 3px 4px -2px rgb(0 0 0 / 30%), inset 0 1px 1px rgb(255 255 255 / 15%);
    -moz-box-shadow: 0 3px 4px -2px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .15);
    box-shadow: 0 3px 4px -2px rgb(0 0 0 / 30%), inset 0 1px 1px rgb(255 255 255 / 15%);
    color:white;
}

.vanguard {
    background-color:#5296e2;
}
.discord {
    color:white;
}
.discord:hover {
    color:#1a1a1a;
}
.btn-primary.content_button.vanguard:hover img {
    filter: invert(90%);
}


.content_button:hover {
    color:#1a1a1a;
    background-color:#FFCC3E;
}

.button {
    margin-top:5px;
}

p.left, text-small {
    text-align:left;
    font-family: 'Proxima Nova Condensed', sans-serif;

}
.section1 {
    margin-bottom:10%;

}
.section1 .box {
   height:100px;
    width:100px;
    text-align:center;
    margin-top:5%;

}
.section1 .box:hover {
    animation: hoverEffect 1s infinite ease-in-out;
}
.section2 {

}
.section3 .grid {
    display: grid;

    column-gap: 50px;
    row-gap: 50px;
    margin: auto;

}

.section3 h1 {
    text-align:center;
}
.section3 > .box_cluster > .box {
    background-color:#1A1A1A;
} 

body > div > div.section3.box > div > div:nth-child(1) > div > img {

    filter: brightness(10);
}
.provide_image {
    font-size:50px;
}
i.section_header {
    font-size:50px;
}
.box .large {
    font-size:25px;

   
}
.values {
    color:#FFCC3E; 
    font-size:20px;
}
.provide {
    color:#FFCC3E; 
    font-size:20px;
}

@keyframes hoverEffect {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-wdith:600px) {
    .content_header h1{
    font-size:500%;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .content_header h1{
    font-size:150%;
}
.values {
    font-size: 17px;
        display: block;
        line-height: initial;
}
.provide {
    font-size: 17px;
        display: block;
        line-height: initial;
}

  .section3 .grid {

    grid-template-columns: 100%;
}
.box_cluster  {
    flex-wrap: wrap;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .content_header h1{
    font-size:150%;
}

.values {
    font-size: 17px;
        display: block;
        line-height: initial;
}
.provide {
    font-size: 17px;
        display: block;
        line-height: initial;
}

  .section3 .grid {

    grid-template-columns: 100%;
}
.box_cluster  {
    flex-wrap: wrap;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
.content_header h1{
    font-size:250%;
}
.content_header p {
    font-size:120%;
}
.box_image {
    display:none;
}
.section3 .grid {
 grid-template-columns: 33% 33% 33% ;
 width: 50%;
}
.values {
    font-size: 20px;
        display: block;
        line-height: initial;
}
.provide {
    font-size: 20px;
        display: block;
        line-height: initial;
}
.box_cluster {
    flex-wrap: nowrap;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1600px) and (min-height: 700px) {
    .content_header h1{
    font-size:150%;
}
.content_header p {
    font-size:80%;
}
.values {
    font-size: 17px;
        display: block;
        line-height: initial;
}
.provide {
    font-size: 17px;
        display: block;
        line-height: initial;
}

  .section3 .grid {

    grid-template-columns: 100%;


}

.content_button {
    border-radius: 0;
    border-bottom: 1px solid rgba(var(--theme-text_light), 0.15);
    -webkit-box-shadow: 0 3px 4px -2px rgb(0 0 0 / 30%), inset 0 1px 1px rgb(255 255 255 / 15%);
    -moz-box-shadow: 0 3px 4px -2px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .15);
    box-shadow: 0 3px 4px -2px rgb(0 0 0 / 30%), inset 0 1px 1px rgb(255 255 255 / 15%);
    color: white;
}

.discord {
background-color: #5865F2;
}
}