/* standard selectors */

.inline {
    display: inline;
}

.inlineblock {
    display: inline-block;
}

.block {
    display: block;
    padding: 5px;
    margin: 10px;
}

.flex {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1;
}

/** {
    outline: 2px solid red;
}*/


/* end standard selectors */

html {
    scroll-behavior: smooth
}

body {
}

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(20px + 1vw);
}

@font-face {
    font-family: reviewfont;
    src: url(./files/Noteworthy-Lt\ 2.ttf);
}

@font-face {
    font-family: cute;
    src: url(./files/Cutewritten-Regular.ttf);
}

@font-face {
    font-family: hpsf;
    src: url(./files/HPSimplified.ttf);
}

@font-face {
    font-family: hpsfrg;
    src: url(./files/HPSimplified_Rg.ttf);
}

.scrollText{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: hpsfrg;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.scrollText,
.emptyText {
    text-align: center;
    margin-top: 0;
    font-family: hpsfrg;
    text-align: center;
}

.maincontent {
    margin-top: 40px;
    padding: 10px;
    display: flex;
    justify-content: center;
    padding-left: calc(30vw - 150px);
    padding-right: calc(30vw - 150px);
}

.header2 {
    display: flex;
    z-index: 2;
    margin-top: 100vh;  /* This ensures it appears just after the first viewport */
    justify-content: center;
    width: 100%;
    font-size: 2vw;
    position: sticky;
    top: 3vh;
    font-size: 2vw;
}

.header {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    display: flex;
    justify-content: center;
    align-content: center;
}

.header video{
    max-width: 1000px;
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.reviewcontent {
    margin-left: 5px;
    margin-right: 5px;
}

.header {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function:ease-out;
    animation-duration: 2s;
}

.scrollText,
.emptyText {
    font-size: 100%;
    opacity: 0;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function:ease-out;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.fadeIn{
    opacity: 0;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function:ease-out;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.fadeOut{
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 1s;
    animation-fill-mode:both;
}


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

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

.name {
    display: inline-block;
    font-weight: 800;
    padding: 1px;
    content: ;
    padding-left: 6px;
    padding-right: 6px;
    /*border: 3px solid rgb(71, 71, 71);
    border-radius: 10px;
    margin-top: 10px;*/
}

.reviewcontent .text {
    font-family: cute;
    width: (600px, 60vw);
    align-self: center;
    display: flex;
    flex-direction: column;
    font-size: calc(50px - 0.6vw);
}

.header2 > * {
    background-color: white;
    text-decoration: none;
    color: black;
}

.box {
    border: 2px solid grey;
    border-radius: 0.5em;
    box-shadow: 2px;
    filter: drop-shadow(1px 2px 3px black);
    font-family: hpsfRg;
}

.userInput{
    font-size: calc(15px + 0.5vw);
    outline-color: rgb(207, 207, 207);
    border-radius: 0.4em;
}

.inputContainer{
    position: absolute;
    padding: 0px;
}

.heightenForm{
    height: 200px;
}

#inputBottom{
    display: flex;
    flex: 1;
}

#sendExperience{
    font-size: calc(15px + 0.5vw);
    width: 50%;
    height: 100%;
    height: 28px;
    border-radius: 0.4em;
    margin: 1px 6px 0px 6px;
    display: flex;
    justify-content: center;
    font-family: hpsfRg;
}

#experienceInput{
    min-height: calc(3vw);
    width: max(15vw + 200px, 320px);
    margin: 6px 6px 0px 6px;
    padding: 3px;
    border: none;
}

#nameInput{
    border: 1px solid rgb(207, 207, 207);
    margin: 0px 6px 6px 6px;
    height: 26px;
    width: 100%;
}


#nameInput::placeholder {
    font-size: 20px;
    text-align: left;
}

.userInput::placeholder {
    text-align: center;
    vertical-align: middle;
    font-size: calc(22px + 0.9vw);
    padding: 0.1em 0.18em 0.1em 0.18em;
    font-size: max(calc(2vw + 6px), 32px0);
}





.whitetext {
    font-size: 1px;
    color: white;
}

.footerbox {
border: 2px solid rebeccapurple;
}

.footer {
    display: flex;
    flex:1;
    justify-content: space-between;
    margin: 5%;
    padding-bottom: 12px;
    align-items:flex-end
}

a {
    font-size: calc(15px + 0.5vw);
    text-decoration: none;
    color: black;
}

.button{
    display: flex;
    align-items: center;
    border: 2px solid rgb(207, 207, 207);
    vertical-align: top;
    padding: 3px 10px 3px 10px;
    border-radius: 0.4em;
}

.input{
    border: 2px solid rgb(207, 207, 207);
    vertical-align: top;
    padding: 3px 10px 3px 10px;
    border-radius: 0.4em;
}

#buttonPiet{
    font-size: calc(15px + 0.5vw);
    text-decoration: none;
    color: black;
}

  /* Dynamic HSL Rainbow Animation */
  @keyframes dynamic-rainbow {
    0% {
      background-color: hsl(0, 100%, 50%);
    }
    50% {
      background-color: hsl(180, 100%, 50%);
    }
    100% {
      background-color: hsl(360, 100%, 50%);
    }
  }
  
  .rainbow {
    animation: dynamic-rainbow 5s linear infinite; /* Increased duration */
  
    /* Cross-Browser Compatibility */
    -webkit-animation: dynamic-rainbow 5s linear infinite;
    -moz-animation: dynamic-rainbow 5s linear infinite;
    -o-animation: dynamic-rainbow 5s linear infinite;
  }