@font-face {
  font-family: myFirstFont;
  src: url(font.ttf);
}
@font-face {
  font-family: headfont;
  src: url(HKGrotesk.otf);
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

/* scrollbar start  */
::-webkit-scrollbar {
  width: 5px;
  border-radius: 50%;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(255, 255, 255); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #fc9c95; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #fc9c95; 
}
/* scrollbar end  */
/*------------------3 col---start------------------------------*/
 
.colm{
    display:inline-block;
    width: 33%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  .colm i{
    font-size: 3rem;
  }

  #i1{
    color: #ff971d;
  }
  #i2{
    color:#28a745;
  }
  #i3{
    color:#e54d26;
  }
  /*------------------3 col--end-------------------------------*/
  

/*toggle switch css--------------------------------------------------------------------*/
/* The switch - the box around the slider */
#switch-mobile{
  display: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fc9c95;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgba(255, 255, 255);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #fd5e53;
}

input:focus + .slider {
  box-shadow: 0 0 1px #fd5e53;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.switch{
  margin-left: 30%;
}
/*toggle switch css end----------------------------------------------------------------*/

/*loading---------------*/
.loader {
 height:5%;
 width: 5%;
 display :inline-block;
 float: left;
 

 -webkit-transform: height,width,transform;
       -o-transform: height,width,transform;
       -moz-transform: height,width,transform;
       transform: height,width,transform;
       -webkit-transition-duration: .5s,.5s,.5s;
       -o-transition-duration: .5s,.5s,.5s;
       -moz-transition-duration: .5s,.5s,.5s;
       transition-duration: .5s,.5s,.5s;  
}
.loader:hover
{
  -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
}

.topnav
{
  font-family: headfont;
}

/* Safari */
@-webkit-keyframes spin {
 0% { -webkit-transform: rotate(0deg); }
 100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 50%{transform: rotate(0deg);}
 100% { transform: rotate(360deg); }
}

body{
   margin: 5px;
   padding :5px 15px;
   background:#ffffff;
}
header{
   background: #cff6cf;
   text-align: center;
   background-image: url(cover.jpg) ;
   background-size: cover;
   height :200%; 
   padding-bottom: 5%;
   display: block;
   border-radius: 15%;
   margin-bottom: 5%;
   margin-top: 5%;
}

h2 {
   font-size: 150%;
   color:#161616;
   font-family:headfont;
   text-align: center;
   font-weight: 800;

}

.left >h2{
  color: #161616;
 font-family: headfont;
 font-size: 150%;
 font-weight: 800;
}


h1{
   color: #FFFFFF;
   text-transform: uppercase;
   text-decoration-style: solid;
   padding-bottom:20px;
   font-size: 250%;
   color: #ffffff;
   font-family: myFirstFont;
   text-shadow: 2px 1px #00FF00;
}
h1:hover{
   color: #646464;
}

nav {
   color: #000000;
   font-family: headfont;
}

p {
 font-family: headfont;
}

.left img{
       
       display: block;
       height: 90px;
       width: 150px;
       border: 2px solid #000000;
       margin-bottom: 40px;
       -webkit-transform: height,width,transform;
       -o-transform: height,width,transform;
       -moz-transform: height,width,transform;
       transform: height,width,transform;
       -webkit-transition-duration: .5s,.5s,.5s;
       -o-transition-duration: .5s,.5s,.5s;
       -moz-transition-duration: .5s,.5s,.5s;
       transition-duration: .5s,.5s,.5s;     
 }
 .left img:hover{
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);
   
 }
   
nav a{
   margin-left:30px;
   margin-bottom: 20px;
   padding: 10px;
   width:10%;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   text-decoration: none;
   color: #000000;
   background: rgba(246,222,246,.5) ;
   font-weight: bold;
   -webkit-transition: width,height,transform;
   -o-transition: width,height,transform;
   -moz-transition: width,height,transform;
   transition: width,height,transform;
   -webkit-transition-duration: .5s,.5s,.5s;
   -o-transition-duration: .5s,.5s,.5s;
   -moz-transition-duration: .5s,.5s,.5s;
   transition-duration: .5s,.5s,.5s;
   display: inline-block;

}

