/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Custom Fonts
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

/* Minecraft Fonts */
@font-face {
    font-family: "Minecraft Ten";
    src: url('../../assets/fonts/Minecraft\ Ten.ttf') format('truetype');
}
@font-face {
    font-family: "Minecraft Seven";
    src: url('../../assets/fonts/Minecraft\ Seven.ttf') format('truetype');
}
@font-face {
    font-family: "Minecraft Five";
    src: url('../../assets/fonts/Minecraft\ Five.ttf') format('truetype');
}
@font-face {
    font-family: "Minecraft Five Bold";
    src: url('../../assets/fonts/Minecraft\ Five\ Bold.ttf') format('truetype');
}

/* Website Main Fonts */
@font-face{
    font-family: "MarkPro";
    src: url(../../assets/fonts/Mark\ Pro.ttf) format('truetype');
}
@font-face{
    font-family: "MarkPro Medium";
    src: url(../../assets/fonts/Mark\ Pro\ Medium.ttf) format('truetype');
}
@font-face{
    font-family: "MarkPro Bold";
    src: url(../../assets/fonts/Mark\ Pro\ Bold.ttf) format('truetype');
}
@font-face{
    font-family: "MarkPro Heavy";
    src: url(../../assets/fonts/Mark\ Pro\ Heavy.ttf) format('truetype');
}

:root {
    /* Light Color */
    --white-L:  244, 244, 244;
    --red-L:    228, 47, 69;
    --orange-L: 253, 157, 72;
    --yellow-L: 234, 236, 73;
    --green-L:  117, 243, 163;
    --blue-L:   123, 211, 234;
    --purple-L: 203, 157, 240;
    --black-L:  27, 27, 27;

    /* Medium Color */
    --white-M:  234, 234, 234;
    --black-M:  17, 17, 17;

    /* Dark Color */
    --white-D:  224, 224, 224;
    --black-D:  10, 10, 10;

    /* Font Size */
    --b-title: 6rem;
    --m-title: 4.2rem;
    --s-title: 3.5rem;
    --ss-title: 3.0rem;

    --b-text: 2.25rem;
    --m-text: 2rem;
    --s-text: 1.75rem;
    --ss-text: 1.25rem;

    /* Layout */
    --main-grid-columns:           4;
    --container-width:             160rem;
    --section-spacing:             5.6rem 2.4rem;
    
    /* Fonts */
    --main-font:           'MarkPro';
    --main-font-medium:    'MarkPro Medium';
    --main-font-bold:      'MarkPro Bold';
    --main-font-heavy:     'MarkPro Medium';
    --minecraft-ten:       'Minecraft Ten';
    --minecraft-seven:     'Minecraft Seven';
    --minecraft-five:      'Minecraft Five';
    --minecraft-five-bold: 'Minecraft Five Bold';

}

/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Default Values
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

*{
    margin:     0;
    padding:    0;
    box-sizing: border-box;
    font-weight: normal;

    text-decoration:  none;
    list-style: none;

    /*outline: 1px solid red; /* Função Utilizada apenas para Debugging do Site */
}

html{
    font-size:        62.5%;
    scroll-behavior: smooth;
}

body {
    font-size:        var(--m-text);
    font-family:      var(--main-font);

    color:            rgba(var(--white-L), 1);
    background-color: rgba(var(--black-M), 1);
}

a{
    color:            rgba(var(--color-white-D), 1);  
}


img {
    max-width:        100%;
    display:          block;
}

/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Predefined Values
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

    /* Titulos                   */
    /* Muda o Tamanho de Títulos */
.b-title{ font-size:var(--b-title); line-height: 100%; }
.m-title{ font-size:var(--m-title); line-height: 100%; }
.s-title{ font-size:var(--s-title); line-height: 100%; }
.ss-title{ font-size:var(--ss-title); line-height: 100%; }

    /* Textos                   */
    /* Muda o Tamanho de Textos */
.b-text{ font-size:var(--b-text); }
.m-text{ font-size:var(--m-text); }
.s-text{ font-size:var(--s-text); }
.ss-text{ font-size:var(--ss-text); }

    /* Formatação ( "--main-font" é o padrão ) */ 
    /* Muda o Tipo da Fonte                    */
.t-medium              { font-family:var(--main-font-medium); }
.t-bold                { font-family:var(--main-font-bold); }
.t-heavy               { font-family:var(--main-font-heavy); }
.t-minecraft-ten       { font-family:var(--minecraft-ten); } 
.t-minecraft-seven     { font-family:var(--minecraft-seven); }
.t-minecraft-five      { font-family:var(--minecraft-five); }
.t-minecraft-five-bold { font-family:var(--minecraft-five-bold); }

    /* Alinhamento de Texto */
.text-align-l{ text-align: left; }
.text-align-c{ text-align: center; }
.text-align-r{ text-align: right; }

    /* Alinhamento de Itens */
.justify-items-l{ justify-items: left; }
.justify-items-c{ justify-items: center; }
.justify-items-r{ justify-items: right; }

    /* Alinhamento de Conteúdos */
.justify-content-l{ justify-content: left; }
.justify-content-c{ justify-content: center; }
.justify-content-r{ justify-content: right; }

