@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 300;
    src: local("Roboto Light"),local("Roboto-Light"),url(fonts/Roboto-300.woff2) format("woff2"),url(fonts/Roboto-300.woff) format("woff"),url(fonts/Roboto-300.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"),local("Roboto-Regular"),url(fonts/Roboto-400.woff2) format("woff2"),url(fonts/Roboto-400.woff) format("woff"),url(fonts/Roboto-400.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"),local("Roboto-Medium"),url(fonts/Roboto-500.woff2) format("woff2"),url(fonts/Roboto-500.woff) format("woff"),url(fonts/Roboto-500.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Bold"),local("Roboto-Bold"),url(fonts/Roboto-700.woff2) format("woff2"),url(fonts/Roboto-700.woff) format("woff"),url(fonts/Roboto-700.ttf) format("truetype");
}

@font-face {
    font-family: 'BrushScriptMT';
    src: url('fonts/BrushScriptMT.woff2') format('woff2'),
        url('fonts/BrushScriptMT.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

html, body {
    background-color: #363640;
    color: rgba(255,255,255,0.6);/*#DDDDDD;*/
    font-weight: 400;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    line-height: 1.2857;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4 { 
    color: #DDDDDD;
    color: rgba(255,255,255,0.6);
    color: #1C94D0;
    color: #D3714A;
    color: #5B64E3;
    color: #EC7E31;
}

#websiteLogo {
    margin:10px 20px; 
    float: left; 
    color: #DDDDDD;
    color: #1C94D0;
    font-family: 'BrushScriptMT', cursive;
    font-size:7em; 
}

#pageRegularContent {
    max-width: 1400px;
    padding: 10px;   
}

fieldset{ 
    border:2px solid #515158;
}

.eventGrid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    padding:1em; 
    justify-items: center;
    text-align: center;
}

.eventTitle {
    text-align: center;
}

#timeslotContent {
    max-width: 750px;
    margin: 0 auto;
    padding: 10px;
    border: 1px #FFF solid;
}

a {
    color: #cddc39;
    text-decoration: none;
}
  
    a:hover {
      text-decoration: underline;
    }

#navbar {
    background-color: #363640;
    overflow: hidden;
}

#navbarMenuItems {
    margin-top: 50px;
}

    /* Style the links inside the navigation bar */
    #navbarMenuItems a {
        color: #cddc39;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 20px;
        font-weight: normal;
        font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    }

        /* Change the color of links on hover */
        #navbarMenuItems a:hover {
            background-color: #cddc39;
            color: black;
        }

        /* Add a color to the active/current link */
        #navbarMenuItems a.active {
            background-color: #4CAF50;
            color: white;
        }

#navbar {
    background-color: #363640;
    overflow: hidden;
}

    /* Style the links inside the navigation bar */
    #navbar a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 20px;
        font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    }

        /* Change the color of links on hover */
        #navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Add a color to the active/current link */
        #navbar a.active {
            background-color: #4CAF50;
            color: white;
        }

.movedPageMessage {
    margin: 0 auto;
    width: 50%;
    text-align: center;
}