nav a:hover {
   background-color: #fd5e53;
   width:200px;

   }
.active {
   background-color: #ffdfc6;
}


.left{
   display:inline-block;
   padding: 3%;
   float:left;
   
   box-sizing: border-box;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.right{
   background:#ffdfc6;
   
   font-family: Arial,"Times New Roman",serif;
   margin-left: 5px;
   display:inline-block;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   padding: 2%;
   box-sizing: border-box;
   width: 75%;
   
   
}
.right >p:hover {
   background: #ffc8c4 ;
}

.right td i
{
 text-decoration: none;
 color:black;
}
table{
   margin-left:7%;
   margin-top: 2%;
   margin-right: 7%;
}

th{
   background: #fd5e53;
   -webkit-border-radius: 10px 10px 0px 0px;
   -o-border-radius: 10px 10px 0px 0px;
   -moz-border-radius: 10px 10px 0px 0px;
   border-radius: 10px 10px 0px 0px;
   font-family: headfont;
   font-weight: 400;
   padding:1%;
   width: 10%;
   
}

td{
   background-color: #ffffff;
   font-family: headfont;
   font-size: 100%;
   padding:1%;
   -webkit-opacity: .5;
   -o-opacity: .5;
   -moz-opacity: .5;
   opacity: 1;
}
td:first-child { text-align:left; }
td:nth-child(2) { text-align:center; }
td:nth-child(3) { text-align:center; }
td:hover{
   -webkit-opacity: 1;
   -o-opacity: 1;
   -moz-opacity: 1;
   opacity: 1;
 background: rgba(246,222,246,.5) ;
}

footer{
height:10%;
 left: 0;
 margin-top: 10%;
 bottom: 0;
 width: 100%;
 background-color:rgba(8, 8, 8, 0.7);
 color: white;
 text-align: center;
 border-radius: 30%;
 position: bottom;
 
}
#heart{ 
color: #fd0404;
}
#heart:hover{
 color: #ffffff;
}
.social h2
{
  color: #ffffff;
  text-shadow: none;
}

.social{
 bottom:0;
}
.social a{
  text-decoration: none;
}

.social i{
 display: inline;
 width:8%;
 margin-left: 2%;
 color:#ffffff;
font-size:200%;
 -webkit-transform: height,width,transform;
       -o-transform: height,width,transform;
       -moz-transform: height,width,transform;
       transform: height,width,transform;
       -webkit-transition-duration: .5s,.5s,.5s;
       -o-transition-duration: .5s,.5s,.5s;
       -moz-transition-duration: .5s,.5s,.5s;
       transition-duration: .5s,.5s,.5s;    
}
.social i:hover{
   color: rgb(148, 248, 81);
}
i:hover::before {
  transform: rotate(360deg);
}

i:before {
  display: inline-block;/* mandatory to be able to use transform */
  transition: 1s all;
}
.credit
{
color: #ffffff;
text-align: center;
padding: 2px;
border-radius: 50%;
font-family: headfont;
}



/*  Collab */
#collab
{
margin-top: 5%;
}

/*  Guitar */
#guitar
{
margin-top: 10%;
}

/*  Vlogs */
#vlogs
{
margin-top: 10%;

}
.sub
{
  background: rgba(253, 253, 253, 0.5);
 width:60px;
 height: 30px;
 font-size: 90%;
 float:right;
 margin-left: 1%;
 outline: none;
 border-radius: 10px;
 cursor: pointer;
 font-family: headfont;
}
.subtext
{
  background: rgba(253, 253, 253, 0.5);
  width:75px;
  margin-left: 20px;
  height: 25px;
  font-size: 60%; 
  text-align: center;
  float :right;
  display: inline-block;
  cursor: pointer;
  font-family: headfont;
}
::placeholder
{
 opacity: 1;
 color:#000000;
}

.icon
{
 display:none;
}

