.open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
@viewport {
    width: device-width ;
    zoom: 1.0 ;
}
  
h1 {
    color: rgb(96, 170, 226);
}

h2 {
    margin-bottom: 0px;
}
#date-text {
    margin-top: 0px;
}
body {
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #151516;
    color:#fff;
    font-family: "Open Sans";
}

#container {
    width:80vw;
}

img {
    width:45%;
    margin-right: 5px;
}

#img-container {
    display: flex;
    /* justify-content:space-evenly; */
    flex-direction:row;
}

#text {
    margin-left:5px;
    padding-left:10px;
}

@media screen and (max-width:640px) {
    #img-container {
        flex-direction: column;
    }
    img {
        width: 100%
    }
}

@media screen and (min-width:640px) and (min-height:1000px) and (max-width:1200px){
    #img-container {
        flex-direction: column;
    }
    img {
        width: 100%
    }
}

#caption {
    color: rgb(8, 109, 146)
}

#form p {
margin-bottom: 5px;
}
input {
    border: 2px solid rgb(96, 170, 226);
    border-radius: 4px;
    width: 45%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: transparent;
    color: white;
    color-scheme: dark;
  }
  

input:focus {
    border: 3px solid rgb(8, 109, 146)
  }

  button {
    background-color: rgb(96, 170, 226);;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    border-radius: 4px;
    /* padding: 12px 20px; */
    /* margin: 8px 0; */
  }