SI15/style.css

@font-face {
    
	 font-family: 'mono';
	 src:  url('fonts/SyneMono-Regular.otf') format('opentype');
    
}

@font-face {
	 font-family: 'garamondt';
	 src:  url('fonts/Garamondt-Italic.woff') format('woff');
}

@font-face {
    	 font-family: 'garamondt-regular';
	 src:  url('fonts/Garamondt-Regular.woff') format('woff');

}

@font-face {
    	 font-family: 'graffiti';
	 src:  url('fonts/Crédible-Regular.woff') format('woff');

}

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


body {  
        padding: 0;
        margin: 0;
    width:100vw;
        font-size: 1em;
        overflow-y: auto;
    overflow-x: hidden;
        background-image: url(./img/back.png);
        background-repeat: no-repeat;
        background-size: cover;
}

.head {
    padding-bottom: 0;
    padding-top: 0;
    padding-right: 2vw;
    padding-left: 3.3vw;
    justify-content: space-between; 
    align-items: center;
    display: flex;
}

h1{ 
    color: lightblue;
    font-family: garamondt;
    font-size: 9vw;
    margin-top: 1vh;
    margin-bottom: 0;
    text-align: left;
    flex-basis: auto;
    text-shadow: 1px 1px 15px DeepSkyBlue;
/*     -webkit-text-stroke: 0.1px white; */
}


.weather {

    flex-basis: auto;
    padding: 1.2vw;

}

/* <!-------- STREAM -----------------------------------------------------------------------------> */



.title { 
    font-family: mono;
    color: lightblue;
    font-size: 2.7em;
    line-height: 1em;
    text-align: left;
    
}

.title2 { 
    font-family: graffiti;
    color: yellow;
    font-size: 2.5em;
    text-align: center;
    position: absolute;
    z-index: 1000;
    animation-name: title2;
    animation-duration: 80s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes title2 { 
0%   {left:300px; top:550px;}
30%  {left:450px; top:400px;}            
60%  {left:350px; top:420px;}
100% {left:300px; top:550px;}
}


p.intro {
        text-align: left;
        width: 100%;
        font-size: 1.2em;
        color: lightblue;
        font-family: mono;
    

}
    
.setlistbox{
    padding-top: 0;
    padding: 1.2vw;
}
    
p.setlist {
        column-count: 3;
        text-align: left;
        width: 100%;
        font-size: 1em;
        color: lightblue;
        font-family: mono;

}

.stream {
    padding-top: 0;
    display: flex;
    justify-content: center;
/*     width: 100vw; */
    padding: 1.2vw;
    
}
    
.text{
    flex-basis: auto;
    padding: 1.2vw;
    width: 100%;
}

.chat {
    flex-basis: auto;
    padding: 1.2vw;
}

.video { 
    width: 45vw;
    height: 30vw;
    box-shadow: 1px 1px 20px lightblue;
}


embed {
    height: 100%; 
    box-shadow: 1px 1px 20px lightblue;
    border-radius: 10px;
}

#vid {
    flex-basis: auto;
    float:left;
    padding: 1.2vw;
   
}



/* <!-------- ARCHIVE -----------------------------------------------------------------------------> */


.issues {
    display: flex;
    justify-content:space-around;   
    margin: 1.2vw;
    padding-bottom: 4vw;
     padding-right: 2.3vw;
    
}


/* .block {
    
    flex-basis: auto;
    width:10vw;
    padding: 1.2vw;
    background:none;
    
} */


h2{
    font-family: garamondt;
    font-size: 2.5em;
    margin-bottom: 0;
}

h3{
    font-family: garamondt;
    font-size: 2.1em;
    margin-bottom: 0;
}
    
.time{
    font-family: mono;
    font-size: 3em;
    margin-top: 1vw;
    margin-bottom: 0;
}

b{
    font-family: garamondt;
    font-size: 2em;
    margin-top: 0;
    font-style: normal;  
    text-shadow: 1px 1px 15px DeepSkyBlue;
    
}

.level{
    font-family: garamondt;
    padding-top: 1em;
    font-size: 2em;
    font-style: normal;  
    
}
    
i{
    font-family: garamondt;
    font-size: 1.3em;
    margin-top: 0;
    font-style: normal;  
}

	
.star {
    margin: 0;
	color: yellow;
	font-size: 2em;
	  background: linear-gradient(90deg, rgba(186,148,62,1) 0%, rgba(236,172,32,1) 20%, rgba(186,148,62,1) 39%, rgba(249,244,180,1) 50%, rgba(186,148,62,1) 60%, rgba(236,172,32,1) 80%, rgba(186,148,62,1) 100%);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;        
	  animation: shine 3s infinite;
	  background-size: 200%;
	  background-position: left;
}

@keyframes shine {
	  to{background-position: right}
	 
}
	
button{
    font-family: garamondt;
    font-size: 7em;
    color:lightblue;
    border-radius: 50%;
    border: none;
    background:none;
    box-shadow: 1px 1px 20px lightblue;

}

buttonback{
        font-family: garamondt;
    font-size: 3em;
    color:lightblue;
    border-radius: 20%;
    border: none;
    background:none;
    box-shadow: 1px 1px 20px lightblue;
        
    }