.topnav {
 overflow: hidden;
 background-color:#e5e9e5;
 border-radius: 3%;
 color :#000000;
 }

.topnav a {
 float: left;
 display: block;
 color: #000000;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 font-weight: 500;
 }

.topnav #navblue
{
  background: #e5e9e5;
  border-top: #000000 solid 1px;
  border-radius: 1%;
}
.topnav #darknav
{
  background: #e5e9e5;
  border-top: #000000 solid 1px;
  border-radius: 1%;
}

.topnav a:hover {
 background-color: #e5e9e5;
 color: #000000;
}

.topnav a.active {
 background-color: #e5e9e5;
 color: #000000;
}

.topnav .icon {
 display: none;
}
.topnav
{
 display:none;
}

@media screen and (max-width: 876px) {
 .topnav
 {
   display: block;
 }
 .topnav a:not(:first-child) {display: none;}
 .topnav a.icon {
   float: right;
   display: block;
 }
}

@media screen and (max-width: 880px) {
 .topnav.responsive {position: relative;}
 .topnav.responsive .icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: center;
 }
 
 #cato-logo .loader
 {
   height:20%;
   width: 20%;
   
   margin-right: 5%;
 } 
}

/*-----------------------------------------------------------------*/
@media (max-width: 880px)
{
 
 
/*------------------3 col---start------------------------------*/

.colm{
    display:inline-block;
    width: 32%;
    margin-top:13% ;
    text-align: center;
  }
  .colm i{
    font-size: 250%;
  }

  header{
    margin-top: 7rem;
  }
  #switch-web{
  display: none;
  }
  #switch-mobile{
    display: inline-block;
    text-align: center;
    margin-left: 42%;
    margin-top:0%;
		
  }
  /*------------------3 col--end-------------------------------*/
  .subtext
 {
   font-size: 53%;
   padding :5px;
   height: 15px;
   width:40px;
   margin-top: 5%;
   margin-left: 5%;
   font-weight: 400;
}

table{
  margin-left: 0%;
  margin-right: 0%;
}

td{
  padding: 2%;
}
 #dark
 {
   display:none;
 }
 ::placeholder
 {
   color:#000000;
 }
 .sub
 {
   font-size: 60%;
   height: 30px;
   width:55px;
   margin-top: 5%;
   margin-left: 5%;
   color:#000000;
   
 }
 
 .topnav
 {
   display: block;
 }
 .dropbtn
 {
   display:inline;
 }
 #leftg
 {
  margin-top: 20%;
 }
 .left img
 {
   display:inline;
   width: 132px;
   height: 100px;
   margin-top: 15%;
 }
 .leftgallery .galleryimg{
   width: 30%;
   margin-left: 2%;
 }
 .leftgallery .galleryimg a{
   text-decoration: none;
 }
 #imageshide
 {
   display:none;
 }

 .right
 {font-size: 80%;
   margin-top: 20%;
   margin-left: 5%;
   margin-right: 5%;
   margin-top: 25%;
   width: 90%;
 }
 

 nav
 {
   display:none;
 }

 

 /*  Collab */
#collab
{
margin-top: 20%;

}

/*  Guitar */
#guitar
{
margin-top: 30%;
}

