* {
    margin: 0;
    padding: 0;

}

:root {
    --theme: rgb(0, 129, 6);
}


html {
    @media (max-width: 700px) {
        overflow-x: hidden;
    }
}

body {
    background-image: url(../img/backgroundMC.png);
    background-size: auto 100vh;

    @media (max-width: 700px) {
        background-image: url(../img2/backgroundMC.png);
        
    }
}

hr {
    background-color: rgb(0, 129, 6);
}

header h1 {
    text-shadow: rgb(0, 129, 6) 5px 5px 3px;
}

header a.discover button {
    color: rgb(0, 129, 6);
    border: 4px solid rgb(0, 129, 6);

    &:hover {
        background-color: rgb(0, 129, 6);

        & span {
            background-image: url(../img/backgroundMC.png);
            background-clip: text;
            -webkit-background-clip: text;
            background-attachment: fixed;
            background-size: auto 100vh;
            background-repeat: no-repeat;
            background-position: center center;
            
        }
    }
}


main  {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 7vh;

    
    
}

main section {
    width: 90%;
}
main h2 {
    text-align: center;

    @media (max-width: 700px) {
        font-size: 3rem;
    }
}



p {
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

main section p{
    
    @media (max-width: 700px) {
        font-size: 1.5rem;
        width: initial;
    }    
}

ul {
    text-align: center;
    width: 100%;
    height: max-content;

    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    justify-content: space-evenly;
    justify-items: center;
    
    


    @media (max-width: 700px) {
        grid-template-columns: none;
        grid-template-rows: 33.3% 33.3% 33.3%;
        
    }

   

    & li {
        list-style-type: none;
        
        display: flex;
        ;
        
        
        
        

        @media (max-width: 700px) {
            padding-top: 1lvh;
            padding-bottom: 1lvh;
            font-size: 1.5rem;
            
        }

        & a {
            display: flex;
            align-items: center;
            background-color: var(--theme);
            color: #fff;
            font-family: 'Raleway', sans-serif;
            border-radius: 10px;
            padding: 10px;
            width: max-content;
            border: 2px var(--theme) solid;

            &:hover {
                background-color: #272727;
                color: var(--theme);
            }
        }
        
    }
}



main section ul li a {
    display: flex;
    align-items: center;
}

main section ul li a i.gg-software-download {
    color: inherit;
    margin-left: 0.6em;



}



footer {
    display: flex;
    justify-content: center;
    
    flex-direction: column;
    align-items: center;

    background-color: transparent;

    
    
}