body{
	margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
	background-image: url(assets/aboutusbackground.png);
	background-color: #00309C;
}

@font-face { font-family: dogica; font-weight: regular; src: url("assets/typeface/dogica.otf"); }
@font-face { font-family: VGA; font-weight: regular; src: url("assets/typeface/Perfect DOS VGA 437.ttf"); }
@font-face { font-family: alagard; font-weight: regular; src: url("assets/typeface/alagard.ttf"); }

.txtDiv{
	grid-column-start: 1;
	grid-row-start: 1;
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	margin-right: 30%;
	margin-left: 10%;
	margin-top: 10%;
}


#move{
	top: 33%;
	z-index: 999;

}

#title{
	top:  52px;
	left: 38%;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	font-family: alagard;
	font-size: 76px;
	color: yellow;
	text-shadow: 5px 5px indianred;
}

#vid {
	grid-column-start: 2;
	margin-top: 15px;
	margin-bottom: 15px;
}

.images {
	grid-column-start: 2;
	display: flex;
	flex-direction: row;;
	justify-content: space-around;
	margin-top: 15px;
	margin-bottom: 15px;
}

#tile{
	position: 0 0;
	z-index: 1;
	width: 100%;
}

.collapsible {
  font-family: VGA;
  background-color: blue;
  border: 2px solid blue;
  background-image: linear-gradient(
  #0052d6,
  #4589f7
  	 );
  border-radius: 15px 15px 15px 15px;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 99%;
  border:2px solid blue;
  text-align: left;
  outline: blue;
  font-size: 24px;
  z-index: 10;
  text-shadow: 2px 2px purple;
}

.collapsible:after {
	content: url(assets/cancel-icon.png) ;
	float: right;
	margin-left: 5px;
}

#gridDiv{
	display: grid;
	grid-template-columns: 50% 50%;
}


#container{
	top:  200px;
	left: 8px;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	font-family: dogica;
	font-size: 15px;
}

.active, .collapsible:hover {
	border-radius: 15px 15px 0px 0px;
	border-color:#1564EC ;
}



.content {
	border: 2px solid blue;
	padding:  0 18px;
	display: none;
	overflow: hidden;
	background-color: #ece9d8 ;
	border-color:#1564EC;
	z-index: 10;
	width: 97%;
	line-height: 2;
	letter-spacing: .5;
}

@media only screen and (max-width: 800px) {
    body {
        transform: scale(.55);
        transform-origin: 0 0;
        margin: 0;
        padding: 0;
        width: 181.82%; /* Compensates for the scale transformation */
        position: absolute;
        left: 0;
    }

    #gridDiv {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .txtDiv {
        grid-column: 1;
        margin: 10% 5%;
        width: 90%;
        font-size: 13px;
    }

    #container {
        position: absolute;
        top: 200px;
        left: 0;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .collapsible {
        width: 100%;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        box-sizing: border-box;
    }
}