@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import "header-style.css";
:root{
    --backColour: #121212;
    --foreColour: #ffffff;
    --thomasColour: #41FF00;
    font-family: 'Montserrat', sans-serif;
}

body{
    background-color: var(--backColour);
    color: var(--foreColour);
}

main{
    margin: 0px auto;
    width: 80%;
}

.theme-colour{
    color: var(--thomasColour);
}

.mono{
    font-family: 'Courier New', Courier, monospace;
}

.thomas-link{
    text-decoration: none;
    color: var(--foreColour);
}

.alert-box{
    background-color: grey;
    border-radius: 10px;
    padding: 0.5em;
}

.red{
    background-color: red;
}

.italic{
    font-style: italic;
}

a{
    color: var(--foreColour);
}

/* Buttons */

.theme-button{
    margin: 1em;
    border-radius: 10px;
    width: 200px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.theme-button-secondary{
    background-color: var(--backColour);
    border: 1px solid var(--thomasColour);
    color: var(--foreColour);
}

.theme-button-secondary:hover{
    background-color: var(--thomasColour);
    color: var(--backColour);
}

.theme-button-primary{
    background-color: var(--thomasColour);
    color: var(--backColour);
}

.theme-button-primary:hover{
    background-color: transparent;
    border: 1px solid var(--thomasColour);
    color: var(--foreColour);
}

@media screen and (max-width: 430px) {
    main{
        width: 100%;
    }
}