@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



* {
	font-family: "Cabin", arial, sans-serif;
	transition:all 0.2s;
	font-size:14px;
	scroll-behavior:smooth;
}

h1 {
    font-size: 5em;
    font-family:var(--sr-title);
    font-weight:800;
    text-transform: uppercase;
    margin:0
}
h2 {
    font-size: 4em;
    font-family:var(--sr-title);
    font-weight:800;
    margin:0
}
h3 {
    font-size: 3em;
    font-family:var(--sr-title);
    font-weight:bold;
    margin:0
}
h4 {
    font-size: 2em;
    font-weight:bold;
    margin:0
}

h5 {
    font-size: 1.5em;
    margin:0
}

h6 {
    font-style: italic;
    margin:0
}

a {
    text-decoration:none;
}

body {
    padding:0;
    margin:0;
}

html {
    scroll-padding-top: 100px; 
}

iconify-icon {
    font-size:1.5rem;
}

:root {
    --sr-background: #12203e;
    --sr-background-alt: #1c2b4d;
    --sr-text: #ffffff;
    --sr-subtext: #8a8f9e;
    --sr-highlight: #FDCD25;
    --sr-highlight-alt: #984cce;
    --sr-title:"Montserrat",arial,sans-serif;
}

[onclick] {
    cursor: pointer;
}

/*------------------------------
SCROLL BAR COLORING
------------------------------*/

/* width */
::-webkit-scrollbar {
 width: 6px;
 height:6px;
}

/* Track */
::-webkit-scrollbar-track {
 background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
 background: var(--sr-subtext);
 border-radius: 5px;
 overflow: hidden;
 transition: 0.2s all;
}
/* Handle */
::-webkit-scrollbar-thumb:hover {
 background: white;
}






/*------------------------------
BUTTON
------------------------------*/

.button {
    position:relative;
    display:inline-block;
    padding:10px 20px;
    text-transform:uppercase;
    background-color:var(--sr-highlight);
    color:black;
    font-family:var(--sr-title);
    font-weight:bold;
    cursor:pointer;
    box-sizing:border-box;
}
.button:after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    background-color:#333333;
    color:black;
    transition:all 0.2s;
    mix-blend-mode:color-dodge;
    clip-path:polygon(-20px 0, 20px 0, -20px 100%, -20px 100%);
}
.button:hover:after {
    clip-path:polygon(-20px 0, calc(100% + 20px) 0, calc(100% - 20px) 100%, -20px 100%);
}
.button.blue {
    background-color:var(--sr-background);
    color:white;
}
.button.purple {
    background-color:var(--sr-highlight-alt);
    color:white;
}


/*------------------------------
CONTAINER
------------------------------*/


.container-column,
.container-row {
    display:flex;
    grid-gap:10px
}

.container-column {
    flex-direction: column;
}

.container-column.wrap,
.container-row.wrap {
    flex-wrap:wrap;
}

.container-column.no-gap,
.container-row.no-gap{
    grid-gap:0;
}

.container-column .spread,
.container-row .spread {
    flex:1 1 auto;
}

.container-column.spread-child > * {
    flex:1 1 auto;
}

.container-vcenter {
    display: flex;
    align-items: center;
}

.center {
    text-align:center;
}

.container-column.center,
.container-row.center,
.container-vcenter.center {
    justify-content: center;
}



/*------------------------------
CARDS CONTAINER
------------------------------*/
.card-container {
    display:flex;
    flex-wrap:wrap;
    grid-gap:20px;
}   
.card-item {
    width:150px;
    height:250px;
    position:relative;
    display:block;
    border:1px solid var(--sr-background);
    overflow:hidden;
}
.card-item > img {
    height:100% !important;
    width:100% !important;
    clip-path:none !important;
    object-fit: cover;
}
.card-item > div {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    background:#12203e99;
    font-family:var(--sr-title);
    font-weight:bold;
    color:white;
    padding:10px 0;
    box-sizing:border-box;
    border-top:1px solid var(--sr-highlight);
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-item > span {
    position:absolute;
    inset: 0 0 0 0;
    background:#12203e99;
    color:white;
    padding:10px;
    box-sizing:border-box;
    visibility:hidden;
    opacity:0;
    overflow: auto;
}
.card-item:hover > img {
    transform:scale(1.05);
}
.card-item:hover > div {
    background:#12203e;
}
.card-item:hover span:not(:empty) {
    visibility:visible;
    opacity:1;
}
.card-item:hover {
    transform:scale(1.05);
    border-color:var(--sr-highlight);
}

.card-item icon {
    position:absolute;
    display:flex;
    background-color:var(--sr-highlight);
    color:var(--sr-background);
    justify-content:center;
    top:-21px;
    left:50%;
    transform:translateX(-50%);
    padding:3px 15px;
    grid-gap:20px;
    clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%)
}



/*------------------------------
SMALL CARD CONTAINER
------------------------------*/


.smallCard-container {
    display:flex;
    grid-gap:10px;
    flex-wrap:wrap;
}
.smallCard-item {
    display:block;
    position:relative;
    width:150px;
    padding:5px 20px;
    border:2px solid var(--sr-background);
    color:white;
    background-position:150% 20%;
    background-size:150px;
    background-repeat:no-repeat;
    font-family:var(--sr-title);
    font-weight:800;
    background-color:var(--sr-background);
}
.smallCard-item:hover {
    border:2px solid var(--sr-highlight);
    color:var(--sr-highlight);
}





/*------------------------------
BLOCK CONTAINER
------------------------------*/


.block-item {
    background-color:var(--sr-background);
    padding:10px 20px;
    color:white;
    text-align:center;
    min-width:150px;
}

.block-item > span {
    display:block;
    color:var(--sr-subtext);
}

.block-item a {
    color:var(--sr-highlight);
}










/*------------------------------
HOVER CONTAINER
------------------------------*/
.hover-container {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:100;
}

.hover-box {
    position:absolute;
    padding:10px;
    background-color:white;
    border:1px solid var(--sr-background);
    filter:drop-shadow(0 0 10px #12203e99);
    max-width:500px;
    right:5vw;
    max-height:30vh;
    overflow:auto;
    padding-top:0;
}