:root {
  --bg-dark: #0c16aa;
  --bg-light: #5072cd;
}

body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  
  background-image: url("bg_blue.jpg");
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-color: #365ca4;  
  color: white;
  font:
    1em/130% "OCR A Std", monospace;
    
    /*1em/150% "Arial Narrow",*/
    /*sans-serif;*/
  font-style: oblique;
  /*font-stretch: ultra-expanded;*/
}

.someHeader {
    height: 30px;
}

img {
  display: block;
  margin: auto;
  max-width: 70%;
  }

h2, legend {
  font-size: 1.7em;
  color: hsla(0,0%,0%,0);
  text-shadow: #fff 0 0 3px, #fcffbb 0 0 20px;
  transform: rotateY(-40deg);
}

h3 {
  font-size: 1.3em;
  color: hsla(0,0%,0%,0);
  text-shadow: #fff 0 0 3px, #fcffbb 0 0 20px;
  transform: rotateY(-40deg);
}

.inside-link {
  text-decoration: none;
  font-size: 1.5em;
  color: hsla(0,0%,0%,0);
  text-shadow: #fff 0 0 3px, #fcffbb 0 0 20px;
  transform: rotateY(-40deg);
}

.normal-text {
  color: inherit;
  text-decoration: underline;
  }
  
.normal-text:hover {
  color: inherit;
  text-decoration: none;
  }
  
.normal-text-nolink {
  color: inherit;
  /*text-decoration: underline;*/
  }

ol {
  padding-left: 2rem;
  list-style-type: none;
}

ol li {
  padding-left: 2rem;
  background-image: url("star_symbol_small.svg");
  background-position: 0 0;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
}


/**/
/**/
/**/
/**/
/**/

/*about me*/

.grid-container-abt{
  display: grid;
  grid-template-columns: 300px 500px 300px;
  grid-template-rows: 300px;
  gap: 7em;
  justify-items: center;
  align-items: center;
  justify-content: center;
  grid-template-areas:
  "box-1 box-2-abt box-3";
}

.item-abt{
  border: 1px solid;
  font-size: 1em;
  padding: 30px;
  border-color: hsla(0,0%,100%,0.3);
  
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15.6px);
  -webkit-backdrop-filter: blur(15.6px);
}

@media(max-width: 56em){
  .grid-container-abt{
    grid-template-columns: 300px;
    grid-template-rows: 300px 300px 300px;
  
    grid-template-areas:
    "box-2-abt"
    "box-1"
    "box-3";
    }
  }


/**/
/**/
/**/
/**/
/**/

/*music video*/

.grid-container-mv{
  display: grid;
  grid-template-columns: 500px 500px 500px;
  align-items: center;
}

.item-mv{
  border: 1px solid;
  font-size: 1em;
  padding: 30px;
  border-color: hsla(0,0%,100%,0.3);
  
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15.6px);
  -webkit-backdrop-filter: blur(15.6px);
}


th, td {
    border-left:solid 1px;
    border-top:solid 1px;
    border-color: hsla(0,0%,100%,0.3);
 }
 
 table {
   width: 80%;
   max-width: 1000px;
   border: 1px solid;
   
   border-collapse:separate;
   
   border-color: hsla(0,0%,100%,0.3);
   background: rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(15.6px);
   -webkit-backdrop-filter: blur(15.6px);
}

th {
  text-decoration: none;
  font-size: 1.3em;
  padding: 10px;
  text-align: left;
  border-top: none;
}

td {
  text-decoration: none;
  font-size: 1em;
  padding: 10px;
  text-align: left;
}

td:first-child, th:first-child {
     border-left: none;
}


/**/
/**/
/**/
/**/
/**/

/*gallery*/


.nav-ga {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-ga li {
  float: left;
  width: 9em;
}

.nav-ga li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0.2px 30px;
  text-decoration: none;
  opacity: 0.2;
}

.nav-ga li a:hover {
  opacity: 1.0;
}

#main {
  border: 1px solid;
  font-size: 1em;
  padding: 30px;
  border-color: hsla(0,0%,100%,0.3);
  
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15.6px);
  -webkit-backdrop-filter: blur(15.6px);
  
  max-width: 80%;
  /*transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;*/
  }
  
#main > .panel {
			/*-moz-transition: opacity 0.25s ease-in-out;*/
			/*-webkit-transition: opacity 0.25s ease-in-out;*/
			/*-ms-transition: opacity 0.25s ease-in-out;*/
			/*transition: opacity 0.25s ease-in-out;*/
			margin-bottom: 0;
			position: relative;
			padding: 3.5em 2.5em 2.5em 2.5em;
			width: 100%;
			
		}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 80%;
  padding: 0 1px;
}

