* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: bold;
}

html {
  min-height: 100%;
}

.title {
  color: orangered;
}

body {
/*   font-family: 'Space Mono', monospace; */
/* font-family: 'proxima-nova', sans-serif; */
/* font-family: 'Montserrat', sans-serif; */
/* font-family: monospace; */
/*     font-family: 'Montserrat', sans-serif; */

    font-family: 'Varela Round', sans-serif;
  background: linear-gradient(to right, transparent, rgba(28, 38, 62, 0.7)),
  linear-gradient(to top, transparent, rgba(62, 28, 28, 0.7)),
  linear-gradient(to bottom, transparent, rgba(62, 28, 28, 0.7)),
  linear-gradient(to left, transparent, rgba(62, 28, 28, 0.7)),
  url("../img/bg.jpg") no-repeat center bottom;
  background-attachment: fixed;
  background-size: cover;
  /* background-repeat: no-repeat; */
  overflow-x: hidden;
  animation: initialFadein 2s;
}

.project {
    animation: initialFadein 1s;
}


@keyframes initialFadein {
  0% {
      opacity: 0;
  }
  20% {
      opacity: 0;
  }
  100% {
      opacity: 100%;
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
* {
  -ms-overflow-style: none;
}

#background {
  /* background-image: url("img/bg.jpg") no-repeat center bottom; */
  min-height: 100%;
  min-width: 1024px;
	
  width: 100%;
  height: auto;
	
  position: fixed;
  top: 0;
  left: 0;
}

#copyright {
  position: absolute;
  bottom: 1em;
  left: 50%; /* position the left edge of the element at the middle of the parent */

  transform: translateX(-50%);
  font-size: 50%;
  opacity: 0.5;
  
  color: orangered;
}

#copyright:hover {
  opacity: 1;
}

/* @media screen and (max-width:990px) {
  #copyright {
    left: 10%;
  }
} */



.normalSection p {
  color: var(--p-text-color);
}

a {
  color: var(--menu-text-color);
}

a:hover {
  color: var(--menu-text-hover-color);
}

table {
    border-collapse: separate;
/*     border-spacing: 0 32px; */
    table-layout: fixed;
    width: 100%;
}

/*details > div > table {
    table-layout: fixed;
    max-width: 80%;
}*/

td {
/*     text-align: center; */
    vertical-align: text-top;
}

img {
  max-width: 80%;
  max-height: 95vh;
  /* display: inline; */
  margin: 1%;
}


.normalSection {
  margin: 2% auto;
  width: 99%;
  text-align: center;
}

/* .normalSection h1 {
  color: var(--p-text-color);
  letter-spacing: 0.25em;
  font-size: 200%;
  text-align: center;
} */







:root {
  --contentHeight: 30vh;
}

/** {
  outline: 0;
  box-sizing: border-box;
}*/

/*body {
  background-color: #000;
}*/

section, summary > h1 {
/*   margin: 40px auto; */
/*   width: 97%; */
  color: var(--menu-text-color);
}

details {
    width: 100%;
}

summary {
  display: block;
  cursor: pointer;
  padding: 10px;
  font-size: 22px;
  transition: .3s;
  border-bottom: 1px solid;
  user-select: none;
  margin: 0% 1%;
  /* color: var(--p-text-color); */
  /* color: var(--menu-text-color); */
}

details[open] > summary:hover, details[open] > summary > h1:hover, summary:hover, summary > h1:hover {
  color: var(--menu-text-hover-color);
}



details > div {
/*  display: flex;
  flex-wrap: wrap;*/
/*   overflow: auto; */
  height: 100%;
  user-select: none;
  padding: 0 20px;
  line-height: 1;
}

details > div > img, details > div > video {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 20px;
}

/*details > div > p {
  flex: 1;
}*/

details[open] > summary, details[open] > summary > h1 {
   color: orangered;
}

@media (min-width: 768px) {
  details[open] > div > p {
    opacity: 0;
    animation-name: showContent;
    animation-duration: 0.6s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    margin: 0;
/*     padding-left: 20px; */
  }

  details[open] > div {
    animation-name: slideDown;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }

  details[open] > div > img, 
  details[open] > div > p > img, 
  details[open] > video,
  details[open] > div > video,
  details[open] > div > p > video,
  details[open] > div > table > tr > td > img
  {
    opacity: 0;
    height: 100%;
    margin: 0;
    animation-name: showImage;
    animation-duration: 0.3s;
    animation-delay: 0.15s;
    animation-fill-mode: forwards;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    height: 0;
    padding: 0;
  }

  to {
    opacity: 1;
    height: 100%;
    padding: 0 20px;
  }
}

@keyframes showImage {
  from {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes showContent {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.iframe_div {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
  
  /* Then style the iframe to fit in the container div with full height and width */
  .responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  }