:root {
    color-scheme: light;
}

 html {
    height: 100%;
    max-height: 100%;
    min-height: 100%; 
    /* background: url(imgs/banner-img.svg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; */
    /* background-color: #b4ecff; */
    background-color: #b4ecff;
    } 
/*         184f78 blue color               */




/* @media only screen and (max-height: 600px) {
    div.topMain {
        font-size: 7vh;
      }
      div.bottomMain {
        font-size: large;
      }
} */

/* img {
    border-radius: 15px;
} */
h2{
text-align: center;
margin-block-start: 10px;
margin-block-end: 10px;
}

.topMain { 
    display: flex;
    text-align: center;
    flex-grow: 1;
    flex-direction: row;
    max-height: 10vh;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 20px;
    margin-right: 20px;
    justify-content: space-between;
    align-items:center;
    color: white;
    font-size: 4vh;
    min-height: 10vh;
    max-height: 10vh;
    text-shadow: 1px 1px 1px #456234;
    /* font-weight: bold; */
    /* text-shadow: 2px 2px 9px lightgray; */
}


.middleMain {
    display: flex;
    text-align: left;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    border-radius: 25px;
    border-width: 2px;
    flex-grow: 2;
    margin-top: 0px;
    overflow-y:auto;
    margin-bottom: 0px;
    border-radius: 10px;
    padding: 20px;
    padding-top: 0px;
    /* box-shadow: 5px 5px 12px darkgray; */
    /* font-weight: bold; */
    font-size: 4.0vh;
    text-shadow: 1.5px 1.5px 1.5px #000000;
    color: white;
    /* overflow: auto;
    white-space: nowrap; */
    
}
.postMain {
    display: flex;
    text-align: left;
    justify-content: start;
    align-items: stretch;
    flex-direction: column;
    flex-grow: 2;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    overflow-y: auto;
    overflow-x: none;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
    /* box-shadow: 5px 5px 12px darkgray; */
    /* font-weight: bold; */
    font-size: 3.2vh;
    text-shadow: 1px 1px 1px #000000;
    color: white;
    /* overflow: auto;
    white-space: nowrap; */
    
}
.bottomMain {
    display: flex;
    /* flex-grow: 1; */
    justify-content: space-between;
    align-items: stretch;
    color:#ffffff;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: normal;
    /* overflow-x: auto; */
    /* font-size: x-large; */
}
.votingBox {
    display: flex;
    /* flex-grow: 1; */
    justify-content: space-evenly;
    align-items: stretch;
    color:#ffffff;
    font-weight: normal;
    /* overflow-x: auto; */
    /* font-size: x-large; */
}
.midLeftView {
    display: flex;
    flex-grow: 1;
    padding: 10px;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
}

.contentView {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
    align-items: stretch;
    flex-direction: column;
    text-align: center;
    color: white;
    padding: 5px;
    border-radius: 7px;
}