/*  Vlogs */
#vlogs
{
margin-top: 30%;

} 
footer
{
  margin-top: 30%;
}
.social i
{
  font-size: 140%;
  margin-left: 5%;
}

  .dropbtn {
   background-color: #4CAF50;
   color: #ffffff;
   padding: 16px;
   font-size: 16px;
   border: none;
   border-radius: 40%;
 }
 
 .dropdown {
   position: relative;
   display: inline-block;
 }
 
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #ffc8c4;
   width: 78px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   border-radius: 30%;
 }
 
 .dropdown-content a {
   color: #000000;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }
 
 .dropdown-content a:hover {background-color: rgba(0,0,0,0.2);}
 
 .dropdown:hover .dropdown-content {display: block;}
 
 .dropdown:hover .dropbtn {background-color: #ffc8c4;}

}
/*----------------for smalll screens---------------------------------------------------------------------------*/
@media (max-width: 650px)
{
  .leftgallery .galleryimg{
    width: 45%;
  }
}







@media (max-width: 350px)
{
  
/*------------------3 col---start------------------------------*/
.row{
  margin-left: 10%;
}  
.colm{
    display:inline-block;
    width: 32%;
    margin-top: 2rem;
    text-align: center;
  }
  .colm i{
    font-size: 1.5rem;
  }

  header{
    margin-top: 7rem;
  }
  #switch-web{
  display: none;
  }
  #switch-mobile{
    display: inline-block;
    text-align: center;
    margin-left: 40%;
    margin-top:2rem;
		
  }

  .leftgallery .galleryimg{
    width: 90%;
    height: 18%;
  }
  /*------------------3 col--end-------------------------------*/

 .dropbtn
 {
   display:inline;
 }
 
 .left img
 {
   display:inline;
   width: 110px;
   height: 70px;
 }
 
 #imageshide
 {
   display:none;
 }

 .right
 {font-size: 70%;
   margin-left: 5%;
   margin-right: 5%;
   margin-top: 25%;
   width: 90%;
 }

 nav
 {
   display:none;
 }

 /*  Collab */
#collab
{
margin-top: 20%;

}
header
{
 background-image: url("./mobile\ view.jpg");
 border :#000000 solid;

}
table{
  margin-left: 0%;
  margin-right: 0%;
}

/*  Guitar */
#guitar
{
margin-top: 40%;
}

/*  Vlogs */
#vlogs
{
margin-top: 40%;

} 
footer
{
 margin-top: 50%;
}
.social i
{
  font-size: 140%;
  margin-left: 5%;
}
}
/* nav meadia query for mobile view   ----------------------------------------------------*/
@media (max-width: 350px){
 .dropbtn {
   background-color: #4CAF50;
   color: #ffffff;
   padding: 16px;
   font-size: 16px;
   border: none;
   border-radius: 40%;
 }

 #dark
 {
   display:none;
 }
 
 .dropdown {
   position: relative;
   display: inline-block;
 }
 
  td{
   padding: 2%;
 }
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: rgba(198, 250, 241, 0.9);
   width: 78px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   border-radius: 30%;
 }
 
 .dropdown-content a {
   color: #000000;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }
 .dropdown-content a:hover {background-color: rgba(0,0,0,0.2);}
 
 .dropdown:hover .dropdown-content {display: block;}
 
 .dropdown:hover .dropbtn {background-color: #3e8e41;}

}
/*---------------------------------------------------------------*/
.dark-mode {
 background-color: #000000;
 color: #ffffff;
 background-image: url(./darkback.jpg) ;
}
.dark-mode h2
{
  color:white;
  text-shadow: 2px 2px #000000;
}
.dark-mode .right
{
  background: rgba(0,0,0,0.5);
}
.dark-mode th
{
  color:#ffffff;
  font-weight: 400;
  background: #fd5e53;
}
.dark-mode td
{
 color:#ffffff;
 background:#000000;
 opacity:1;
}
.dark-mode .right td i
{
 text-decoration: none;
 color:#ffffff;
}

.dark-mode header
{
 border: rgb(254, 255, 255) solid;
}

.dark-mode .sub
{
 background:#fcd8d6;
}

.dark-mode .subtext
{
 background:#fcd8d6;
}

.dark-mode nav a:hover {
  background: #000000;
  width:200px;
  color:#ffffff;

  }
.dark-mode .active {
  background: #000000;
  color:#ffffff;
}
.dark-mode .right >p:hover {
  background: rgba(12, 12, 12, 0.8) ;
}

.dark-mode td:hover{
  -webkit-opacity: 1;
  -o-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
background:  ;
}
#dark
{
 width:50px;
 height:40px;
 margin-left: 2%;
 font-size: 70%;
}
.dark-mode #i1{
  color: #28a745;
}
.dark-mode #i2{
  color: #e54d26;
}
.dark-mode #i3{
  color: #007bff;
}
/*-------------------------------Graphic Design--------------------------------------------*/