body {
    width: 100vw;
    height: 100vh;
    background-color: #000;
position: relative;
color: #fff;
}

a {
    text-decoration: none;
}


.header {
    width: 100vw;
    height: 10%;
    font-family: 'Karla';
    font-size: 60px;
    padding: 10px;
    margin-top: 60px;
}



@keyframes image {
    0% { 
        opacity: 0;
    }

    10% { 
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
    
}




.image {
    width: 50vw;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    opacity: 1;
    animation: image 5s linear 1;
    transition: 0.5s;
    z-index: -1;

}

.smallimage {
    width: 10vw;
    padding: 10px 0px 10px 10px;}

.image-noanim {
  width: 50vw;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;

}



.subheading{
    font-family: 'Karla';
    font-size: 32px;
    padding: 10px;
    width: 10%;
    height: 5%;
}

.copy{
    font-family: 'Karla';
    font-size: 22px;
    padding: 10px;
    width: 30%;
    height: 5%;
}
.userinfo {
    color: #A2D3D1;
}

 

.button {
    width: 20%;
    height: 5%;
    margin: 50px 10px 10px 10px;
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
    display: block;

}

.button:hover {
    background: #fff;
    border: 1px solid black;
    color: black;
}

.image:hover {
    opacity: 1;
}

.light-mode {
    background-color: #fff;
    color: #000;
    }

.dark-mode {
        background-color: #000;
        color: #fff;
        }

        #darkbulb, #darkmail {
            display: none;
        
                }

#whitebulb:hover, #darkbulb:hover,   #whitemail:hover ,#darkmail:hover  {

    opacity: 1;

}

        #whitebulb,#darkbulb,#whitemail,#darkmail{
            width: 50px;
padding: 10px;   
position:fixed;
top: 0px;
opacity: 0.7;
cursor: pointer;
  }

  #whitemail,#darkmail {
    right: 0px;
  }
  #popup, #responsebox {
    min-width: 300px;
    min-height: 300px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    color:#000; 
    display: none;
  }

  #responsebox {
  display:block;
}


  .topbar {
    text-align: right;
    font-family: 'Karla';
    padding: 0.25vh;
  }

  .close {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .bodytext {
    padding-left: 3vh;
    font-family: 'Karla';
    font-size: 18px;

  }

  .message{
    padding-left: 3vh;
    margin: 0 20px 50px 0;
    font-family: 'Karla';
    font-size: 18px;

  }

  form {
    padding: 3vh;
    font-family: 'Karla';
    font-size: 18px;
  }

  input[type=button], input[type=submit] {

    font-family: 'Karla';
    font-size: 18px;
    background-color: #000;
    color:#fff;
    padding: 2vh;
    margin-top: 10px;
    width: 300px;
    border: none;


  }

  .backbutton {
    font-family: 'Karla';
    font-size: 18px;
    background-color: #000;
    color:#fff;
    padding: 2vh;
    width: 200px;
    border: none;
display:block;
margin: 0 auto;  }

@media only screen and (max-width: 600px) {

  .button {

    width: 90vw;
    margin-top: 80px;
  }

  .image {
    top: 25%;
    Left: 60%;
  }
    
    .smallimage {
        width: 28vw;
    }
    
    .header {
        font-size: 42px;
    }

}