@import url('reset.css');
@import url('navigation.css');
@import url('typography.css');
@import url('colour.css');
@import url('layout.css');
@import url('breakpoints.css');

/* Section padding */
section {
    padding: 5rem 2rem;
}

/*Hero Banner Section*/

.heroTextBanner {
    clip-path: polygon(0% 0%, 75% 0%, 80% 100%, 75% 100%, 0% 100%);
    background-color: #FF3700;
    height: 4vw;
    width: 100vw;
    padding-left: 3rem;
    margin-top: -5rem;
    display: flex;
    align-items: center;
    border-right: 1rem solid transparent;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;

}

.heroImg {
    margin: 0;
    padding: 0;
    width: 100%;
}

/*Home Page Classes*/
/* Home intro section */
.homeintro {
    padding: 0rem 2rem 2rem 2rem;
}

/* Home about */
.homeAbout {
    background-image: linear-gradient(#FF3700, black, #FF3700);
}

.homeabouttext {
    padding: 2rem 0;
}

.homeaboutimg {
    width: 100%;
    border: 2px solid white;
}

/* Home sign up */
.homesignup {
    background-color: black;
}

.whitebox {
    background-color: white;
    padding: 3em;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.homesignupbutton {
    background-color: #A1A1A1;
    font-size: 1.5rem;
    padding: 1rem;
    color: white;
}

.homesignupbutton:hover {
    background-color: #FF3700;
    font-size: 1.5rem;
    padding: 1rem;
    color: white;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Home contact */
.homecontactbutton {
    background-color: black;
    font-size: 1.5rem;
    color: #FF3700;
    padding: 1rem;
}

.homecontactbutton:hover {
    background-color: #FF3700;
    font-size: 1.5rem;
    color: white;
    padding: 1rem;
}

/* About Page */
.aboutintro{
    padding: 2rem;
}

.aboutpastevents{
    padding: 2rem;
}

.aboutsfinfo{
    background-color: #FF3700;
}

/* Past events cards */

.WMG {
    background-image: url('../Images/Lol_Worlds_promo.jpeg');
}

.CC {
    background-image: url('../Images/Cosplay_contest.jpg');
}

.AE {
    background-image: url('../Images/Thresh.jpg');
}

/* About SF Grid */
.SFsplash {
    background-image: url('../Images/Soul_Fighter_Splash.jpg');
}

.SFarena {
    background-image: url('../Images/SF_Arena.png');
}

.SFgame {
    background-image: url('../Images/Soul_Fighter.jpg')
}

.aboutseeyouinthering {
    background-color: white;
    display: flex;
}

.ringimg {
    width: 100%;
}

.aboutsignupbutton {
    background-color: #FF3700;
    border: none;
    padding: 1rem;
    font-size: 3rem;
    color: white;
}

.aboutsignupbutton:hover {
    background-color: black;
    border: none;
    padding: 1rem;
    font-size: 3rem;
    color: #FF3700;
}
/* Sign up Page */
.signupintro {
    padding: 2rem;
}

.signupsection {
    background-image: url('../Images/Blood_black_Grid.png');
    background-position: center;
    padding: 10rem 5rem;
}

.signupform {
    background-color: #E3E3E3;
    padding: 1rem;
}

select {
    height: 2rem;
    width: 100%;
    padding: 8px;
    border: none;
}

input [type=checkbox] {
    width: 1rem;
    height: 1rem;
    border: black;

    /*Change the background colour of your checkbox*/
    accent-color: orange;
}

.signupsubmitbutton {
    background-color: #FF3700;
    color: white;
    border: 0;
    padding: 1rem;
    font-family: Jaro, sans-serif;
    font-size: 2rem;
}

.signupsubmitbutton:hover {
    background-color: black;
    color: #FF3700;
    border: 0;
    padding: 1rem;
    font-family: Jaro, sans-serif;
    font-size: 2rem;
}
/* Contact Page */
.contactform {
    background-color: #E3E3E3;
    padding: 1rem;
}

input[type=text], input[type=email] {
    height: 2rem;
    width: 100%;
    padding: 8px;
    border: none;
}

input[type=text]:hover {
    background-color: #ffded5;
}

input[type=text]:focus {
    outline-color: red;
}

label {
    font-family: Inter, sans-serif;
}

.contactsubmitbutton {
    background-color: #FF3700;
    color: white;
    border: 0;
    padding: 1rem;
    font-family: Jaro, sans-serif;
    font-size: 2rem;
}

.contactsubmitbutton:hover{
    background-color: black;
    color: #FF3700;
    border: 0;
    padding: 1rem;
    font-family: Jaro, sans-serif;
    font-size: 2rem;
}
/* Laptop */
@media screen and (max-width: 1080px) {    
    .signupsection {
        padding: 10rem 5rem;
    }
}

/* Tablet */
@media screen and (max-width: 768px) {    
    .heroTextBanner {
        height: 10vw;
        padding: 1rem;
        margin-top: -3.5rem;
    }   
    
    .herotext {
        font-size: 2.5rem;
    }

    .gbox {
        height: 30vh;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .signupsection {
        padding: 5rem 2rem;
    }
}

/* Mobile */
@media screen and (max-width: 540px) {
    .heroTextBanner {
        height: 10vw;
        padding: 1rem;
        margin-top: -3rem;
    }

    .herotext {
        font-size: 1.75rem;
    }
    
    .gbox {
        height: 20vh;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .signupsection {
        padding: 5rem 2rem;
    }
}