/*======================================================
    HATESCAPE RESOURCE PORTAL
    Version 2.0
======================================================*/


/*======================================================
    GOOGLE FONTS
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Oswald:wght@300;400;500;600;700&display=swap');

/*======================================================
    BODY
======================================================*/

body{

    background:
        linear-gradient(
            180deg,
            #04070B 0%,
            #08131D 45%,
            #05090D 100%
        );

}

.hero{

    text-align:center;

    padding:60px 20px 40px;

}

.logo{

    width:600px;

    max-width:80vw;

    filter:

        drop-shadow(0 0 10px rgba(39,180,255,.20))
        drop-shadow(0 0 35px rgba(39,180,255,.12));

    transition:.35s;

}

.hero h1{

    margin-top:24px;

    font-family:Oswald,sans-serif;

    font-size:28px;

    letter-spacing:8px;

    color:#1EA7FF;

    text-transform:uppercase;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:url("../images/backgrounds/smoke.png") center/cover;

    opacity:.09;

    pointer-events:none;

}

/*======================================================
    ROOT VARIABLES
======================================================*/

:root{

    /* Theme */

    --background:#05090D;
    --panel:#08131D;
    --panel-light:#122235;

    /* Accent */

    --accent:#1EA7FF;
    --accent-light:#57C4FF;

    /* Text */

    --text:#F5F7FA;
    --text-secondary:#57C4FF;

    /* Icons */

    --icon-colour:#1EA7FF;

    /* Border */

    --border-colour:rgba(30,167,255,.35);

    /* Glow */

    --ring-glow:rgba(30,167,255,.45);
    --ring-glow-large:rgba(30,167,255,.25);

    --hover-glow:rgba(30,167,255,.35);

    /* Radius */

    --radius:22px;

}



/*======================================================
    RESET
======================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);
    font-family:'Montserrat',sans-serif;
    color:var(--text);
    overflow-x:hidden;

}


/*======================================================*
*HOMEPAGE GRID*
*======================================================*/

.homepage{

    width:100%;
    min-height:100vh;

    padding:80px;

    display:grid;

    grid-template-columns:repeat(3, 520px);

    gap:40px;

    justify-content:center;

    align-content:start;

}

/*======================================================
    TILE
======================================================*/

.tile{

    position:relative;

    width:100%;
    height:340px;

    overflow:hidden;

    border-radius:var(--radius);

    cursor:pointer;

    background:var(--panel);

    border:2px solid var(--border-colour);

    transition:

        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


/*======================================================
    BACKGROUND IMAGE
======================================================*/

.background{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}


/*======================================================
    OVERLAY
======================================================*/

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(6,12,20,.30),

        rgba(6,12,20,.70)

    );

}


/*======================================================
    GLASS LAYER
======================================================*/

.glass{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(255,255,255,.04),

        rgba(255,255,255,.01)

    );

    backdrop-filter:blur(1px);

}


/*==============================*
*ICON CONTAINER*
*==============================*/

.icon-container{

    position:absolute;

    top:26px;
    left:50%;

    width:170px;
    height:170px;

    transform:translateX(-50%);
}


/*==============================*
*RING*
*==============================*/

.ring{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

    filter:
        drop-shadow(0 0 6px rgba(39,180,255,0.15))
        drop-shadow(0 0 15px rgba(39,180,255,0.08));
}


/*==============================*
*ICON*
*==============================*/

.icon{

    position:absolute;

    top:50%;
    left:50%;

    width:60%;
    height:60%;

    transform:translate(-50%,-50%);

    display:flex;

    justify-content:center;
    align-items:center;

    color:var(--icon-colour);

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,.25))
        drop-shadow(0 0 4px rgba(39,180,255,.18));
}


/*==============================*
*SVG*
*==============================*/

.icon svg{

    width:100%;
    height:100%;

    display:block;

    color:inherit;
}


/*==============================*
*SVG SUPPORT*
*==============================*/

.icon path,
.icon circle,
.icon rect,
.icon polygon,
.icon line,
.icon polyline{

    stroke:currentColor;
    fill:none;
}

/*======================================================
    TEXT
======================================================*/

.text{

    position:absolute;

    left:0;
    bottom:34px;

    width:100%;

    text-align:center;

}

.text h2{

    font-family:'Oswald',sans-serif;

    font-size:38px;

    font-weight:500;

    letter-spacing:7px;

    color:var(--text);

}

.text p{

    margin-top:8px;

    color:var(--text-secondary);

    font-size:17px;

}


/*======================================================
    HOVER
======================================================*/

.tile:hover .icon{
    color: var(--accent);
filter:
        drop-shadow(0 0 2px rgba(255,255,255,.25))
        drop-shadow(0 0 6px rgba(39,180,255,.25))
        drop-shadow(0 0 12px rgba(39,180,255,.18));;
}



.tile:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    border-color:var(--accent);

    box-shadow:
        0 0 18px rgba(39,180,255,.35),
        0 0 55px rgba(39,180,255,.18);

}
.tile:hover .ring{
      filter:
        drop-shadow(0 0 8px rgba(39,180,255,.45))
        drop-shadow(0 0 18px rgba(39,180,255,.20));
}

/*======================================================
    ACTIVE TILE
======================================================*/

.tile.active{

    border-color:var(--accent-light);

    box-shadow:

        0 0 22px rgba(30,167,255,.55),

        0 0 55px rgba(30,167,255,.35);

}


.tile.active .icon{

    color:var(--accent-light);

}


/*======================================================*
*RESPONSIVE*
*======================================================*/

/*==============================*
*MEDIUM / LARGE*
*==============================*/

@media(max-width:1750px){

    .homepage{

        grid-template-columns:repeat(2, 520px);

    }

}


/*==============================*
*TABLET*
*==============================*/

@media(max-width:1100px){

    .homepage{

        grid-template-columns:repeat(1, minmax(0, 600px));

        padding:40px;

    }

    .tile{

        width:100%;

        height:auto;

        aspect-ratio:600 / 340;

    }

}


/*==============================*
*MOBILE*
*==============================*/

@media(max-width:700px){

    .homepage{

        padding:30px 20px;

        gap:25px;

    }

    .tile{

        width:100%;

        max-width:600px;

    }

    .icon-container{

        width:110px;

        height:110px;

    }

    .icon{

        width:60%;

        height:60%;

    }

    .text h2{

        font-size:30px;

        letter-spacing:5px;

    }

    .text p{

        font-size:15px;

    }

}