@font-face {
    font-family: "FootyFont";
    src: url("/src/assets/Bash_Regular.ttf");
}
:root {
    --blue-top: #303b88;
    --blue-bottom: #222675;

    --red: #e92c01;
    --white: #ffffff;
    --dark: #222222;

    --content-max: 1100px;
    --tile-size: 150px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    scrollbar-width: none; /* Firefox */
    width: 100%;
    min-height: 100%;
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
body {
    min-height: 100dvh;

    overflow-x: hidden;

    background:
        linear-gradient(
            to bottom,
            var(--blue-top),
            var(--blue-bottom)
        )
        no-repeat;

    background-size: 100% 100%;

    color: white;
}


/* =========================================================
   LINKS
   ========================================================= */

a,
a:visited {
    color: white;
    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

a:hover {
    color: var(--red);
    cursor: pointer;
}

a:active {
    opacity: 0.7;
}


/* =========================================================
   MAIN HERO / MOVING TILE AREA
   ========================================================= */

#wrapper {
    position: relative;

    display: grid;

    /*
       side space | main stage | side space

       IMPORTANT:
       minmax(0, ...) means this CAN shrink on smaller screens.
    */
    grid-template-columns:
        minmax(20px, 1fr)
        minmax(0, var(--content-max))
        minmax(20px, 1fr);

    grid-template-rows: minmax(100dvh, auto);

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

    isolation: isolate;
    overflow:hidden;
}


/* moving transparent PNG tiles */

.moving-tiles {
    background-image: url("/src/assets/tile.png");

    background-repeat: repeat;

    background-size:
        var(--tile-size)
        var(--tile-size);

    animation:
        scrollTiles 10s linear infinite;
}

@keyframes scrollTiles {
    from {
        background-position: 0 0;
    }

    to {
        background-position:
            var(--tile-size)
            var(--tile-size);
    }
}


/* =========================================================
   RED BACKING TRAPEZOID
   ========================================================= */

.trapezoidRed {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    z-index: 1;

    width: 104%;
    height: 100%;

    justify-self: center;

    background: var(--red);

    clip-path: polygon(
        11% 0,
        89% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   MAIN WHITE / VIDEO TRAPEZOID
   ========================================================= */

.trapezoid {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: white;

    clip-path: polygon(
        10% 0,
        90% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   HERO VIDEO
   ========================================================= */

.trapezoid video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    /*
       If you still want your slight vertical stretch,
       change this to scaleY(1.1)
    */
    transform: none;
}


ol li{
  margin-top:20px
}
#policy{ 
  max-height:800px;
  overflow-y:scroll;
  padding:10px;
  border:2px solid #111;
  margin-top:50px;
   z-index:80;
   max-width:800px;
   grid-column: 2;
    grid-row: 1;
  text-align:left;
  font-family:sans-serif;
  background-color:rgba(0,0,0,.5);
}
/* =========================================================
   CONTENT OVER THE VIDEO
   ========================================================= */

.content {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

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

    padding:
        clamp(20px, 4vw, 60px)
        clamp(25px, 7vw, 100px);

    background: transparent;
    min-height:1000px;
}


/* =========================================================
   LOGO
   ========================================================= */

#logo {
    display: block;

    width: min(600px, 75%);
    max-width: 100%;

    height: auto;

    margin-inline: auto;

    position: relative;

    z-index: 4;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(0, 0, 0, 0.35)
        );
}


/* =========================================================
   IMAGES GENERALLY
   ========================================================= */

img {
    max-width: 100%;
}


/* =========================================================
   FLEX ROWS
   For nav / socials / buttons etc.
   ========================================================= */

.row {
    display: flex;

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

    gap: clamp(10px, 2vw, 30px);

    flex-wrap: wrap;
}


/* =========================================================
   BOTTOM-ALIGNED CONTENT
   ========================================================= */

.bottom {
    margin-top: auto;
}


/* If something is directly inside CSS Grid */

.grid-bottom {
    align-self: end;
}


/* =========================================================
   REVIEW / QUOTE COMPONENT
   ========================================================= */

.review {
    position: relative;

    width: min(700px, 90%);

    margin-inline: auto;

    padding:
        clamp(40px, 6vw, 70px);

    text-align: center;
}

.review-content {
    transition: opacity 0.4s ease;
}

#reviewQuote {
    margin: 0;

    font-size:
        clamp(1.4rem, 3vw, 2.2rem);

    font-weight: bold;

    line-height: 1.25;
}

