/* Imports */
@import url('https://fonts.googleapis.com/css?family=Oswald|Pacifico|Kavivanar');

/* Global rules */
/* Elements */
html {}
body {}
h1,h2,h3,h4,h5,h6 {}
a {color: white !important;}
a:hover {color: seashell !important;}

/* IDs */
#twitch-embed {text-align: center;}

/* Classes */
.header {background-color: #4c4e51;}
.header-title {color: whitesmoke;}
.header-title h1 {font-family: "Pacifico", cursive; font-size: 72px; text-align: center; margin: 0; padding: 35px;}
.header-title p {font-size: 10px; text-align: right; margin: 1px; color: #63666b}

.footer {font-family: "Oswald", sans-serif; background-color: #4c4e51; padding: 20px; position: sticky; width: 100%; bottom: 0;}
.footer p {font-size: 20px; color: white; text-align: center; padding: 5px;}
.footer a {color: white; text-decoration-color: white; text-decoration-line: none;}
.footer a:hover {color: white;}

.main-section {position: relative; background-size: 100%; background-image: url("tracks.jpg"); background-color: black; padding: 30px 5px;}
.main-section-about {
    position: relative;
    background-size: 100%;
    background-image: url("tracks.jpg");
    background-color: black;
    padding: 30px 5px;
}
.main-background {border-radius: 25px; padding: 25px;}
.main-background h2 {font-family: "Kavivanar", cursive; position: relative; font-size: 54px; color: white; text-align: center;}
.main-background h3 {
    font-family: "Kavivanar", cursive;
    position: relative;
    color: white;
    text-align: center;
}
.main-background h4 {
    font-family: "Kavivanar", cursive;
    position: relative;
    color: white;
    text-align: center;
}
.main-background p {font-family: "Kavivanar", cursive; position: relative; font-size: 36px; color: white; text-align: center;}
.main-background-text a {
    color: #ff9999 !important;
}

.about-background h2 {position: relative; font-size: 24px; color: white;}
.about-background p {position: relative; font-size: 20px; color: white;}

.nav-pills .nav-link {font-size: 24px; background-color: #f08080 !important; border-radius: 0 !important; border-style: solid; border-width: 2px; border-color: black;}
.nav-link a {font-family: "Oswald", cursive; font-size: 30px; color: white; text-decoration-color: white;}
.nav-link a:hover {background-color: #efa0a0 !important; text-decoration-color: white;}
a:hover.nav-item.nav-link {background-color: #efa0a0 !important; text-decoration-color: white;}
a.nav-item.nav-link {font-family: "Oswald", cursive; font-size: 30px;}

/*Media queries*/
@media (min-width: 768px){
    .main-section {padding: 50px 10px;}
    .main-section-about {padding: 30px 5px;}
}
@media (min-width: 992px){
    .main-section {padding: 70px 10px;}
    .main-section-about {padding: 50px 10px;}
}
@media (min-width: 1200px){
    .main-section {padding: 124px 200px;}
    .main-section h2 {text-align: center;}
    .main-section h3 {text-align: center;}
    .main-section-about {padding: 90px 125px;}
}