:root{
    --font-family: "Pixelify Sans", sans-serif;
}

body{
    background-image: url(table.webp);
    color: white;
    margin: 0;
}
header, main{
    font-family: var(--font-family);
    background-color: blue;
}
#welcomesign{
    color: white;
    font-size: x-large;
    margin-left: 5vw;
}

h2{
    margin-left: 7vw;
}

#downloadbutton{
    background-color: white;
    font-family: var(--font-family);
    font-size: large;
    color: blue;
    border-radius: 16px;
    height: 60px;
    width: 300px;
    margin-right: 5vw;
    margin-top: 30px;
    animation-name: movement;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

    @keyframes movement {
        0%{scale:1}
        50%{scale:1.1}
        100%{scale:1}
    }

#firsttext{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

form{
    margin-left: 12vw;
    font-size: x-large;
}

input{
    margin-bottom: 5vh;
}

input[type="radio"]{
    margin-bottom: 0;
}


#sendformular{
    background-color: white;
    font-family: var(--font-family);
    color: blue;
    border-radius: 16px;
    height: 30px;
    width: 200px;
}

.formular{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.watchingtext{
    margin-top: 0;
    opacity: 0;
    font-size: medium;
}

.watchingtext:hover{
    opacity: 1;
    transition: opacity 0.7s;
    cursor: none;
}

.yestext{
    margin-top: 0;
    opacity: 0;
    font-size: medium;
}

.yestext:hover{
    opacity: 1;
    transition: opacity 0.7s;
    cursor: none;
}


#scp1471-image{
    height: 60vh;
    width: 25vw;
    margin-right: 10vw;
    opacity: 0;
}

#scp1471-image:hover{
    opacity: 0.5;
    transition: opacity 0.9s;
}

aside{
    color: black;
    background-color: black;
}

.notes{
  margin-top: 2vh;
  height: 95vh;
  width: 30vw;
  min-width: 100px;
  background-color: white;
  justify-self: center;
  overflow-y: scroll;
}

.notes p{
  margin-left: 15px;
  margin-right: 15px;
}

.notes h1{
  margin-left: 15px;
  color: red;
}

.notes h2{
  margin-left: 15px;
  margin-bottom: 10px;
}
.headofnote{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media screen and (max-width: 1200px) {
.notes{
  position: absolute;
  z-index: 1;
  width: 80vw;
  }

#firsttext{
    flex-direction: column-reverse;
}

#downloadbutton{
    align-self: center;
}
}