.contentView2 {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000;
    text-shadow: 0px 0px 0px #000000;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    overflow-x: none;
}
.midMidView {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: stretch;
    
      /* padding: 20px; */
}
.logfields {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: stretch;
    /* margin-left: 30px; */
    
      /* padding: 20px; */
}
.midRightView {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: stretch;
    padding: 2px;
    max-width: 50px;
    background-color: whitesmoke;
}
.MidViewItemsMain {
    flex-grow: 1;
    font-weight: bold;
    font-size: 3.5vh;
    color: #ffffff;
    /* background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  text-shadow: 2px 2px 15px #638f31;
}
/* A Sirius Company Page  1 */

.middle1 {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: stretch;
    /* margin-left: 20px; */
    flex-grow: 2;
    margin-bottom: 0px;
    /* margin-left: 30px;
    margin-right: 30px; */
    
}
.MidViewItems1 {
    flex-grow: 1;
    color:white;
    font-weight: bold;
    font-size: x-large;
    flex-direction: column;
    justify-content: flex-end; 
  
     /*  text-shadow: 2px 2px 15px lightgray; */
}

.midImage1 {
    max-height: 17vh;
    max-width: 10vh;
}

/* Utopyism Page 2 */

.middle2 {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: stretch;
    border-radius: 20px;
    border-width: 2px;
    flex-grow: 2;
    /* background-image: url('imgs/Utopyism.png'); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    box-shadow: 5px 5px 12px darkgray;
    
}

.socials {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px;
}

.socialimage {
    padding-left: 0px;
    width: 50px;
    border-radius: 7px;
    height: 50px;
    /* background-color: #1C1C1E; */
    box-shadow: 2px 2px 9px #638f31;
}
.midImages {
    max-height: 52vh;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 2px 2px 9px lightgray;
}

.topTitleImage {
    max-height: 20vh;
    max-width: 35vw;

}
p {
    display: block;
    margin-block-start: 10px;
    margin-block-end: 10px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-indent: 1em;
}
.midButts {
    border-radius: 5px;
    border-width: 2px;
    flex-grow: 1;
    /* box-shadow: 5px 5px 12px #b78402; */
    background-color: #28615c;
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
    margin-right: 5px;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; 1c5b7e */
    
}
.options {
    border-radius: 5px;
    border-width: 2px;
    flex-grow: 1;
    /* box-shadow: 3px 3px 7px #b78402;  */
    background-color: #b78402;
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
    margin-right: 5px;
    width: 70%;
    text-decoration: none;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; 1c5b7e */
    
}
.profilebut {
    border-radius: 5px;
    border-width: 2px;
    flex-grow: 1;
    /* box-shadow: 5px 5px 12px #313131;
    background-color: #1c5b7e; */
    margin-top: 5px;
    margin-bottom: 50px;
    margin-left: 0px;
    margin-right: 5px;
    font-weight: bold;
    outline: none;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; 1c5b7e */
    
}
.midButts1 {
    border-radius: 5px;
    border-width: 2px;
    flex-grow: 1;
    /* box-shadow: 5px 5px 12px #b78402; */
    /* background-color: #28615c; */
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; */
    
}

/* .button {
    display: block;
    width: 100%;
} */
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
a:link, a:visited {
    
    /* text-align: center; */
    color:white;
    /* font-weight: bold; */
    text-decoration: none;
    /* padding: 10px; */  
}
   

  form.login-form * {
    box-sizing: border-box;
}

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000000;
    opacity: 0.7; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: black;
  }
  /* a:link:active, a:visited:active {
    /* color: #184f78; */
    /* text-align: left; 
  } */

  .login{
    color: #ffffff;


  }
  .subscribe {
    border-radius: 20px;
    /* border-width: 2px; */
    border-width: 1px;
    flex: 1;
    align-items: center;
    border-color: black;
    /* box-shadow: 5px 5px 12px #58849f; */
    background-color: #28615c;
    margin-top: 10px;
    margin-bottom: 10px;
    /* max-height: 11vh;
    min-height: 11vh; */
    color:white;
    font-weight: bold;
    font-size: x-large;
    padding: 10px;
    /* animation: wiggle 5.5s infinite; */
}
.connect {
    border-radius: 7px;
    /* border-width: 1px; */
    width: 17vw;
    border-style: none;
    /* border-color: #638f31;*/
    box-shadow: 1px 1px 1px #000000; 
    background-color: #1e5f80;
    /* margin-left: 25px; */
    /* max-height: 11vh;
    min-height: 11vh; */
    max-width: 17vw;
    text-decoration: none;
    color:white;
    /* font-weight: bold;
    font-size: x-large; */
    padding: 9px;
    /* animation: wiggle 5.5s infinite; */
}
.readmore {
    border-radius: 100px;
    /* border-width: 1px; */
    width: 14vw;
    border-style: none;
    /* border-color: #638f31;*/
    box-shadow: 1px 1px 1px #000000; 
    background-color: #638f31;
    /* max-height: 11vh;
    min-height: 11vh; */
    max-width: 17vw;
    margin-top: 10px;
    text-decoration: none;
    color:white;
    /* font-weight: bold;
    font-size: x-large; */
    padding: 9px;
    /* animation: wiggle 5.5s infinite; */
}
.inputfields {
    border-radius: 7px;
    /* border-width: 1px;  */
    border: none;
    border-bottom: 2px solid rgb(0, 0, 0);
    outline: none;
    /* border-color: #28615c; */
    flex-grow: 1;
    /* width:20vw; */
    /* background-color: #ffffff; */
    margin-left: 25px;
    /* max-height: 11vh;
    min-height: 11vh; */
    color: black;
    /* font-weight: bold; 
    font-size: x-large; */
    padding: 9px;
    /* animation: wiggle 5.5s infinite; */
}
.terms {
    border-radius: 5px;
    border-width: 1px;
    /* border-color: #b78402; */
     border-style: none;
    flex-grow: 1;
    /* box-shadow: 3px 3px 10px #b78402; 
    background-color: #28615c;*/
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; */
}
  .bottomSQ0 {
    text-decoration: none;
    border-color: white;
    border-radius: 7px;
    border-style: none;
    box-shadow: 5px 5px 12px #184d77; 
    background-color: #1e5f80; 
    /* background-color: #456234;  */
    padding: 14px;
    text-decoration: none;
    margin-left: 10px;
    text-align: center;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; */
}
.voteButt {
    text-decoration: none;
    border-color: white;
    border-radius: 7px;
    border-style: none;
    box-shadow: 5px 5px 12px #184d77; 
    background-color: #184E77; 
    /* background-color: #456234;  */
    padding:5px;
    text-decoration: none;
    text-align: center;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; */
}
.selected0 {
    text-decoration: underline;
    border-color: white;
    border-style: none;
    border-radius: 12px;
    box-shadow: 5px 5px 12px #184d77; 
    background-color: #1e5f80; 
    /* background-color: #456234;  */
    margin-top: 0px;
    text-decoration: none;
    margin-left: 0px;
    text-align: center;
    /* max-height: 11vh;
    min-height: 11vh; */
    animation: wiggle 5.5s infinite; 
}

