@import url("BrandColors.css");

@font-face {
    font-family: fun-font;
    src: url(PatrickHand-Regular.ttf);
}

@font-face {
    font-family: branded-font;
    src: url(Radomir-Tinkov-Gilroy-Medium.otf);
}

@font-face {
    font-family: branded-font;
    src: url(Radomir-Tinkov-Gilroy-Bold.otf);
    font-weight: bold;
}

:disabled {
  opacity: 0.25;
}


*{
    padding:0;
    margin:0;
}
html {
  width:100%;
  height:100%;
  background-color: var(--purple);
  color:var(--yellow); 
  width:100%;
}
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family:branded-font, sans-serif;
}

h1, h2, h3{
    font-size:5vh;
}

hr {
  width: 90%;
  border-right: 0;
  border-left: 0;
  border-top: 0;
  border-bottom:2px solid var(--yellow); 
}

.center-screen {
  align-items: center;
  justify-content: center;
}

.modal {
  position: fixed;
  height: 90vh;
  right: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  visibility: hidden;
  opacity:0;
  background-color: rgba(var(--purple-rgb), .86);
  color:var(--yellow); 
  text-align: center;
  overflow-y: auto;
  -webkit-transition:opacity 0.4s linear;
  -moz-transition:opacity 0.4s linear;
  -ms-transition:opacity 0.4s linear;
  -o-transition:opacity 0.4s linear;
  transition:opacity 0.4s linear;
}

.modal.show {
  visibility: visible;
  opacity:1;
}

.modal-solid-color {
  background-color: rgba(var(--purple-rgb), 1);
}

.modal-small {
  height: 30vh;
  top: 30vh;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#settings-modal {
  display: flex;
  z-index: 4;
}

.modal form {
  min-width:240px;
  width: 100%;
  margin:0 auto;
  text-align: center;
}

#end-game-modal h2,
#end-game-modal h3 {
  margin:0;
}

.starlight-heading {
  margin:3% 0;
  flex: 100%;
  text-align: center;
}

.starlight-dropdown, 
.starlight-button, 
.starlight-textarea, 
.starlight-textinput
{
  text-decoration: none;
  width:50%;
  margin-bottom:1rem;
  font-size:1rem;
  background:transparent;
  color:var(--yellow); 
  min-height:2rem;
  text-align: center;
  text-align-last: center;
  border-radius:5px;
  border:2px solid var(--yellow); 
  cursor: pointer;
}

.starlight-dropdown option{
  padding-top:.25rem;
  padding-bottom:.25rem;
  color:#000;
}

.starlight-textarea, .starlight-textinput{
  background:var(--light-purple);
  color:#000; 
  border:2px solid var(--yellow); 
  cursor: pointer;
}

.starlight-textarea{
  height:8rem;
  text-align: left;
  text-align-last: left;
  padding: 1rem;
  padding-top: .5rem;
  min-width: 240px;
}

.starlight-button, 
.starlight-big-button{
  font-family: branded-font, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.starlight-big-button{
  margin-top: 2rem;
  font-size: 5vh;
  font-weight: bold;
  max-width:50%;
  min-width:240px;
  height: 10vh;
}
 
.starlight-form, 
.starlight-form-radio-options, 
.starlight-display-column,
.starlight-display-column-half,
.starlight-display-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex: 100%;
  align-items: center;
  flex-direction: row;
}

.starlight-display-column-half,
.starlight-display-column{
  flex-direction: column;
}

.modal label {
  display: block;
  text-align: center;
  margin 0 0 .2em;
}

.starlight-display-column-half {
  flex: 50%;
}

.starlight-label-button {
  display:inline-block;
  min-width: 100px;
  text-align: center;
  margin: 1rem;
  border-radius:5px;
  border:2px solid var(--yellow); 
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  flex: 0 0 18%; /* approximately half of 1/3 when I want max 3 buttons per row*/
}

.starlight-display-sub-block {
  flex:1;
}

input[type='radio']{
  display:none;
}

input[type='radio']:checked + label,
.selected-toggle {
  background-color: var(--grape);
}


.hoverable:hover{
  background-color: rgb(var(--light-yellow-rgb), .5);
  border-radius:5px;
}


#app-container{
  display:flex;
  justify-content:center;
  margin:0;
  padding:0;
  height:90vh;
}

#app-layout-table{
  margin:0;
  padding:0;
  border-collapse:collapse;
  border:none;
  align-self: center;
  table-layout: fixed;
  text-align: center;
  margin:0;
  padding:0;
  /*position:relative;*/
  width: 75vw;
  height: 85vh;
  z-index:2; 
}

.menu-bar {
  width:100%;
  color:var(--yellow); 
  height:10vh;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}

.menu-bar-left,
.menu-bar-right {
  display:flex;
  flex-direction: row;
}

.menu-bar-left{
  text-align: left;
  flex:80%;
  justify-content:flex-start;
}

.menu-bar-right{
  text-align: right;
  flex:20%;
  justify-content:flex-end;
}

.app-name {
  font-size: 5vh;
  margin:0;
  padding-left: 1rem;
  text-transform: uppercase;
  margin-left: 25vh; /*leave space for logo*/
}

/* Place logo
 * make psuedo element wide enough for logo and fullheight for auto height adjustment
 * position it absolute, then negative margins to move it where I need 
 * then position background image I have not idea why these margin values work
 * z-index -1 so it's never on top of anything
 * */

.app-name::before{
  content:'';
  padding: 0;
  width: 25vh;
  height: 100vh;
  position:absolute;
  margin-left: -27vh;
  margin-top: -95vh;
  background-image: url(../images/logo-star-border.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0% 100%;
  z-index: -1;
  
}

.lower-right-icon {
  height: 6vh;
  display: block;
  padding-right: 1rem;
}


@media screen and (orientation: portrait) and (max-width: 800px){
  .starlight-form-display-column-half {
    flex: 100%;
  }

  .starlight-form-label {
  flex: 0 0 33%; /* 33% when 100% of screen */
  }
}