@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: hidden; /* 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;
}

/*----------------------------------------------*/
h2{
    margin:1%;
}

h2 a{
    font-family:'Montserrat';
    text-decoration:none;
    color:#378af2;
}

h2 a:hover{
    text-decoration:underline;
    color:#0f4588;
}

main {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    left:-6vw;
    pointer-events:none;
    user-select:none;
}

.main-img img {
    max-width: 100%;
    height: auto;
}