:root {
    --grey: #f5f5f5;
    --dark-grey: #333;
    --light-grey: #f9f9f9;
    --blue: #007bff;
    --dark-blue: #0056b3;
    --light-blue: #4d94ff;
    --red: #dc3545;
    --dark-red: #bd2130;
    --light-red: #e4606d;
    --green: #28a745;
    --dark-green: #218838;
    --light-green: #34d058;
    --yellow: #ffc107;
    --dark-yellow: #d39e00;
    --light-yellow: #ffca28;
    --orange: #fd7e14;
    --dark-orange: #e85a19;
    --light-orange: #ff9f0a;
    --purple: #6f42c1;
    --dark-purple: #5a3e8c;
    --light-purple: #7e5be8;
    --pink: #e83e8c;
    --dark-pink: #bd185d;
    --light-pink: #f66d9b;
    --cyan: #17a2b8;
    --dark-cyan: #117a8b;
    --light-cyan: #2cb6d6;
    --white: #fff;
    --black: #000;
    --yrrah: #31A8FF;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-grey);
    overflow-x: hidden;
}

.header {
    background-color: var(--yrrah);
    color: var(--white);
    padding: 1rem;
    text-align: center;
    width: 98vw;
    margin: 0 auto;
    line-height: 10%;
}

.title {
    line-height: 100%;
    color: var(--white);
    font-size: 2rem;
    margin: 0 auto;
}

.text {
    color: var(--white);
    text-align: center;
    padding: 1rem;
}

.text-link {
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
}

.main, .upcoming, .past {
    width: 98vw;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.image {
    width: 10%;
    height: auto;
    margin: 0 auto;
}

.footer {
    position: fixed;
    bottom: 0;
    line-height: 15%;
    background-color: var(--yrrah);
    color: var(--white);
    padding: 1rem;
    text-align: center;
    width: 98vw;
    margin: 0 auto;
}

.disc-iframe {
    width: 35vw;
    height: 75vh;
}