.column img {
  margin-top: 10px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


































/**/
/**/
/**/
/**/
/**/

/*gallery*/

/*.grid-container-gal{*/
/*  display: grid;*/
/*  grid-template-columns: auto 1fr;*/
/*}*/

/*#sidebar{*/
/*  box-sizing: border-box;*/
/*  width: 250px;*/
  /*padding: 10px 0.5em;*/
  
/*  border: 1px solid;*/
/*  font-size: 1em;*/
/*  border-color: hsla(0,0%,100%,0.3);*/
  
/*  background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 16px;*/
/*  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(15.6px);*/
/*  -webkit-backdrop-filter: blur(15.6px);*/
  
  /*position: sticky;*/
  
/*  }*/
  
/*#sidebar ul{*/
/*  list-style: none;*/
/*  }*/
  
/*#sidebar ul li.active a{*/
/*  color: black;*/
/*  }*/
    
/*#sidebar a, #sidebar .dropdown-btn{*/
/*  border-radius: .5em;*/
/*  padding: .85em;*/
/*  text-decoration: none;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 1em;*/
/*  color: inherit;*/
/*  }*/
  
/*#sidebar .dropdown-btn{*/
/*  width: 100%;*/
/*  text-align: left;*/
/*  background: none;*/
/*  font: inherit;*/
/*  cursor: pointer;*/
  
/*  border: 1px solid;*/
/*  font-size: 1em;*/
  /*padding: 30px;*/
/*  border-color: hsla(0,0%,100%,0.3);*/
  
  /*background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 16px;*/
/*  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(15.6px);*/
/*  -webkit-backdrop-filter: blur(15.6px);*/
/*  }*/

/*#sidebar svg{*/
/*  flex-shrink: 0;*/
/*  fill: white;*/
/*  }*/
  
/*#sidebar a span, #sidebar .dropdown-btn span{*/
/*  flex-grow: 1;*/
/*  }*/
  
/*#sidebar a:hover, #sidebar .dropdown-btn:hover{*/
/*  background-color: rgba(255, 255, 255, 0.1);*/
/*  }*/
  
/*#sidebar .sub-menu{*/
/*  display: grid;*/
/*  grid-template-rows: 0fr;*/
/*  transition: 300ms ease-in-out;*/
  
/*  > div{*/
/*    overflow: hidden;*/
/*    }*/
/*  }*/
  
/*#sidebar .sub-menu.show{*/
/*  grid-template-rows: 1fr;*/
/*  }*/
  
/*.rotate svg:last-child{*/
/*  rotate:180deg;*/
/*  }*/

/*.container-gal{*/
/*  border: 1px solid;*/
/*  font-size: 1em;*/
/*  padding: 30px;*/
/*  border-color: hsla(0,0%,100%,0.3);*/
  
/*  background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 16px;*/
/*  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(15.6px);*/
/*  -webkit-backdrop-filter: blur(15.6px);*/
/*  }*/

























/*.grid-container-gal{*/
/*  display: grid;*/
/*  grid-template-columns: 200px 700px;*/
/*  grid-template-rows: 300px;*/
/*  gap: 7em;*/
  /*justify-items: center;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*grid-template-areas:*/
  /*"box-1-gal box-2-gal";*/
/*}*/

/*.item-gal{*/
/*  border: 1px solid;*/
/*  font-size: 1em;*/
/*  padding: 30px;*/
/*  border-color: hsla(0,0%,100%,0.3);*/
  
/*  background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 16px;*/
/*  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(15.6px);*/
/*  -webkit-backdrop-filter: blur(15.6px);*/
/*}*/

/*@media(max-width: 56em){*/
/*  .grid-container-abt{*/
/*    grid-template-columns: 300px;*/
/*    grid-template-rows: 300px 300px 300px;*/
  
/*    grid-template-areas:*/
/*    "box-2-abt"*/
/*    "box-1"*/
/*    "box-3";*/
/*    }*/
/*  }*/



















/* The side navigation menu */
/*.sidebar {*/
/*  margin: 0;*/
  /*padding: 0;*/
/*  width: 200px;*/
/*  background-color: #f1f1f1;*/
  /*position: fixed;*/
  /*height: 100%;*/
/*  overflow: auto;*/
  
/*  border: 1px solid;*/
/*  font-size: 1em;*/
/*  padding: 10px;*/
/*  border-color: hsla(0,0%,100%,0.3);*/
  
/*  background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 16px;*/
/*  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(15.6px);*/
/*  -webkit-backdrop-filter: blur(15.6px);*/
/*}*/

/* Sidebar links */
/*.sidebar a {*/
/*  display: block;*/
/*  color: black;*/
/*  padding: 16px;*/
/*  text-decoration: none;*/
/*}*/

/* Active/current link */
/*.sidebar a.active {*/
/*  background-color: #04AA6D;*/
/*  color: white;*/
/*}*/

/* Links on mouse-over */
/*.sidebar a:hover {*/
/*  background-color: #555;*/
/*  color: white;*/
/*}*/

/* Links on mouse-over */
/*.sidebar a:hover:not(.active) {*/
/*  background-color: #555;*/
/*  color: white;*/
/*}*/

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
/*div.content {*/
/*  margin-left: 200px;*/
  /*padding: 1px 16px;*/
  /*height: 1000px;*/
  
/*  border: 1px solid;*/
/*  font-size: 1em;*/
/*  padding: 10px;*/
/*  border-color: hsla(0,0%,100%,0.3);*/
  
/*  background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 16px;*/
/*  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(15.6px);*/
/*  -webkit-backdrop-filter: blur(15.6px);*/
/*}*/

/* On screens that are less than 700px wide, make the sidebar into a topbar */
/*@media screen and (max-width: 700px) {*/
/*  .sidebar {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    position: relative;*/
/*  }*/
/*  .sidebar a {float: left;}*/
/*  div.content {margin-left: 0;}*/
/*}*/

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
/*@media screen and (max-width: 400px) {*/
/*  .sidebar a {*/
/*    text-align: center;*/
/*    float: none;*/
/*  }*/
/*}*/