:root {
  --shadow-col:#000A;
  --shadow-lt-col:#0006;
  --border-col:#AAA;
  --opacity-col:#AAA0;

}

* {
  box-sizing: content-box;
}

body {
  margin:0;
}

header {
  position: relative;
}

.main-container {
  display: flex;
  position:relative;
  margin:0;
}

.main-pan {
  position: relative;
  width:70%;
  left:20%;
  z-index: 1;
  margin:1em 0;
  background: white;
  border-left: 6px ridge;
  border-right: 6px ridge;
  border-top: 6px ridge;
  border-bottom: 6px ridge;
  border-color: var(--border-col);
  border-radius:1em;
  padding: 1em 2em;
}

.photo-pan {
  position: absolute;
  z-index: -1;
  height: 100%;
  width:100%;
  overflow:hidden;
  object-fit:cover;
}

h2 {
  line-height: 1.4;
  margin-block-start: 0.5;
  margin-block-end: 0.5;
  margin:0.5em 0;
}


h3 {
  font-weight: normal;
  line-height: 1.4;
  margin-block-start: 0;
  margin-block-end: 0;
  margin:0.4em 0;

}

.main-pan div {
  font-weight: normal;
  line-height: 1.3;
  margin:0.3em 0;
}


.portrait {
  position:relative;
  float:right;
  width:300px;
  max-width:40%;
  object-fit:contain;
  margin: 0.5em;
  z-index: 2;
  box-shadow: 3px 3px 3px 2px var(--shadow-col);
  transition: all 1s;
}

.portrait:hover {
  transform: scale(1.1);
  box-shadow: 10px 10px 6px 4px var(--shadow-col);
}

.logo-sm {
  position: relative;
  height:3em;
  width:3em;
  vertical-align:middle;
  margin: 0.5em 1.4em 0.5em 1em;
}

.logo-sm-h {
  position: relative;
  height:3em;
  vertical-align:middle;
  margin: 0.5em 0.3em 0.5em 0.3em;
}

[class|="logo-sm"] {
  z-index: 2;
  box-shadow: 2px 2px 1px 2px var(--shadow-col);
  transition: all 1s;
}

[class|="logo-sm"]:hover {
  transform: scale(1.5);
  box-shadow: 3px 3px 2px 1px var(--shadow-col);
}


.hd-lr {
  position: relative;
  animation: 2s ease-out 0.2s 1 normal both;
  animation-name: h-mv-lr, shd-rise;
}

.hd-rl {
  position: relative;
  animation: 2s ease-out 0.2s 1 normal both;
  animation-name: h-mv-rl, shd-rise;
}

.main-pan h3,
.main-pan img,
.main-pan div {
  animation: 1.2s ease-out 0.8s 1 normal both;
  animation-name: reveal;
}

.main-pan {
  animation: 1s ease 1s 1 normal both;
  animation-name: reveal-brd;
}

.photo-pan {
  animation: 2s ease 1.5s 1 normal both;
  animation-name: reveal;
}



.photo-pan > .c-img {
  width:100%;
  height:100%;
  overflow:hidden;
}


.c-img>img {
  object-fit: cover;
  animation: 30s ease 5s 5 normal both;
  animation-name: bk-anm;
}



@keyframes h-mv-lr {
  0% {left:-55vw;}
  40% {left:0;}
}

@keyframes h-mv-rl {
  0% {right:-55vw;}
  40% {right:0;}
}

@keyframes shd-rise {
  40% {text-shadow: initial;}
  100% {text-shadow: 2px 2px 3px var(--shadow-lt-col);}
}

@keyframes reveal {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes reveal-brd {
  0% {border: 6px ridge var(--opacity-col);}
  100% {border: 6px ridge var(--border-col);}
}

@keyframes bk-anm {
  0% {transform: scale(110%) translate(-3%, 0%);}
  50% {transform: scale(110%) translate(3%, -2%);}
  100% {transform: scale(110%) translate(-3%, 0%);}
  
}