/*
to prevent the items in the page
from getting larger sizes
*/
* {
    box-sizing: border-box;
}
:root {
    --red: 130;
    --green: 136;
    --blue: 214;
}


body {
    background-color: rgb(var(--red), var(--green), var(--blue));        
}

.title-style {
    color: white;
    font-size: 50px;
    font-family: Arial;

}

.text-style {
    color: white;

}

.sponserby {
    margin-bottom: 5rem;
    font-family: Verdana;
    text-align: center;
}

.sponserby a {
    color: darkblue;
    
}

.sponserby a:hover {
    color: white;
}

a {
    
    font-family: Verdana;
    font-size: 14px;
    font-weight: bold;
}

button a {
    color: white
}
.btnStyle {
    width: 45%;
    height: 3.2em;
    margin-right: -4px;
    border: none;
}

.btn {
    min-width: 30%;
}

.btnRegister {
    background-color: rgba(0, 0, 255, 0.9);

}

.btnLearnMore {
    background-color: black;
}

main {    
    display: grid;
    grid-template-columns: auto auto;
    /*border: 2px solid black;*/
    gap: 10px;
    width: 75%;
    margin: auto;
}


.right {
    margin-left: 20rem;
}

/*.center {
    margin-left: 2.5em;    
}*/

.section-two > img {
    border-radius: 5px 70px;
}

@media only screen and (max-width: 1000px){
    .btnStyle {
        width: 39%; /*remove the widht ounce the screen gets*/
        height: 3.2em;
        margin-right: -4px;
        border: none;
    }

    main > .sponserby {
        text-align: center;
    }

    main {    
        display: grid;
        grid-template-columns: auto auto;
        /*border: 2px solid black;*/
        gap: 2px;
        width: 100%;        
    }    
}



@media only screen and (max-width: 500px){
    main {
        display: grid;
        grid-template-columns: auto;  
        margin: auto;  
        width: 75%;    
    }

    .right {
        margin-left: 5rem;
        
    }

    .section-two > img {
        width: 95%;
    }
}