body {
  background-color: #1e2124;
  margin: 0;
  font-family: calibri;
  color: #ffffff;
  margin: 10px;
}

/*------------------------------MAIN---------------------------------------*/

.main{
background-color: #36393e;
min-height: 5vh;
border-radius: 13px;
border-width: 2px;
margin: 2vh 0 0 0;
padding: 14px 16px;
overflow:hidden;
z-index: 0;
justify-content: center;
align-items: center;
}

.main .title {
font-size: 50px;
font-weight: bold;
color: #ffffff;
display: flex;
text-align: center;
}

.titlewrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.textwrapper {
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
text-align: center;
}

.textwrapper2 {
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
text-align: center;
}
.textwrapper2 p {
text-align: start;
}

.subtitle{
font-size: 35px;
font-weight: bold;
color: #ffffff;
display: flex;
text-align: center;
}

.textbig {
display: flex;
}

.textsmall {
display: none;
}

@media screen and (max-width: 630px) {
.textbig {
  display: none;
}
}

@media screen and (max-width: 630px) {
.textsmall {
display: flex;
}
}

/*------------------------------MAIN_END---------------------------------------*/

/*------------------------------BOX-MAIN---------------------------------------*/

.mainbox{
display: flex;
flex-wrap: wrap;
position: relative;
background-color: #212529;
border-radius: 13px;
border-width: 2px;
margin: 2vh 0.8vh 0 0;
justify-content: center;
padding: 14px 16px;
overflow:hidden;
z-index: 0;
border-color: white;
align-items: center;
flex-direction: column;
}
.mainbox a{
opacity: 100 !important;
color: #ffffff;
z-index: 2;
float: middle;
}
.card-body {
flex: 1 1 auto;
padding: 1rem 1rem;
color: #212529;
}

.card-body2 {
padding: 1rem 1rem;
color: #212529;
text-align: center;
flex: 0 0 50%;
}
.card-footer {
padding: 0.5rem 1rem;
color: #212529;
background-color: #212529;
border-top: 1px solid white;
text-decoration: underline;
}

.card-footer2 {
padding: 0.5rem 1rem;
color:#212529;
background-color: #212529;
border-top: 1px solid white;
text-decoration: underline;
}

.card-footer2 a{
text-decoration: none;
font-size: 15px;
}

.card-footer a{
text-decoration: underline;
font-size: 15px;
}

.card-footer a:hover{
color: #adadad;
font-size: 15.1px;
}

.card-footer .arrow{
text-decoration: none;
font-size: 17px !important;
margin-left: 5px;
}

.mainbox{
border-radius: 10px;
max-width: 25%;
height: auto;
}

img {
  width: 100%;
}

.boxwrapper {
display: flex;
flex-direction: row;
align-items: center;
align-content: space-evenly;
justify-content: center;
}

.boxwrapper2 {
display: none;
}

.boxwrapper3 {
display: none;
}

.boxwrapper3 .mainbox {
max-width: 40%;
padding: 20px;
}

@media screen and (max-width: 1050px) {
.boxwrapper {
  display: none;
}
}

@media screen and (max-width: 1050px) {
.boxwrapper2 {
display: flex;
flex-direction: row;
align-items: center;
align-content: space-evenly;
justify-content: center;
}
}

@media screen and (max-width: 700px) {
.boxwrapper2 {
  display: none;
}
}

@media screen and (max-width: 700px) {
.boxwrapper3 {
display: flex;
flex-direction: row;
align-items: center;
align-content: space-evenly;
justify-content: center;
}
}