:root {
  --backgroundimage: url("sov_images/lightsbg.jpg");
  --bodyborders: #201f49;
  --bodybackground: linear-gradient(to bottom, #cae0fa, #dbedf3);
  --headerbgcolor: #cae0fa;
  --pcolor: #201f49;

  --link: #305183;
  --linkhover: #3c87b9;
  --linkvisited: #305183;
  --linkvisitedhover: #3c87b9;
  --linkactive: #3c87b9;


/* STUFF IN NAV BAR*/
  --navheadercolor: #201f49;
  --navheadershadow: #6d77b4;

  --bonkcolor: #201f49;
  --bonktext: #cae0fa;
  --bonkhovercolor: #305183;
  --bonkhovertext: #fcffff;

  --naviconsbordercolor: #305183;
  --naviconsborderhover: #3c87b9;

/* STUFF IN MAIN*/
  --mainheadercolor: #fcffff;
  --mainheadershadow: #6d77b4; 
  --mainheaderbgcolor: #201f49;
  --mainheaderbordercolor: #6d77b4;

  --infocardtext: #201f49;
  --infocardheader: #305183;
  --infocardborders: #e9f6f8;

  --aboutheaderline: #383775;

  --gallerybgcolor:  rgba(19, 19, 31, 0.6);
  --gallerybutton: #fcffff;
  --closefocus: #6d77b4;
  --prevnextbghover: rgba(19, 19, 31, 0.9);
  --prevnextcolorhover: #6d77b4;}

* {box-sizing: border-box;}
pre {margin: auto;}
body {
  background-image: var(--backgroundimage);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;}
p {
  color: var(--pcolor);  
  font-size: 17px;
  font-family: Georgia, 'Times New Roman', Times, serif;}
h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;}
a:link {
  color: var(--link);
  background-color: transparent;
  text-decoration: none;}
a:hover {
  color: var(--linkhover);
  background-color: transparent;
  text-decoration: none}
a:visited {
  color: var(--linkvisited);
  background-color: transparent;
  text-decoration: none;}
a:visited:hover {
  color: var(--linkvisitedhover);
  background-color: transparent;
  text-decoration: none;}
a:active { 
  color: var(--linkactive);
  background-color: transparent;
  text-decoration: none;}
.bonk {
  background-color: var(--bonkcolor);
  color: var(--bonktext);
  width: 86%;
  text-align: center;
  font-size: 18px;
  border-radius: 3px;
  margin: 5px;
  padding-top: 5px;
  padding-bottom: 7px;
  transition-duration: 0.4s;
  margin-left: 7%;
  /*display: inline-block;*/}
.bonk:hover {
  background-color: var(--bonkhovercolor);
  color: var(--bonkhovertext);}
details {
  color: var(--pcolor);  
  font-size: 22px;
  text-align: left;
  line-height: 1.40;
  margin-left: 6px;}
ul {
  color: var(--pcolor);
  font-size: 19px;
  list-style-type: none;
  text-align: left;}
li:before {
  content: '✦';
  color: var(--pcolor);
  font-style: normal;
  padding-right: .5ch;}
.jail {
  outline-style: dashed;
  outline-color: rgb(255, 255, 255);
  outline-width: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
  max-width: 190px;}
.container {
  max-width: 1300px;
  display: grid;
  grid-gap: 30px;
  margin-left:auto;
  margin-right: auto;
  position: relative;
  grid-template:
    "header header header"
    "nav main main"}
/* STUFF IN HEADER */
header {
  grid-area: header;
  margin-top: 20px;
  font-size: 11px;
  background: var(--headerbgcolor);
  outline-style: solid;
  outline-color: var(--bodyborders);
  outline-width: 5px;
  outline-offset: -5px;
  font-family: Georgia, 'Times New Roman', Times, serif;}
.headerp {
  color: var(--pcolor);  
  padding-top: 0px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 0px;
  text-align: center;
  line-height: 1.5;
  font-size: large;
  font-family: Georgia, 'Times New Roman', Times, serif;}
/* STUFF IN NAV BAR */
nav {
  grid-area: nav;
  font-size: 11px;
  background: var(--bodybackground);
  outline-style: solid;
  outline-color: var(--bodyborders);
  outline-width: 5px;
  outline-offset: -5px;
  width: 245px;
  height: fit-content;
  font-family: Georgia, 'Times New Roman', Times, serif;}
.navheader {
  color: var(--navheadercolor);
  text-shadow: 1px 1px var(--navheadershadow);
  text-align: center;
  font-size: 30px;
  transition: transform 0.5s ease;}
.navheader:hover {
  transform: scale(1.02);}
.navimg {
  margin-top: -10px;
  padding-bottom: 10px;
  margin-left: 5%;
  transition: transform 0.5s ease;}
.navimg:hover {
  transform: scale(1.02);}
.navul {
  margin-left: -20px;
  margin-top: -1px;
  font-style: italic;}
.navicons {
  outline-style: solid;
  outline-color: var(--naviconsbordercolor);
  outline-width: 2px;
  outline-offset: -1px;
  margin: 8px;
  transition: transform 0.2s ease;}
.navicons:hover {
  transform: scale(1.02);
  outline-color: var(--naviconsborderhover);
  outline-style: solid;}
/* STUFF IN MAIN */
main { 
  grid-area: main;
  background: var(--bodybackground);
  outline-style: solid;
  outline-color: var(--bodyborders);
  outline-width: 5px;
  outline-offset: -5px;
  margin-bottom: 40px;
  margin-bottom: 60px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-align: center;}
.mainpadding {padding: 25px;}
.mainheader {
  background-color: var(--mainheaderbgcolor);
  color: var(--mainheadercolor);
  outline: 3px solid var(--mainheaderbordercolor);
  text-shadow: 1px 1px var(--mainheadershadow);
  margin: auto;
  outline-offset: -8px;
  overflow: hidden;
  padding: 20px;
  border-radius: 5px;
/*overflow: hidden;
border-bottom: 2px solid #201f49; */}
.aboutheader {
  color: var(--navheadercolor);
  border-bottom: 2px solid var(--aboutheaderline);
  font-size: 20px;
  text-shadow: 1px 1px var(--navheadershadow);
  text-align: left;
  padding-top: 10px;
  margin: auto;}
.mainp { 
  line-height: 1.5;
  text-align: left; 
  padding-left: 10px;
  padding-right: 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;}
/* INFOCARD */
.infocard {
  color: var(--infocardtext);
  font-size: 16px;
  margin: auto;
  margin-top: 20px;
  width:90%;
  border-collapse: collapse;}
.infocard img{
  max-width: 100%;
  margin: auto;
  /*border-left:4px solid var(--infocardborders)*/}
.infocard th {
  color: var(--infocardheader);  
  text-align:left;
  font-size: 16px;
  padding-left: 8px;
  width: 35%;}
.infocard tr{
  border-bottom: 2px solid var(--infocardborders);
  text-align: left;}
tr:last-child {border: none;}
.mainul {
  margin-left: -10px;
  line-height: 1.4;
  font-size: 17px;
  margin-top: -5px;
  text-indent: -2ch;}
.mainul li {padding-bottom: 5px;}
/* GALLERY */
.column { /* Create two equal columns that floats next to each other */
  float: left;
  width: 25%;
  padding: 10px;}
.column img {
  margin-top: 12px;}
.row:after { /* Clear floats after the columns */
  content: "";
  display: table;
  clear: both;}
/* MODAL STUFF */
.modal { /* modal background */
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--gallerybgcolor);}
.modal-content { /* modal content but it's coconut.jpg*/
  background-color: none;}
