/*
COLORS WOT USED
Dark magenta: #6E1A37
Light magenta: #AE2448
Pale blue: #72BAA9
Offwhite: #D5E7B5

*/

body {
  background-color: #3B3B3B;
  font-family: "Georgia";
  margin: 15px auto;
  width: 1000px;
  justify-content: center;
}

.mainsection {
  border: 1px;
  border-color: #FFF;
}

/* ---------------------------- Header Title Area ------------------- */
header {
  background-color: #6E1A37;
  color: #D5E7B5;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

header h3 {
  margin: 15px;
  padding: 15px;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}



/* ------------------------------ Top Menu Bar ---------------------- */

/* Style the topnav */
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #777;
  overflow: hidden;
  font-family: system-ui, tahoma, sans-serif;
}

ul.topnav li {
  float: right;	
}

ul.topnav li.leftside {
  float: left;
}

/* Style links in topnav */
ul.topnav li a {
  display: block;
  color: #FFF;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a.imglink {
  display: block;
  padding: 0;
  text-decoration: none;
}


/* Change color on hover */
ul.topnav li a:hover {
  background-color: #AE2448;
  color: #C0C0C0;
}

/* Image formatting */
ul.topnav li img {
  width: 40px;
  height: 40px; 
  padding: 0;  
  margin: 0 0 0 20px;
}


/* Changes menu bar to vertical stack if resolution lower than 600px */
@media screen and (max-width: 600px) {
  ul.topnav li.leftside, 
  ul.topnav li {float: none;}
}

/* ----------------------------- Main Body ----------------------- */

div.flex-container {
  display: flex;
  /* Show the flex items horizontally */
  flex-direction: row;
  background-image: url("bg-static.png");
  background-color: #151515;
  color: #969696;
  float: left;
  font-family: system-ui, tahoma, sans-serif;
  margin: 0 0 25px 0;
}

div.flex-container a {
  color: #72BAA9;
  text-decoration: none;
  border-bottom: dashed;
}

div.flex-container a:hover {
  color: #AE2448;
  text-decoration: none;
  border-bottom: solid;
}

div.flex-container > .column-left {
  margin: 40px;
  width: 75%;
}

div.flex-container > .column-left h2 {
  margin: 10px;
  color: #AE2448;
}

div.flex-container > .column-left strong {
  color: #72BAA9;
}

div.flex-container > .column-right {
  margin: 40px 40px 40px 10px;
  width: 25%;
}

div.flex-container > .column-right p {
  margin: 10px;
  font-size: 11px;
}

div.flex-container > .column-right strong {
  color: #72BAA9;
}


/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
  div.flex-container {
    flex-direction: column;
  }
}

/* ----------------------- Corner box code ----------------- */

/* SOURCE: https://stackoverflow.com/questions/14387690/how-can-i-show-only-corner-borders ---- */
.box-left {
  --b: 5px;   /* thickness of the border */
  --c: #AE2448;   /* color of the border */
  --w: 20px;  /* width of border */
  

  border: var(--b) solid #0000; /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
  padding: 0 10px 10px 10px;
}
  
.box-right {
  --b: 5px;   /* thickness of the border */
  --c: #AE2448;   /* color of the border */
  --w: 20px;  /* width of border */
  

  border: var(--b) solid #0000; /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
  padding: 0 10px;
  /*Irrelevant code*/ 
/*  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  text-align:center;
*/
}

/* ------------------ Footer ------------------------------ */


.footer {
  background-color: #777;
  text-align: left;
  padding: 0 0 15px 15px;
  margin: 0px;
  color: #FFF;
  font-size: 11px;
  font-family: system-ui, tahoma, sans-serif;
}

div.footer strong {
  color: #000;
}