button:hover {
    cursor: pointer;
  background-color:lightblue;
    color: #6874bb;
    text-shadow: 1px 1px 10px #6874bb;
}
	
	

/* <!-------- BANNER -----------------------------------------------------------------------------> */
* { box-sizing: border-box; }

body,
html { overflow-x: hidden; }

.bar {
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  padding: 1.3vh;

  background-color: #e74c3c;
  color: white;

  font-family: mono;
  font-size: 1.7em;
    z-index: 1001;
}


.bar_content {
  display: inline-block; /* Important to give the content a width */

  width: 100%;
  transform: translateX(100%); /* Animation start out of the screen */

  /* Add the animation */
  animation: move 35s linear infinite /* infinite make reapeat the animation indefinitely */;
}

/* Create the animation */
@keyframes move {
  to { transform: translateX(-350%); }
}


/* <!-------- CARDS -----------------------------------------------------------------------------> */

.flip-card {
        flex-basis: auto;
        padding: 1.2vw;
        background:none;
        background-color: transparent;
        perspective: 1000px;
        width:10vw;
        height: 35vw;
}

.flip-card-inner {
        position: absolute;
        width:10vw;
        height: 35vw;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        color: lightblue;
        text-align:center;
        font-family: mono;
        font-size: 0.7em;
}

.flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
}

.flip-card-front {
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        width:10vw;
        height: 35vw;
        color: lightblue;
        text-align:center;
        font-family: mono;
        font-size: 0.7em;
        background:none;
        box-shadow: 1px 1px 20px lightblue;
        border-radius: 25px;
}    

    
.flip-card-back {
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        width:10vw;
        height: 35vw;
        color: lightblue;
        text-align:center;
        font-family: mono;
        font-size: 0.7em;
        background-color: 50% lightblue;
        box-shadow: 1px 1px 20px lightblue;
        border-radius: 25px;
}    

.flip-card-front {
  background-color: transparent;
}

.flip-card-back {
  background-color: transparent;
  transform: rotateY(180deg);
}
    
}

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

p.setlist {
        column-count: 2;
        text-align: left;
        width: 100%;
        font-size: 1em;
        color: lightblue;
        font-family: mono;
        
        margin-top: 2.5vw;


}
p.intro {
    padding-top: 1.2wv;
        column-count: 1;
        text-align: left;
        width: 100%;
        font-size: 1em;
        color: lightblue;
        font-family: mono;
    

}
.head {
    flex-wrap: wrap; 
    justify-content: center;
    display: flex;
}
    
h1{ 
    padding-right:2vw;
    margin-bottom: 3vw;
    font-size: 10vw;
    text-align: center;
    text-shadow: 1px 1px 15px DeepSkyBlue;
/*     -webkit-text-stroke: 0.1px white; */
    
}
    
.stream {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
    padding: 1.2vw;
    
}

.title { 
    text-align: center;
    
    
}
    
@keyframes title2 { 
0%   {left:150px; top:250px;}
30%  {left:200px; top:200px;}            
60%  {left:110px; top:110px;}
100% {left:150px; top:250px;}
}


.text{
    column-count: 2;
    flex-basis: auto;
    padding: 1.2vw;
    margin: 2.5vw;
    margin-left: 3vw;
    margin-right: 3vw;
/*     width: 100%; */
}
    
.video { 
    flex-basis: auto;
    width: 45vw;
    height: 30vw;
}
    
embed {
    flex-basis: auto;
    height: 150px; 
    
}

    .issues {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;  
    padding: 1.2vw;
    padding-right: 2.3vw;
    
}
    

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

    body{
        padding-bottom: 15vw;
    }
p.setlist {
        column-count: 1;
        text-align: left;
        width: 100%;
        font-size: 1em;
        color: lightblue;
        font-family: mono;
        padding: 1.2vw;
        margin-top: 4vw;
        margin-left: 1.2vw;
        padding-right: 7vw;

}

p.intro {
    padding-top: 1.2wv;
    column-count: 1;
    text-align: left;
    width: 100%;
    font-size: 1em;
    color: lightblue;
    font-family: mono;


}

.head {
    flex-wrap: wrap; 
    justify-content: center;
    display: flex;
}
    
h1{ 
    margin-bottom: 3vw;
    font-size: 17vw;
    text-align: center;
    text-shadow: 1px 1px 15px DeepSkyBlue;
/*     -webkit-text-stroke: 0.1px white; */
    
}
    
.stream {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
    padding: 1.2vw;
    
}

.title { 
    text-align: center;
    
    
}
    
@keyframes title2 { 
0%   {left:150px; top:250px;}
30%  {left:200px; top:200px;}            
60%  {left:110px; top:110px;}
100% {left:150px; top:250px;}
}


.text{
    column-count: 1;
    flex-basis: auto;
    padding: 1.2vw;
    margin: 2.5vw;
    margin-left: 3vw;
    margin-right: 3vw;
/*     width: 100%; */
}
    
.video { 
    flex-basis: auto;
    width: 80vw;
    height: 55vw;
    
}
    
embed {
    flex-basis: auto;
    height: 150px; 
    
}

.issues {
    display: none;
    flex-direction: row;
    justify-content: center;
    padding: 1.2vw;
    padding-right: 2.3vw;
    
}