.bigimages { /* lowkey lightbox */
  position: absolute;
  display: flex;
  background: var(--bodybackground);
  margin: auto;
  padding: 20px;
  max-height: 80vh;
  position: absolute; /*orig relative*/
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  outline-style: solid;
  outline-color: var(--bodyborders);
  outline-width: 5px;
  outline-offset: -3px;}
.bigimages img {
  display: block;
  max-height:80vh;}
.gallerytext {
  text-align: left;
  line-height: 1.5;
  font-size: 16px;
  float: right;
  position: relative;
  padding-left: 20px;
  width: 30vw;}
.galleryheader {
  color: var(--navheadercolor);
  text-shadow: 1px 1px var(--navheadershadow);
  margin: auto;
  outline-offset: -8px;
  text-align: center;}
.gallerytinyp {
  text-align: center;
  font-size: 12px;
  font-style: italic;
  margin-top: 0px;}
.close { /* modal close button */
  color: var(--gallerybutton);
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;}
.close:hover,
.close:focus {
  color: var(--closefocus);
  text-decoration: none;
  cursor: pointer;
  transition: 0.6s ease;}
.mySlides { /* to hide the slides by default */
  display: none;}
.prev, /* next and prev buttons */
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: var(--gallerybutton);
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;}
.prev { /* Position the "prev button" to the left */
  left: 0;
  border-radius: 0 3px 3px 0;}
.next { /* Position the "next button" to the right */
  right: 0;
  border-radius: 3px 0 0 3px;}
.prev:hover, /* arrow hover */
.next:hover {
  background-color: var(--prevnextbghover);
  color: var(--prevnextcolorhover);}
img.hover-shadow {
  transition: 0.5s;}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(25, 23, 124, 0.2), 0 6px 20px 0 rgba(0, 31, 99, 0.19);
transform: scale(1.02);}
img.hover-drop {
  transition: 0.5s;}
.hover-drop:hover {
filter: drop-shadow(0px 6px 6px rgba(25, 23, 124, 0.4));
transform: scale(1.02);}