#reviewName {
    margin-top: 20px;

    font-size:
        clamp(0.8rem, 1.5vw, 1rem);

    opacity: 0.7;
}

.quote {
    position: absolute;

    font-family: Georgia, serif;

    font-size:
        clamp(4rem, 8vw, 7rem);

    line-height: 1;

    pointer-events: none;
}

.quote-top {
    top: 0;
    left: 0;
}

.quote-bottom {
    right: 0;
    bottom: 0;
}


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

.icon {
    width: 32px;
    height: 32px;

    color: white;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(0, 0, 0, 0.35)
        );

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.icon:hover {
    color: var(--red);

    transform: scale(1.08);
}


/* =========================================================
   NORMAL WEBSITE SECTIONS
   ========================================================= */

.page-section {
    width: min(var(--content-max), 100%);

    margin-inline: auto;

    padding:
        clamp(60px, 8vw, 120px)
        clamp(20px, 5vw, 60px);
}


/* =========================================================
   LARGE SCREEN ONLY ELEMENTS

   Add class="wide-only" to anything that should vanish
   under 1580px.
   ========================================================= */

@media (max-width: 1580px) {

    .wide-only {
        display: none;
    }
    #mascots{
    display:none;
    } 
    #DangerThumbsLogoParent{
      display:none;
    }
    .content{
      zoom:0.8;
    }
}


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

@media (max-width: 1000px) {

    :root {
        --tile-size: 130px;
    }

    #wrapper {
        grid-template-columns:
            20px
            minmax(0, 1fr)
            20px;
    }

    .content {
        padding:
            30px
            clamp(30px, 8vw, 80px);
    }

    #logo {
        width: min(550px, 80%);
    }
#mascots{
      display:none;
    }
    #DangerThumbsLogoParent{
      display:none;
    }
    .content{
      zoom:0.8;
    }
}


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