.selected1 {
    border-radius: 25px;
    border-width: 5px;
    border-style: none;
    border-color: #184d77;
    flex-grow: 1;
    /* box-shadow: 5px 5px 12px darkgray; */
    text-decoration: underline;
    /* background-color: #456234; */
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 5px;
    text-align: center;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; */
}
.bottomSQ0:hover {
    animation: none;
}
  .bottomSQ1 {
    border-radius: 7px;
    border-width: 2px;
    flex-grow: 1;
    text-decoration: none;
    border-color: #ffffff;
    border-style: none;
    /* background-color: #456234; */
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 5px;
    /* box-shadow: 5px 5px 12px darkgray; */
    margin-right: 5px;
    text-align: center;
    /* max-height: 11vh;
    min-height: 11vh; */
    /* animation: wiggle 5.5s infinite; */
  
  }
.bottomSQ1:hover {
    animation: none;
}
.blogPost1 {
    display: flex;
    border-radius: 20px;
    border-width: 1px;
    flex-grow: 1;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-style: none;
    box-shadow: 3px 3px 3px #b4ecff;
    background-color: #b4ecff;
    border-color: #172d67;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    /* margin-top: 10px; */
    text-decoration: none;
    outline: none;
    /* margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px; */
    min-height: 25vh;
    margin: 10px;
    /* animation: wiggle 5.5s infinite; */
}
.word {
    opacity: 0;
    display: inline;
    font-weight: bold;
    transition: opacity 1.0s ease;
    white-space: pre-wrap; /* <-- this line fixes the spacing issue */
  }
  .word.visible {
    opacity: 1;
  }
.blogPost2 {
    /* background-image: url("imgs/minidarkback.jpg"); */
    display: flex;
    border-radius: 20px;
    border-width: 1px;
    flex-grow: 1;
    border-style: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 3px #b78402;
    background-color: #1E1E1E;
    border-color: #F9BD21;
    
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin: 7px;
    outline: none;
    /* margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px; */
    min-height: 25vh;
    /* animation: wiggle 7.5s infinite; */
}
.blogPost3 {
    /* background-image: url("imgs/minidarkback.jpg"); */
    border-radius: 25px;
    border-width: 1px;
    flex-grow: 1;
    box-shadow: 3px 3px 3px #ffffff;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: 10px;
    outline: none;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    /* max-height: 14vh; */
    min-height: 14vh;
    animation: wiggle 9.5s infinite;
}
.blogPost4 {
    /* background-image: url("imgs/discord.jpg"); */
    border-radius: 15px;
    border-width: 1px;
    flex-grow: 1;
    box-shadow: 5px 5px 8px darkgray;
    /* background-color: #F7C758; */
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #ffffff;
    background-position: center;
    margin-top: 10px;
    outline: none;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    max-height: 14vh;
    min-height: 14vh;
    animation: wiggle 5.5s infinite;
}
/* box-shadow: 5px 5px 12px #345622;
background-color: #83b451; */
input {
text-align: left;
}
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(#1E1E1E, rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(3deg); }
   95% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.google-sign-in-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.google-sign-in-button {
    display: flex;
    align-items: center;
    background-color: #131314;
    border: 1px solid #8E918F;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    color: #757575;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s, background-color 0.3s;
}

.google-sign-in-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background-color: #131314;
}

.google-sign-in-button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: #131314;
}

.google-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}