	.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;
	}
        .elms-sans-<uniquifier> {
          font-family: "Elms Sans", sans-serif;
          font-optical-sizing: auto;
          font-weight: <weight>;
          font-style: normal;
        }

	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;
                border: 1px solid rgba(255,255,255,0.6);
        }
         .columnDivCyan {
                color: #fff;
                width: 15%;
                /*padding-right: 20px;*/
                background-color: rgb(20, 20, 20, 0.8);
                float: right;
                outline: black;
                position: fixed;
                left: 0px;
                bottom: 0px;
                top: 54px;
                overflow-wrap: break-word;
                overflow-y: auto;
                scrollbar-width:thin;
                direction:rtl;
       }
		.columnDivCyan img {
			max-width:100%;
		}
        .columnDiv {
                color: #fff;
                width: 15%;
                /*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;
                scrollbar-width:thin;
		}
		.columnDiv img {
			max-width:100%;
		}
        /* Div header */
        .columnHead {
                padding: 0 0 10px 10px;
                direction: ltr;

            }
        /* 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;
			    direction: ltr;

        }
        .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;
                margin-left: 15%;
        }
        .topBar {
                color: #fff;
                width: 100%;
                background-color: rgba(0,0,0,1);
                height: 54px;
                position: fixed;
                top:0;
                margin: 0;z
/*              border: 1px solid rgba(255,255,255,0.2);*/
        }
		.columnDiv h1 {
			    font-size: 26px;
		}
		.columnDivCyan h1 {
				font-size: 26px;
		}
        .topBar a {
                color: #fff;
                text-decoration-line: none;
                padding: 0px 14px 0px 14px;
                font-size: 20px;
                text-align: center;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
			    height:54px;
                }
        .topBar a:hover {
                background-color:gray;
                }
        .topBar button {
                color: #fff;
                text-decoration-line: none;
                height:54px;
                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%;
        }
        .topBar a {
                padding: 0px 10px 0px 10px;
                font-size: 15px;
                }
        .topBar button {
                font-size: 15px;
        }
        .columnDivCyan {
                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;
                left: 70%;
                top: 51%;
                overflow-wrap: break-word;
                overflow-y: auto;
                border-right: none;
                border: 4px solid gray;
                direction:ltr;
        }
        .columnDiv {
                color: #fff;
                width: 30%;
                left: 70%;
                /*padding-right: 20px;*/
                background-color: rgb(20, 20, 20, 0.8);
                float: right;
                outline: black;
                position: fixed;
                right: 0px;
                bottom: 49%;
                top: 54px;
                overflow-wrap: break-word;
                overflow-y: auto;
                border: 4px solid gray;
        }
        .mainDiv {
                margin-top: 54px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left:0px;
        }
}