/* =========================================================
   ACCESSIBILITY
   Respect people who disable motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .moving-tiles {
        animation: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}
#x{
mask: url("/src/assets/x.svg") center / contain no-repeat;
    -webkit-mask: url("/src/assets/x.svg") center / contain no-repeat;
} 
#insta{
    mask: url("/src/assets/insta.svg") center / contain no-repeat;
    -webkit-mask: url("/src/assets/insta.svg") center / contain no-repeat;
}
#tiktok{
mask: url("/src/assets/tiktok.svg") center / contain no-repeat;
    -webkit-mask: url("/src/assets/tiktok.svg") center / contain no-repeat;
}
#steam{
mask: url("/src/assets/steam.svg") center / contain no-repeat;
    -webkit-mask: url("/src/assets/steam.svg") center / contain no-repeat;
}
#meta{
mask: url("/src/assets/meta.svg") center / contain no-repeat;
    -webkit-mask: url("/src/assets/meta.svg") center / contain no-repeat;
}
#discord{
mask: url("/src/assets/discord.svg") center / contain no-repeat;
    -webkit-mask: url("/src/assets/discord.svg") center / contain no-repeat;
}
.overlay{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:  url(/src/assets/meshbg.webp);
    background-position: center;
    background-repeat: repeat;
    z-index: 7;
}
.button{
  text-align:center;
  height: 100px;
  width: 400px;
  margin: 20px auto;
  line-height:100px;  
  background:#303b88;
  color:#ffffff;
  border: 4px solid #6c73ae;  
  border-radius:10px;
font-family: "FootyFont", sans-serif;
  font-size:35px;
 filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.9));

}
p{

  margin-top:20px;
  color:#cdcdcd;
  font-family: "FootyFont", sans-serif;
}

#eta{
    z-index:10;
    grid-column: 2;
    grid-row: 1;
    align-self:start;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.9));
    text-align:center;
}
#logoParent{
  margin-top:100px;
  height:400px;

}
.icon:hover{
  background-color:#fff;

}
.dateText{
  font-size:40px;
  color:#fff;
}
.button:hover{
  background-color:#4251bd;
}
#footer{
  text-align:center;
    z-index:20;
    grid-column: 2;
    grid-row: 1;
    align-self:end;
}
#footer li{
  display:inline-block;
  font-family: "FootyFont", sans-serif;
  margin:10px;
}
#footer li span{
  color: yellow;
}
#logo{
  background-position: center;
  background-repeat:no-repeat;
  height:100%;
  padding-left:20px;

  width:auto;
  justify-content:center;
  z-index:4;
}
.mascot{
   position:absolute;

}
#mascot1{
 background-image:url(/src/assets/mascot_SA.png);
  background-repeat: no-repeat; 
  background-size: 700px 700px;
  width:800px;
  height:800px;
  bottom:-50px;
  right:-210px;
}
#mascot2{
 background-image:url(/src/assets/mascot_QLD.png);
  background-repeat: no-repeat; 
  background-size: 600px 600px;
  width:700px;
  height:500px;
  bottom:0px;
  right:-290px;
}
#mascot3{
 background-image:url(/src/assets/mascot_NT.png);
  background-repeat: no-repeat; 
  background-size: 700px 700px;
  width:800px;
  height:500px;
  bottom:-50px;
  right:-100px;
  overflow:hidden
}
#mascots{
    z-index:10;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row: 1;
    align-self:end;
    height:50%;
    width:100%; 
}
#DangerThumbsLogoParent{
  z-index:90;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 1;   
  width:100%;  
  height:300px;
  justify-content:center;
  align-self:end;
}
#DangerThumbsLogo{
  background-image:url(/src/assets/DangerThumbsLogo.png);
  background-repeat: no-repeat; 
  background-size: 300px 300px;
  height:100%;
  width:300px;
  
  margin:0 auto;
  margin-top:-100px

}
.icon{
  display:inline-block;
  width:60px;
  height:60px;
  background-color:#cdcdcd;
  margin:0 10px;
}
#toolbar{
    z-index:100;
    grid-column: 2;
    grid-row: 1;
    align-self:end;
    margin:0 auto;
   margin-bottom:100px; 
   
}


@media (max-width: 768px) {

    :root {
        --tile-size: 110px;
    }


    /* -----------------------------------------
       Hero
       ----------------------------------------- */

    #wrapper {
        grid-template-columns:
            8px
            minmax(0, 1fr)
            8px;

        min-height: 100dvh;
    }


        .trapezoid video {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        transform: none;
    }
    .content {
        width: 100%;

        padding:
            24px
            24px
            30px;

        min-width: 0;
    }
    #wrapper {
        grid-template-columns:
            8px
            minmax(0, 1fr)
            8px;

        min-height: 100dvh;
    }
        .trapezoid video {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        transform: none;
    }
    .content {
        width: 100%;

        padding:
            24px
            24px
            30px;

        min-width: 0;
    }

    #logo {
        width: min(82vw, 500px);
        height: auto;
        margin-inline: auto;
    }

    .row {
        gap: 14px;
    }
    .review {
        width: 100%;
        padding:
            45px
            30px;
    }

    #reviewQuote {
        font-size:
            clamp(1.25rem, 6vw, 1.8rem);
    }

    .quote {
        font-size: 4rem;
    }

    .page-section {
        padding:
            60px
            20px;
    }
  #toolbar{
      margin-bottom:100px;
    }
}


@media (max-width: 500px) {

    #wrapper {
        grid-template-columns:
            4px
            minmax(0, 1fr)
            4px;
    }
    #logoParent{

      height:200px
    }
    .button{
      zoom:0.8;
    }
    .content {
        padding:
            20px
            18px
            24px;
    }
    #toolbar{
      margin-bottom:150px;
    }
    .icon{

      height:50px;
      width:40px;
    }   
    .content{

      zoom:1;
    }  
    
    .row {
        gap: 10px;
    }

}