@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root{
    --grid-color-one: rgb(255, 255, 255);
    --grid-color-two: rgb(245, 245, 245);
    --grid-size: 100px 100px;
    --grid-speed: 300s;

}

html {
  scrollbar-color: #378af2 #0000;
  scrollbar-width: thin;
}


body{
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;

    background-size: var(--grid-size);
    animation: scroll var(--grid-speed) linear infinite;
    background-image: repeating-conic-gradient(
      var(--grid-color-two) 0% 25%, 
      var(--grid-color-one) 0% 50%
    );
    overflow-y: visible; /* disable vertical scrolling */
    overflow-x: hidden; /* disable horizontal scroll */

    scrollbar-width: none;
}

@keyframes scroll {
    100%{
        background-position: 500% -1000%;
    }
}

.container {
    width:70%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    max-width: 100%;
    overflow: visible;
    flex-direction: column;
    margin:0 auto;
}


/* HEADER ---------------------------------------- */
header {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* Title background */
.title {
  background-color: #378af2;
  position: relative;
  width: 150%;
  height: 30vh;
  left: -16vw;
  top: -4vh;
  transform: rotate(2deg);
}

.title img {
  width: 40vw;
  height: 20vh;
  object-fit: contain;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Facs Title */
.facs-title {
  margin-top: -28vh;
  margin-left: -10vw;
  width: 36%;
  position: relative;
  z-index: 40;
}

.facs-title img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;

}

.marquee-wrapper {
  width: 200%;
  overflow: visible;
  left:-16vw;
  top:-14vh;
  position:relative;

  font-family:'Montserrat';
  font-size:2vh;
  font-weight:900;
  color:white;

  display:flex;
  align-items:center;

  z-index:99;
}

.marquee {
  display: flex;
  white-space: nowrap;
  background-color:#378af2;
  transform: rotate(2deg);
  height:2em;
  display:flex;
  align-items:center;
}

.track {
  display: inline-block;
  animation: marquee 32s linear infinite;
}

.track span {
  display: inline-block;
  padding-right: 40px; /* spacing between duplicates */
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}




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

main {
    background-color:;
    width:130%;
    transform: rotate(-3deg);
    margin-top:-36vh;
}

.site-buttons {
    background-color:;
    width:100%;
    z-index:99;
    left:-8vw;
}

.site-buttons ul {
    font-size: 1.8vw;
    text-transform:uppercase;
    text-align:left;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.site-buttons li {
    font-family: 'Montserrat';
    font-weight: 900;
    display: inline-block;
    margin: 0.3em 0.3em 0.3em 1em;
}

.site-buttons li a {
    color: #378af2;
    text-decoration: none;
}

/* Hover effect */
.site-buttons li a:hover {
    color: #378af2;
    text-decoration: underline;
}

/* Active button style */
.site-buttons li a.active {
    color: #0f4588;
    text-decoration: none;
    font-weight: 900;
}


.item-box {
    position: relative;
    background-color: #378af2;
    width: 130%;
    height: 17vw;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 5vw;
    box-sizing: border-box;
    left:-18vw;
}

.item{
    flex: 1 1 auto;         
    min-width: 0;
    position: relative;
    left: 14vw;  
}

#item-title{
    font-family:'Montserrat';
    color:white;
    font-weight:900;
    text-transform:uppercase;
    font-size:5vw;
}

.item-description{
    background-color:;
    width:65%;
}

.item-description p{
    font-family:'Montserrat';
    color:white;
    font-weight:600;
    font-size:1vw;
    margin:0;
    padding:0;
}

#item-button{
    color:white;
    font-family:'Bebas Neue';
    margin-top:2vh;
    border:none;
    background-color:#0f4588;
    text-align:center;
    font-size:2vh;
    padding:0.2em 0.6em;
}

#item-button:hover{
    background-color:white;
    color:#378af2;
}

#item-button:active{
    background-color:#D9D9D9;
    color:#378af2;
}

.item-img-box {
    flex: 0 0 30vw;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(3deg);
    overflow: visible;
    position: relative;
    z-index: 2;
    margin-right: 20vw;
    height: auto;
}

#item-img {
    width: 100%;
    height: auto;
    transform: scale(1.3);
    transform-origin:center;
    object-fit: contain;
    display: block;
    pointer-events: none;
    max-width: none;
}

.timer {
    background-color: #0f4588;
    width: 0%;
    height: 0.5vh;
    left: -16vw;
    position: relative;
    transition: none;
}

.timer.animate {
    animation: fillTimer 5s linear forwards;
}

@keyframes fillTimer {
    from { width: 0%; }
    to   { width: 115%; }
}


/* FOOTER ---------------------------------------- */

.about-box {
    position: relative;
    background-color: #378af2;
    width: 150%;
    height: 27vh;
    display: flex;
    left:-16vw;
    top:-58vh;
    transform:rotate(-2deg);
}

.about{
    position: relative;
    left: 30vw;
    top:-3vh;
}

.about p{
    font-family:'Bebas Neue';
    font-size:3vw;
    color:#0f4588;
    margin-bottom:2vh;
    margin-left:0.3vw;
}

#about-title{
    font-family:'Montserrat';
    color:white;
    font-weight:900;
    text-transform:uppercase;
    font-size:2.5vw;
    margin-top:2vw;
    padding:0.5vw;
}

.about-description{
    background-color:;
    width:50%;
    margin-left:0.3vw;
}

.about-description p{
    font-family:'Montserrat';
    color:white;
    font-weight:400;
    font-size:0.8vw;
    margin:0;
    padding:0;
}

/* SIGNATURE --------------------------------------*/

.signature{
    font-family:'Bebas Neue';
    color:#378af2;
    text-align:center;
    position:relative;
    top:20vh;
    font-size:1em;
}

.signature a {
    color:#0f4588;
    text-decoration:none;
}

.signature a:hover{
    text-decoration:underline;
}