/* Cores Pre Definida >> L */
.textcolor-white-l { color: rgba(var(--white-L), 1); }
.textcolor-red-l { color: rgba(var(--red-L), 1); }
.textcolor-orange-l { color: rgba(var(--orange-L), 1); }
.textcolor-yellow-l { color: rgba(var(--yellow-L), 1); }
.textcolor-green-l { color: rgba(var(--green-L), 1); }
.textcolor-blue-l { color: rgba(var(--blue-L), 1); }
.textcolor-purple-l { color: rgba(var(--purple-L), 1); }
.textcolor-black-l { color: rgba(var(--black-L), 1); }

/* Cores Pre Definida >> M */
.textcolor-white-m { color: rgba(var(--white-M), 1); }
.textcolor-red-m { color: rgba(var(--red-M), 1); }
.textcolor-orange-m { color: rgba(var(--orange-M), 1); }
.textcolor-yellow-m { color: rgba(var(--yellow-M), 1); }
.textcolor-green-m { color: rgba(var(--green-M), 1); }
.textcolor-blue-m { color: rgba(var(--blue-M), 1); }
.textcolor-purple-m { color: rgba(var(--purple-M), 1); }
.textcolor-black-m { color: rgba(var(--black-M), 1); }

/* Cores Pre Definida >> D */
.textcolor-white-d { color: rgba(var(--white-D), 1); }
.textcolor-red-d { color: rgba(var(--red-D), 1); }
.textcolor-orange-d { color: rgba(var(--orange-D), 1); }
.textcolor-yellow-d { color: rgba(var(--yellow-D), 1); }
.textcolor-green-d { color: rgba(var(--green-D), 1); }
.textcolor-blue-d { color: rgba(var(--blue-D), 1); }
.textcolor-purple-d { color: rgba(var(--purple-D), 1); }
.textcolor-black-d { color: rgba(var(--black-D), 1); }


/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Predefined Buttons
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

.btn {
    display: inline-block;
    cursor: pointer;
    align-items: center;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
    letter-spacing: 2px;
    border-radius: 500px;
    border: 1px solid transparent;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, filter 0.3s;
}

/* Button Sizes */
.btn-small { padding: 7px 7px; }
.btn-medium { padding: 10px 10px; }
.btn-large { padding: 15px 15px; }
.btn-large-auto { width: 100%; padding: 15px 15px; }
.btn-wide { padding: 15px 60px; }

/* Button Colors */
/* Dark */
.btn-dark {
    background-color: rgba(var(--black-L), 0.8);
    color: rgba(var(--white-L), 1);
}
.btn-dark:hover {
    background-color: rgba(var(--white-L), 0.8);
    color: rgba(var(--black-L), 1);
}

/* Light */
.btn-light {
    background-color: rgba(var(--white-L), 0.8);
    color: rgba(var(--black-L), 1);
}
.btn-light:hover {
    background-color: rgba(var(--black-L), 0.8);
    color: rgba(var(--white-L), 1);
}

/* Green */
.btn-green {
    background-color: rgba(var(--green-L), 0.8);
    color: rgba(var(--black-L), 1);
}
.btn-green:hover {
    background-color: rgba(var(--white-L), 0.8);
    color: rgba(var(--black-L), 1);
}

/* Red */
.btn-red {
    background-color: rgba(var(--red-L), 0.8);
    color: rgba(var(--white-L), 1);
}
.btn-red:hover {
    background-color: rgba(var(--white-L), 0.8);
    color: rgba(var(--black-L), 1);
}

/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Basic Setup
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

.container{
    max-width:   var(--container-width);
    padding:     var(--section-spacing);
    margin:      0 auto;
}

.row{
    display:     grid;
    gap:         2rem;

    grid-template-columns: repeat(var(--main-grid-columns), 1fr);
}

.body {
    display: flex;
    flex-wrap: wrap;
    grid-column: span 7;
    width: 100%;
    margin-bottom: 1.5rem;
    background-color: rgba(var(--white-L), 0.025);
    border-radius: 8px;
    letter-spacing: 1px;
    padding: 3rem;
}

.grid-image{
    margin-top:  2.4rem;
    grid-column: span var(--main-grid-columns);
}

.text-group{
    grid-column: span var(--main-grid-columns);
}

.text-group p{
    line-height: 3.2rem;
}

.remove-grid{
    display:     block;
}

/*--x-- --x-- ~~ △ ~~ --x-- --x--
//  Main Hero
--x-- --x-- ~~ ▽ ~~ --x-- --x--*/

.main-hero{
    height:       calc(100vh - 120px);
    padding-top:  8rem;
    min-height:   600px;
    max-height:   900px;
    z-index:      1;

    position:     relative;
    display:      flex;
    align-items:  center;
    overflow:     hidden;
}

.main-hero-videobg{
    position: absolute;
    display: block;
    top: 50%; left: 50%;
    filter:blur(.5rem);
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;

    z-index: -2;
}

.main-hero-imagebg {
    position: absolute;
    display: block;
    z-index: -3;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter:blur(.5rem);
    object-fit: cover;
}

.main-hero-imagebg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-color{
    position: absolute;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    z-index:      -1;
    background-color: rgba(var(--black-L), .6);
}

.hero-content-wrap {
    grid-column: span 2;
}

.hero-btn-group{
    padding-top: 2rem;
}
.hero-btn-group a i{
    margin-inline: .8rem;
}

.downwards-arrow{
    position: absolute;
    left: 50%; bottom: 20px;
    transform: translateX(-50%);
    padding: 1.5rem;
}