@import url('nav-styles.css');

html { 
    background: url("../img/bg2.jpg") no-repeat center center fixed;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
html,
body {
  margin: 0;
  padding: 0;
}
@font-face {
    font-family: 'Flat-Brush-Normal';
    src:url('../fonts/Flat-Brush-Normal.ttf.woff') format('woff'),
        url('../fonts/Flat-Brush-Normal.ttf.svg#Flat-Brush-Normal') format('svg'),
        url('../fonts/Flat-Brush-Normal.ttf.eot'),
        url('../fonts/Flat-Brush-Normal.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
.wrap {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  max-width: 1200px;
  margin: auto;
}
.main {
  flex: 1;
  display: flex;
}
footer,
header {
  /*border: 1px solid black;*/
  /*background: green;*/
  padding: 10px;
}
header {
  /*width: 100%;*/
  display: inline-flex;
  justify-content: space-between;
}
.main-title {
  font-size:  3vw;
  font-family: 'Merriweather', serif;
  letter-spacing: 0.2vw;
  /*-webkit-text-stroke: .5px white;*/
  font-style: normal;
  color: rgb(205, 127, 50);
  margin: 5px auto;
  text-align: center;
  text-shadow: -2px 0 #FFFACD, 0 2px #FFFACD, 2px 0 #FFFACD, 0 -2px #FFFACD;
  /*text-shadow: 3px 3px 9px #FFFFFF;*/
}
.sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  /*border: 1px solid black;*/
  /*background: blue;*/
  flex: 1 1 0px;
  padding: 0px;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  /*border: 1px solid black;*/
  /*background: #FFFACD;*/
  padding: 15px;
  flex: 1;
}
.textbox-bg {
  /*background-color: #FFBCD9;*/
  background-color: rgba(175, 84, 75, 0.9); 
  width: 55vh;
  height: 40vh;
  border-radius: 2vh;
  border: 4px solid #fff;
}
#textbox {
  margin: 15px 5px 15px 15px;
  padding-right: 15px;
  font-family: 'Source Sans Pro', sans-serif;
  /*color: rgba(76,76,76,1);*/
  color: white;
  font-weight: 600;
  font-size: 2.5vh;
  text-align: left;
  overflow:auto;
  height: 36vh;
  text-indent: 2.5vh;
  line-height: 3.4vh;
}

.wheelbg {
  width: 60vh;
}
.square {
    background-image: url("../img/osho-circle.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 60vh;
    height: 60vh;
}

#rotate {
  animation: rotation 6s infinite linear;
  animation-play-state:paused;
}

#footer-content {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
}

.transbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17vh;
  height: 10vh;
  /*width: 170px;
  height: 90px;*/
  border-radius: 1vh;
  border: 3px inset #fff;
  font-family: 'Flat-Brush-Normal';
  color: rgb(232, 217, 173);
  /*color: #b00557;*/
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  text-shadow: 1px 2px 3px rgb(32, 20, 8);
  /*font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));*/
  font-size: 1.8vh;
}

 #footer-content a, header a, header {
   text-decoration: none;
}

.gray-border {
  border: 3px solid rgba(255,255,255,0.8);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#menuToggle {display:none;}

/**********************MEDIA QUERIES***********************/

/************CREATE VARIABLES FOR SCREEN WIDTHS************/
/*--viewport-4: (max-width: 575.98px);*/ /*Mobile-landscape (and larger)*/
/*--viewport-7: (max-width: 767.98px);*/ /*Tablet-portrait (and larger)*/
/*--viewport-9: (max-width: 991.98px);*/ /*Tablet-landscape (and larger)*/
/*--viewport-12: (max-width: 1199.98px);*/ /*Laptops (and larger)*/



@media screen and (max-width: 575.98px) 
and (orientation:portrait) {
 /* body {margin-left: 10px}*/

 body {position:fixed;}
 .wrap {
  width: 100vw;
  align-items: center;
  justify-content: center;
 }

  .sidebar {
    flex: 0;
    order: 1;
  }
  .main {
    flex-direction: column;
  }
  .content {
    order: 2;
    padding: 10px 0px;
    align-items: stretch;
  }
  .main-title {
    font-size: 7vw;
    display: none;
  }
  .wheelbg, .square {
    width: 35vh;
    height: 35vh;
  }
  .textbox-bg {
    height: 44vh;
    width: 92vw;
  }
  #textbox {
    height: 40vh;
    font-size: 5vw;
  }

  .intro-text { 
    font-size: 5.1vw;
    text-align: left; 
  }

  .transbutton {display:none;}
  #menuToggle {display:block;}
  footer {display:none;}
}

@media screen and (max-height: 575.98px)
and (orientation:landscape) {

   #textbox {font-size: 2.5vh;}  
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation:portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

  .main-title {
    font-size: 6vw;
  }

  body {position:fixed;}
 .wrap {
  width: 100vw;
  align-items: center;
  justify-content: center;
 }
  .main {
    flex-direction: column;
  }

  .sidebar {
    flex: 0;overflow-x: 
    order: 1;
  }
  .content {
    order: 2;
    padding: 10px 0px;
    align-items: stretch;
  }

  .wheelbg, .square {
    width: 40vh;
    height: 40vh;
  }

  .transbutton {display:none;}
  #menuToggle {display:block;}
  footer {display:none;}
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  .wrap {
    max-width: 950px;
 /*   min-height: 0vh;*/
    max-height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    max-height: calc(var(--vh, 1vh) * 100);

    .wheelbg, .square {
    width: 35vh;
    height: 35vh;
  }
  .textbox-bg {
    height: 44vh;
    width: 55vw;
  }
  #textbox {
    height: 40vh;
    font-size: 5vw;
  }

  }
  /*.transbutton {display:none;}*/
 /* #menuToggle {display:block;}*/
  /*footer {display:none;}*/
  
}


/*@media screen and (max-width: 680px) {
  .sidebar {
    flex: 0;
    order: 1;
  }
  .main {
    flex-direction: column;
  }
  .content {
    order: 2;
  }
  .main-title {font-size: 7vw;
  }
  .wheelbg, .square {
    width: 40vh;
    height: 40vh;
  }
  .transbutton {display:none;}
  #menuToggle {display:block;}
}*/