.gradient-text {
    text-transform: uppercase;
    font: {
        size: 20vw;
        family: $font;
    };
    // Gradient text CSS
    background: linear-gradient(to top, #ff8a00 0%, #da1b60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


img {
    
    max-width: 90%;
    height: auto;
    
}
.prof{

 
	left: 1px;
    margin: auto;
    width: 300px;
	height: auto;
	border-radius: 8px;
	box-shadow: 10px 10px 5px grey;

}
.youtube{

 
	left: 1px;
    margin: auto;
    width: 300px;
	height: auto;
	border-radius: 8px;
	box-shadow: 10px 10px 5px grey;

}
.ljod{

 
	left: 1px;
    margin: auto;
    width: 3%;
	height: auto;
	border-radius: 8px;
	box-shadow: 10px 10px 5px grey;

}
.color {
    
    color: black;
    padding: 8px 20px;
    margin: 8px 0;
    border: 2px solid  lightslategray;
    cursor: pointer;
}

.pocetnasl{

    left: 1px;
    margin: auto;
    width: 300px;
	height: auto;
	


}

.gift{

    margin: auto;
    width: 40%;
	height: auto;
	

}

.smilies{

    margin: auto;
    max-width: 20%;
	height: auto;
	

}

.w20{

    margin: auto;
    max-width: 20%;
	height: auto;
	

}

.w30{

    margin: auto;
    max-width: 30%;
	height: auto;
	

}

.w40{

    margin: auto;
    max-width: 40%;
	height: auto;
	

}

.w50{

    margin: auto;
    max-width: 50%;
	height: auto;
	

}

.w60{

    margin: auto;
    max-width: 60%;
	height: auto;
	

}

.logo_hodnik{

    margin: auto;
    width: 60%;
	height: auto;
	

}
.icon{

    margin: auto;
    width: 20px;
	height: 23px;
	

}

div.fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.header {
  
  padding: 5px;
  text-align: center;
  position: absoulte;
}
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.bojedugme {
	background-color: black; /* Green */
width: 90%;
height: 7%;
  margin: 5;
 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
	
	
	}
	
	
.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}


@font-face {
  font-family: catalina;
  src: url(font/catalina.ttf);
  
  
}

.catalina {
  font-family: catalina;
  
}

@font-face {
  font-family: Hillock;
  src: url(font/Hillock.ttf);
  
  
}

.hillock {
  font-family: Hillock;
  
}

@font-face {
  font-family: rothenbg;
  src: url(font/rothenbg.ttf);
  
  
}

.rothenbg {
  font-family: rothenbg;
  
}

@font-face {
  font-family: CelticHand;
  src: url(font/CelticHand.ttf);
  
  
}

.celtichand {
  font-family: CelticHand;
  
}

@font-face {
  font-family: tridlet;
  src: url(font/tridlet.ttf);
  
  
}

.tridlet {
  font-family: tridlet;
  
}

@font-face {
  font-family: orangejuice;
  src: url(font/orangejuice.ttf);
  
  
}

.orangejuice {
  font-family: orangejuice;
  
}

@font-face {
  font-family: tridlet;
  src: url(font/tridlet.ttf);
  
  
}

.tridlet {
  font-family: tridlet;
  
}

@font-face {
  font-family: hardcorium;
  src: url(font/hardcorium.ttf);
  
  
}

.hardcorium {
  font-family: hardcorium;
  
}

@font-face {
  font-family: coreldraw;
  src: url(font/CorelDraw.ttf);
  
  
}

.coreldraw {
  font-family: coreldraw;
  
}

@font-face {
  font-family: beauty;
  src: url(font/beauty.ttf);
  
  
}

.beauty {
  font-family: beauty;
  
}

@font-face {
  font-family: riesling;
  src: url(font/riesling.ttf);
  
  
}

.riesling {
  font-family: riesling;
  font-size: 25px;
}

@font-face {
  font-family: das;
  src: url(font/das.ttf);
  
  
}

.das {
  font-family: das;
  
}

@font-face {
  font-family: reclaim;
  src: url(font/reclaim.ttf);
  
  
}

.reclaim {
  font-family: reclaim;
  
}

@font-face {
  font-family: rhieknuza;
  src: url(font/rhieknuza.ttf);
  
  
}

.rhieknuza {
  font-family: rhieknuza;
  
}

@font-face {
  font-family: standups;
  src: url(font/Standups.ttf);
  
  
}

.standups {
  font-family: standups;
  
}

@font-face {
  font-family: font1;
  src: url(font/font1.ttf);
  
  
}

.font1 {
  font-family: font1;
  
}
@font-face {
  font-family: font2;
  src: url(font/font2.ttf);
  
  
}

.font2 {
  font-family: font2;
  
}
@font-face {
  font-family: font3;
  src: url(font/font3.ttf);
  
  
}

.font3 {
  font-family: font3;
  
}
@font-face {
  font-family: font4;
  src: url(font/font4.ttf);
  
  
}

.font4 {
  font-family: font4;
  
}
@font-face {
  font-family: font5;
  src: url(font/font5.ttf);
  
  
}

.font5 {
  font-family: font5;
  
}

@font-face {
  font-family: Hapshash;
  src: url(font/Hapshash.ttf);
  
  
}

.Hapshash {
  font-family: Hapshash;
  
}

@font-face {
  font-family: Tafakur;
  src: url(font/Tafakur.ttf);
  
  
}

.Tafakur {
  font-family: Tafakur;
  
}

@font-face {
  font-family: cont;
  src: url(font/cont.ttf);
  
  
}

.cont {
  font-family: cont;
  
}

@font-face {
  font-family: bandito;
  src: url(font/bandito.ttf);
  
  
}

.bandito {
  font-family: bandito;
  
}
@font-face {
  font-family: beaked;
  src: url(font/beaked.ttf);
  
  
}

.beaked {
  font-family: beaked;
  
}
@font-face {
  font-family: snowland;
  src: url(font/snowland.ttf);
  
  
}

.snowland {
  font-family: snowland;
  
}

@font-face {
  font-family: Aerosol;
  src: url(font/Aerosol.ttf);
  
  
}

.Aerosol {
  font-family: Aerosol;
  
}

@font-face {
  font-family: tribalbox;
  src: url(font/tribalbox.ttf);
  
  
}

.tribalbox {
  font-family: tribalbox;
  
}

@font-face {
  font-family: Canterbury;
  src: url(font/Canterbury.ttf);
  
  
}

.Canterbury {
  font-family: Canterbury;
  
}

@font-face {
  font-family: sickcapital-vice;
  src: url(font/sickcapital-vice.ttf);
  
  
}

.sickcapital-vice {
  font-family: sickcapital-vice;
  
}



@font-face {
  font-family: gogle;
  src: url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
  
  
}

.gogle {
  font-family: gogle;
  
}



/* The sidepanel menu */
.sidepanel {
  height: 250px; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}