@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@300&display=swap');

body {
	background: #9fbeb6;
	font-family: "VT-100", fixedsys, System, monospace;
	font-size: 15px;
	margin-top: 2.5vw;
	color: #0b4384;
  }
  
.sidebar-image, .footer, .box, .links-box, .inner-image, .image {
  margin-top: 25px;
  }

 .inner-links {
	font-size: 12pt;
	border: 1.5px solid black;
	background: #93cbd9; /*light blue background*/
	padding: 0.25em;
 }

.inner ul {
	list-style: disc;
	text-align: left;
}

.title h1 {
	font-size: 34pt;
	font-style: bold;
}	

center {
  text-align: center;
  }

a, a:visited {
	color: #2a3aca;
}

.main-title a, a:visited {
	color: #0621db;
}

.title a, a:visited {
	color: #0621db;
}
 
 .main-title, .title, .footer {
  width: 100%;
  font-style: bold;
  text-align: center;
  column-span: all;
  color:  #000000;
  }

.box, .links-box {
  background:  #49b35b ;
  border-radius: 5px;
  border: 1px solid #1b7119;
  box-shadow: 2px 2px #11520f;
  }
 
 .box {
  margin: auto;
  margin-top: 25px;
  width: 70vw;
  }
  
 .box-title-bar {
  background: #3ca34e ;
  color: #063974;
  font-weight: bold;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  }
  
  .right {
  float: right;
  margin-right: 5px;
  font-family: "Arial", sans-serif;
  line-height: 12px;
  }
  
.inner {
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 0px;
  }


/*Prevent image overflow.*/
.box, .image img {
  max-width: 100%;
  height: auto;
  }

.sidebar img {
	width: 100%;
	display: block;
}

/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 28vw;
  }
  
.footer {
  margin-bottom: 25px;
  }

 .column {
	 display: flex;
	 flex-wrap: wrap;
}

.image-grid {
	flex: 50%;
	max-width: 50%;
}

video, .image-grid img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width: 98%;
}

@media(max-width: 480px) {
  .wrapper {
    width: 100%;
    }
 
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    margin-top:25px;
    }

  .sidebar .sidebar-image .inner-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }
  
@media(max-width: 984px){
	.image-grid{
		flex: 100%;
		max-width: 100%;
	}
	
	.box {
		width: 80vw;
	}
	
	.main {
		columns: 1;
	}
	
	.main img {
		max-width: 100%;
	}
}