/* CSS document */
/* This file is the main stylesheet for the website. */

/* Main font */

@font-face {
  font-family: 'Agency';
  font-style: normal;
  color: #b6b6b6;
  font-weight: 600;
  src: url(/fonts/AGENCYB.TTF) format('truetype');
}

 @font-face {
        font-family: 'EuropeanTeletextNuevo';
        font-style: normal;
        color: #b6b6b6;
        font-weight: 200;
        src: url(/fonts/EuropeanTeletextNuevo.ttf);
    }
    
     @font-face {
        font-family: 'SerpentineI';
        font-style: normal;
        color: #b6b6b6;
        font-weight: 200;
        src: url(/fonts/SerpentineI.TTF);
    }
h2
    .teletext-font {
        font-family: 'EuropeanTeletextNuevo';
    }
    
     @font-face {
        font-family: 'KenneySpace';
        font-style: normal;
        color: #b6b6b6;
        font-weight: 200;
        src: url(/fonts/KenneySpace.ttf);
    }
h2
    .teletext-font {
        font-family: 'KenneySpace';
    }
    

@font-face {
  font-family: 'Futured';
  font-style: normal;
  color: #b6b6b6;
  font-weight: 600;
  src: url(/fonts/Futured.TTF) ;
}
h2
    .futured-font {
        font-family: 'futured';
    }
    
    @font-face {
  font-family: 'future-earth';
  font-style: normal;
  color: #b6b6b6;
  font-weight: 600;
  src: url(/fonts/future-earth.ttf) ;
}
h2
    .futured-font {
        font-family: 'future-earth';
    }
    
    @font-face {
  font-family: 'Neuropolitical';
  font-style: normal;
  color: #b6b6b6;
  font-weight: 600;
  src: url(/fonts/Neuropolitical-Rg.otf) ;
}
h2
    .neuropolitical-font {
        font-family: 'Neuropolitical';
    }
    
    

 /* Global */
