.comic-relief-regular {
	  font-family: "Comic Relief", system-ui;
	  font-weight: 400;
	  font-style: normal;
	}

	.comic-relief-bold {
	  font-family: "Comic Relief", system-ui;
	  font-weight: 700;
	  font-style: normal;
	}
/*	@font-face{
		font-family: "Andy";
		src: url("Andy.ttf");
	}*/
	body {
                background-image:url("background-glt.jpg");
                background-attachment: fixed;
                color:white;
                font-family: "Comic Relief";
                }
        button {
                background-color: rgba(0,0,0,0.8);
                border: none;
                color: #fff;
                border-radius: 8px;
                font-size: 20px;
                cursor: pointer;
		font-family: inherit;
        }
        .center {
                margin-left: auto;
                margin-right: auto;
                text-align: center;
        }
        .submitButton {
                display:flex;
                flex-direction:column;
                margin-left:20px;
                font-size: 20px;
                /*align: left;*/
                border: 1px solid rgba(255,255,255,0.6);
        }
        /* Sidebar Div */
        .columnDiv {
                color: #fff;
                width: 30%;
                /*padding-right: 20px;*/
                background-color: rgb(20, 20, 20, 0.8);
                float: right;
                outline: black;
                position: fixed;
                right: 0px;
                bottom: 0px;
                top: 54px;
                overflow-wrap: break-word;
                overflow-y: auto;
        }
        /* Div header */
        .columnHead {
                padding: 0 0 10px 10px;
            }
        /* Div links */
        .columnText {
                font-size: 14px;
                color: #fff;
                display: block;
                padding: 12px;
                padding-right: 15px;
                padding-left: 15px;
                text-decoration: none;
                outline: none;
                white-space: pre-line;
        }
        .columnOpen {
                margin: 1px 1px 1px 1px;
                display:none;
                position: fixed;
                top: 21px;
                right: 21px;
        }
	.mainDiv {
                margin-top: 54px;
                display: flex;
                justify-content: center;
                align-items: center;
        }
        .topBar {
                color: #fff;
                width: 100%;
                background-color: rgba(0,0,0,1);
                height: 54px;
                position: fixed;
                top:0;
                margin: 0;
/*              border: 1px solid rgba(255,255,255,0.2);*/
        }
        .topBar a {
                color: #fff;
                text-decoration-line: none;
                padding: 14px;
                font-size: 20px;
                text-align: center;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                }
        .topBar a:hover {
                background-color:gray;
                }
        .topBar button {
                color: #fff;
                text-decoration-line: none;
                padding: 13px;
                font-size: 20px;
                text-align: center;
                display: block;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius:0px;
        }
        .topBar button:hover {
                background-color:gray;
                }
	.yt-vid {
		width:50%;
	}
	@media (max-width: 600px) {
	.yt-vid {
		width:80%;
	}
	}