@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@300&family=Lora&family=Tinos&display=swap');

@media screen and (min-width: 768px) and (min-width: 360px), (max-width: 1280px) {
   .main {
       margin: auto;}
   body {
       margin: auto;}
}

body {
   width: 1315px;
   height: 635px;
   overflow: hidden;}

.main {
   position: relative;
   overflow: auto;
   margin-top: 0;
   margin-left: 265px;
   padding: 1em;}

.container {
   background-image: cover;
   position: relative;
   text-alignment: center;
   overflow: hidden;}

.centered {
  position: absolute;
  top: 30%;
  left: 51.5%;
  text-align: center;
  transform: translate(-50%, -50%);}

.bottom-center {
   position: absolute;
   text-align: center;
   top: 45%;
   left: 38.5%;
   bottom: 80px;
   font-family: Lora;
   font-size: 35px;}

.bottom-centera {
   position: absolute;
   text-align: center;
   top: 50%;
   left: 38%;
   bottom: 80px;
   font-family: Lora;
   font-size: 35px;}

.social-links {
  background-color: inherit;
  width: 40px;
  height: 40px;
  margin: 5px;}

.social-links a {
  display: block;
  margin: 5px;}

.social-links a:hover {
  margin-right: 2px;}

.right {
   position: relative;
   text-align: center;
   top: 66%;
   left: 39%;
   bottom: 157px;
   right: 85%;}

.left {
   position: relative;
   text-align: center;
   top: 68%;
   left: 39%;
   bottom: 156px;
   right: 85%;}