@font-face {
  font-family: 'Orpheus';
  font-style: normal;
  font-weight: normal;
  src: url('Orpheus-Pro.otf') format('truetype');
}

* {
}

:root {
    --side-color-active:white;
    --side-color-inactive:rgba(255, 255, 255, 0.3);
    --glavna-barva:#d69b43;
}

body {
    font-family: "Quicksand", sans-serif;
    background-color: #fdf6ed;
    /*background-image: url("paper-texture-cream.png"); 556156*/
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: "Orpheus";
    color: #d69b43;
}

h1 {
    margin-top: 50px;
    text-align: center;
}

h2 {
    font-size:17px;
}

.roze {
    bottom: 0;
    left: 28%;
    height: 50%;
  position: fixed;
}
.roze > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: invert(48%) sepia(79%) saturate(50%) hue-rotate(86deg) brightness(120%) contrast(80%);
}

.header {
    z-index: 1;
  text-align: center;
  padding: 0px;
  font-size: 40px;
  position: fixed;
  margin: auto;
  top:0;
  background-color: transparent;
  width: 100%;
  height: 200px;
}

.header > h1 {
    font-family: "Orpheus", sans-serif;
    font-size: 100px;
    margin-top:0px;
    margin-bottom:25px;
    padding-top: 30px;
}

.header > h3 {
    font-family: "Orpheus", sans-serif;
    margin-top: -45px;
    font-size: 40px;
}

.side {
    position: absolute;
    text-align: justify;
    width: 40%;
    padding: 6% 6% 6% 6%;
  margin: 0px;
  top: 25%;
  right: 5%;
  background-color: #fefefe;
  border-radius: 150px 150px 0 0;
    border-style: solid;
    border-color: var(--glavna-barva);
    border-width: 2px;
    color: #333333;
  //box-shadow: inset 0 0 100px 0px rgba(50, 25, 0, 0.05), 0px 0px 10px 0px rgba(50, 25, 0, 0.2);
  //box-shadow: -5px 0px 10px 5px rgba(50, 25, 0, 0.10);
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

ul{
    list-style-position: inside;
    text-align:left;
    padding-left:10%;
    font-size:17px;
}

.center {
    font-size:20px;
    text-align: center;

}

        #mainDialog {
            max-width: 400px;
            margin: 5px;
            border: solid #AAAAAA 0px;
            border-radius: 10px;
            box-shadow: 3px 3px 5px 3px #AAAAAA;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            text-align: left;
  background-color: rgba(255,255,255,1);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  border:0px;
  box-shadow: inset 0 0 10px -5px rgba(50, 20, 0, 0.3), 1px 1px 5px 0 rgba(50, 20, 0, 0.3);
        }
        #mainDialog > * {
            padding: 10px 30px;
	    text-align:left;
        }
	#passwordPrompt{
	    text-align:left;
	}
        #passArea {
            padding: 20px 30px;
        }
        #passArea > * {
            margin: 5px auto;
        }
        #pass {
            width: 100%;
            height: 20px;
            font-size: 18px;
	    border:0px;
	    border-bottom: 1px solid black;
	    background-color: rgba(255,255,255,0.0);
        }
        
        #messageWrapper {
        }
        
        .notifyText {
            display: none;
        }
        
        #invalidPass {
            color: red;
        }
        
        #submitPass {
            font-size: 17px;
            border-radius: 0px;
            border: solid gray 0px;
            /*float: right;*/
            cursor: pointer;
	    background: transparent;
        }
        #vsebina {
        }
        .error {
            display: none;
            color: red;
        }
	
.slideshow {
    width: 60%;
    position: fixed;
    left:0;
    top: 13%;
  height: 95%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  display: flex;
  gap: 4vw;
}

/* transition on :hover only so it doesn’t fire when opening a #permalink */
.slideshow:hover {
  scroll-behavior: smooth;
  /* `auto` for no transition on click/tab */
}

.slideshow figure {
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 80%;
  align-items: center;
  justify-content: center;
}

.slideshow figure a {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.slideshow a img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.slideshow a:focus-visible {
    outline: 0;
}

/* Prev / Next */

.slideshow a:before,
.slideshow a:after {
  z-index: 2; /* cover the current image <a> */
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 4vw); /* 50vw + 4vw gap */
}

.slideshow a:before {
  left: calc(-1 * calc(50% + 4vw));
}

.slideshow a:after {
  right: calc(-1 * calc(50% + 4vw));
}

.slideshow :first-child a:before,
.slideshow :last-child a:after {
  display: none;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .header, .slideshow, .side {
      width: 100%;
      position:static;
  }

  .side{
      padding: 10%;
  }

  .header{
      top:-100px;
  }
}