.container {
  width:80%;
  margin:auto;
  max-width: 100%;
  }
  

  
 .centerDiv {
 margin: auto;
 width: 80%;
 border: 8px outset black;
 padding: 1px;  
 transform: skew(20deg, -1deg);
 background: rgba(70, 150, 100, .8);
 border-color: purple;
 }




 /* Background properties */
 body {
 background-image:url('../img/hearts.png');
 background-repeat:repeat;
 background-position:center;
 background-attachment:scroll;
 
 font-family:'Agency', serif;
 font-size:small;
 }
 
 
 
 /* Header properties*/
 /* Main header container */
 header {
 width:70%;
 margin:auto;
 overflow:hidden;
 background-image:linear-gradient(purple, yellow);
 }
 
 
 


  
 /* Footer */
 footer {
 width:79%;
 margin:auto;
 overflow:hidden;
 

 background-image:linear-gradient(purple, yellow);
 }
 
 




 /* Main containers*/
 .myCon { 
 background-image:linear-gradient(#A020F0, #20F038);
 background-repeat:repeat;
 background-position:center;
 background-size:cover;
 margin: auto;
 border:5px outset gold;
 text-align:center;
 }
 
 .myCon2 { 
 background-image:linear-gradient(#A020F0, #20F038);
 background-repeat:repeat;
 background-position:center;
 background-size:cover;
 Margin: auto;
 width: 85%;
 border:5px outset mediumturquoise;
 text-align:center;
 }
 
 .mycon3 { 
 background-image:linear-gradient(#A020F0, #20F038);
 background-repeat:repeat;
 background-position:center;
 background-size:cover;
 transform: skew(-6deg, -5deg);
 Margin: auto;
 width: 80%;
 max-width: 100%;
 border:5px outset fuchsia;
 text-align:center;
 }
 
 .mycon4 { 
 background-image:linear-gradient(#20F038, #A020F0);
 background-repeat:repeat;
 background-position:center;
 background-size:cover;
 transform: skew(6deg, 5deg);
 Margin: auto;
 width: 80%;
 max-width: 100%;
 border:5px outset cyan;
 text-align:center;
 }
 
  .mycon5 { 
 background:linear-gradient(#9666cb, #ff0051, #00bdff);
 background-repeat:repeat;
 background-position:center;
 background-size:cover;
 transform: skew(-2deg, -3deg);
 Margin: auto; 
 width: 85%;
 max-width: 100%;
 border:5px outset crimson;
 text-align:center;
 }
 
 .mycon6 { 
 background-image:url('../img/mainostausta.png');
 background-repeat:repeat;
 background-position:center;
 background-attachment:scroll;
 background-size:cover;
 transform: skew(-2deg, -2deg);
 Margin: auto; 
 width: 85%;
 max-width: 100%;
 border:5px outset deeppink;
 text-align:center;
 }
 
  .mycon7 { 
 background:linear-gradient(#9666cb, #ff0051, #00bdff);
 background-repeat:repeat;
 background-position:center;
 background-size:cover;
 transform: skew(2deg, 3deg);
 Margin: auto; 
 width: 85%;
 max-width: 100%;
 border:5px outset crimson;
 text-align:center;
 }
 
 
 
 /* Columns and Rows */
 .column {
 float: left;
 transform: skew(30deg, 10deg);
 width: 30%;
 
 box-sizing: border-box;
 background-image:linear-gradient(#A020F0, #20F038);
 }
 
 .column2 {
 float: left;
 width: 50%;
 
 box-sizing: border-box;
 background-image:linear-gradient(#BBEAFE, #4081FF);   
 }
 
 .column3 {
 width:50%;
 margin-left:auto; 
 margin-right:auto;
 margin-top: auto;
 padding: 1.5vw;
 display: block; 
 margin-bottom: auto; 
 text-align:center; 
 float:center;


 box-sizing:border-box;
 }
 
 .column4 {
 display:inline-block;
 background-image:linear-gradient(#A020F0, #20F038);
 
 margin-left:auto;
 margin-right:auto;
 }



/* Clear floats after the columns */ 
 .row:after {
 content: "";
 display: table;
 clear: both;
 } 
 
 
 
 /* Headlines */
 h1 {
 background-image: linear-gradient(to right, white, cyan);
 color:transparent;
 background-clip: text;
 margin: 3px;
 text-align:center;
 font-size:6vw;
 } 
 
 h2 {
 color:yellow;
  font-family: 'SerpentineI';
 text-shadow: 0.2vw 0.2vw  lightgreen;
 background-clip: text;
 margin: 3px;
 -webkit-text-stroke-width: 0.05vw;
 -webkit-text-stroke-color: red;
 text-align:center;
 font-size: 4vw;
 
 }
 
 h3 {
 font-family: 'Agency';
 color:  WHITE ;
 text-shadow: 2px 2px  #fb00ff;
 background-clip: text;
 margin: 3px;
 text-align:center;
 font-size: 5vw;
 -webkit-text-stroke-width: 0.1vw;
 -webkit-text-stroke-color: blue;
 }
 
 h4 {
 color: #fdfeeb;
 font-family: 'future-earth';
 text-shadow: 1vw 1vw  blue;
 background-clip: text;
 margin: 3px;
 -webkit-text-stroke-width: 0.1vw;
 -webkit-text-stroke-color: red;
 text-align:center;
 font-size:6vw;
 } 
 
 h5 {
 font-family: 'Agency';
 color:  WHITE ;
 text-shadow: 0.1vw 0.1vw  #fb00ff;
 background-clip: text;
 margin: 3vw;
 text-align:start;
 font-size: 4vw;
 -webkit-text-stroke-width: 0.1vw;
 -webkit-text-stroke-color: blue;
 }
 
 h6 {
 color: chartreuse;
 font-family: 'future-earth';
 text-shadow: 1vw 1vw  blue;
 margin: 3px;
 -webkit-text-stroke-width: 0.1vw;
 -webkit-text-stroke-color: red;
 text-align:center;
 font-size:6vw;
 } 
 
 
 /* Text properties */
 p {
 background-image: linear-gradient(to right, white, yellow);
 color:transparent;
 background-clip: text;
 text-align: center;
 font-size:4.5vw;
 margin: 1vw;
 }
 
 p1 {
 background-image: linear-gradient(to right, white, yellow);
 color:transparent;
 background-clip: text;
 text-align:center;
 font-size:3vw;
 margin: 3px;
 
 }
 
 p2 {
 background-image: linear-gradient(to right, #64ff00, #00fffb);
 -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
 font-family: 'EuropeanTeletextNuevo';
 color:transparent;
 background-clip: text;
 text-decoration: none;
 text-align:center;
 font-size: 8vw;
 margin: 3vw;
 }
 
 p3 {
 -webkit-text-stroke-width: 0.2vw;
  -webkit-text-stroke-color: green;
 font-family: 'SerpentineI';
 text-shadow: 0.5vw 0.5vw  #681f6d;
 color:#42e0fd;
 background-clip: text;
 text-align:center;
 font-size:6vw;
 margin: 1vw;
 }
 



 /* Image properties */
 .imgB {
 border:5px solid black;   
 float:right; 
 max-width: 100%;
 max-height: auto;
 width:380px;
 height:300px; 
 }
 
 .imgS {
 border:5px solid black;   
 float: left; 
 max-width: 100%;
 max-height: auto;
 width:10vw;
 height:10vw; 
 }
 
 .imgMainos {
 float:center; 
 max-width: 85%;
 max-height: 85%;
 margin: 3vw;
 }
 
 .imgnext {
 float: right; 
 max-width: 100%;
 max-height: auto;
  z-index: 999;
  position: sticky;
  top: 50%;
 }
 
 .imgprev {
 float: left; 
 max-width: 100%;
 max-height: auto;
 z-index: 999;
  position: sticky;
  top: 50%;
 }
 
 
 
 /* Right, left and center floating images */
 .imgR {
 float:right; 
 max-width: 100%;
 max-height: auto;

 }
 
 .imgL {
 float:left; 
 max-width: 100%;
 max-height: auto;

 }
 
 .imgC {
 float:center; 
 max-width: 100%;
 max-height: auto;

 }
 
 .imgButton {
 float:center; 
 
 max-width: 100%;
 max-height: auto;
 width:300px;
 height:150px;  
 }
 
 
 
 /* Other logos */
 .logoC {
 float:center;
 border:0;
 }
 
 /* Index image */
 .centerIndex {
  margin:auto;
  text-align:center;
  float:center;
 }
 
 /* Image buttons */
 .retroBtn {
  width:176px;
  height:62px;
 }
 
 /* image gallery */
 /* The grid: Four equal columns that floats next to each other */
.column3 {
 float: left;
 width: 50%;
 }

/* Style the images inside the grid */
.column3 img {
 width:36vw;
 height:36vw;

 border:0.2vw solid black;
 opacity: 0.8;
 cursor: pointer;
 }

.column3 img:hover {
 opacity: 1;
 }
 
 

.audioPlayer {
 margin: auto;
 width: 50%;
 border: 5px outset black;
 padding: 10px; 
 
 text-align:center; 
 
 width:50%;
}



/* when the screen is 500px wide or less, this will stack the elements on top of each other */
@media screen and (max-width: 500px) {

  .container {
  width:100%;
  }
  
  .mediaB {
  width:350px;
  height:80px;
  }
  
  .audioPlayer {
  width:90%;
  }
  
  
  header {
  width:98%;
  }
  
  footer {
  width:98%;
  }
  
  .tagBox {
  width:98%;
  }
  
  .logo {
  text-align:center;
  float:center;   
  max-width:auto;
  max-height:auto;
  
  display:block;
  
  margin-left:65px;
  margin-right:auto;
  }
  
  .archive-logo {
  float:center;   
  max-width:auto;
  max-height:auto;
  
  width:150%;
  
  display:block;
  
  margin-left:auto;
  margin-right:auto;
  }
  
  .imgB {
  display:block;
  margin-left:auto;
  margin-right:auto;
  float:center;
  
  max-width: auto;
  max-height: auto;
  width:200px;
  height:200px; 
  }

  .centerIndex {
  display:block;
  margin:auto;
  }

  h1 {
  line-height:1.6;
  }
  
  h2 {
  line-height:1.6;
  }

  .imgR {
  width:297px;
  }
  
  .imgC {
  width:297px
  }

  
  
  .column {
  width:100%;
  }
  
  
  .column2 {
  width:100%;
  }
  
  
  .column3 {
  width:100%;
  }
  
  .column4 {
  width:100%;
  
  margin:auto;
  
  float:center;
  text-align:center;
  }
  
  #smallImg {
  width:380px;
  }
  
  .centerDiv {
  width:90%;
  }
  
}

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

  .container {
  width:100%;
  }
  
  .containerkauppa {
  width:100%;
  }
  
  .mediaB {
  width:350px;
  height:80px;
  }
  
  .audioPlayer {
  width:90%;
  }
  
  nav {
  width:98%;
  }
  
  header {
  width:80%;
  }
  
  footer {
  width:98%;
  }
  
  .tagBox {
  width:98%;
  }
  
  .logo {
  text-align:center;
  float:center;   
  max-width:auto;
  max-height:auto;
  
  display:block;
  
  margin-left:65px;
  margin-right:auto;
  }
  
  .archive-logo {
  float:center;   
  max-width:auto;
  max-height:auto;
  
  width:150%;
  
  display:block;
  
  margin-left:auto;
  margin-right:auto;
  }
  
  .imgfit  {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}
  
  .imgB {
  display:block;
  margin-left:auto;
  margin-right:auto;
  float:center;
  
  max-width: auto;
  max-height: auto;
  width:200px;
  height:200px; 
  }

  .centerIndex {
  display:block;
  margin:auto;
  }

  h1 {
  line-height:1.6;
  }
  
  h2 {
  line-height:1.6;
  }

  .imgR {
  width:297px;
  }
  
  .imgC {
  width:297px
  }

  form.searchBar button {
  width:15%;
  margin:0;
  }

  nav {
  float: none;
  display: block;
  text-align: center;
  } 
  
  
  .column {
  width:100%;
  }
  
  
  .column2 {
  width:100%;
  }
  
  
  .column3 {
  width:100%;
  }
  
  .column4 {
  width:100%;
  
  margin:auto;
  
  float:center;
  text-align:center;
  }
  
  #smallImg {
  width:380px;
  }
  
  .centerDiv {
  width:90%;
  transform: skew(20deg,10deg);
  }
  
}

@media(orientation: portrait) {
  
  .container {
  width:100%;
  }
  
  .mediaB {
  width:350px;
  height:80px;
  }
  
  .audioPlayer {
  width:90%;
  }
  

  
  header {
  width:98%;
  }
  
  footer {
  width:98%;
  }
  
  .tagBox {
  width:98%;
  }
  
  .logo {
  text-align:center;
  float:center;   
  max-width:auto;
  max-height:auto;
  
  display:block;
  
  margin-left:65px;
  margin-right:auto;
  }
  
  .archive-logo {
  float:center;   
  max-width:auto;
  max-height:auto;
  
  width:150%;
  
  display:block;
  
  margin-left:auto;
  margin-right:auto;
  }
  
  .imgB {
  display:block;
  margin-left:auto;
  margin-right:auto;
  float:center;
  
  max-width: auto;
  max-height: auto;
  width:200px;
  height:200px; 
  }

  .centerIndex {
  display:block;
  margin:auto;
  }

  h1 {
  line-height:1.6;
  }
  
  h2 {
  line-height:1.6;
  }

  .imgR {
  width:297px;
  }
  
  .imgC {
  width:297px
  }

  
  
  .column {
  width:100%;
  }
  
  
  .column2 {
  width:100%;
  }
  
  
  .column3 {
  width:50%;
  }
  
  .column4 {
  width:100%;
  
  margin:auto;
  
  float:center;
  text-align:center;
  }
  
  #smallImg {
  width:380px;
  }
  
  .centerDiv {
  width:90%;
  }
  
}