/*Stykesheet Information
Title: General Styles 
Author:Maciek Bajda @globealpha
Tags: Portfolio 
*/


@import  'socials.css';
@import 'navigation.css';
@import 'HamBurger_Menu.css';
@import 'media_queries.css';
@import 'About.css';
@import 'Work.css';




@keyframes CardRotation
{
    0% 
    {
        transform: rotateY(45deg);
    }

    50% {
        transform: rotateY(90deg);
    }

    100%
    { 
        transform:rotateY(180deg);

    }
}



* 
{
  padding: 0;
  margin: 0;
}

html 
{
    display:inline;
    height: auto;
}

body 
{
    background-image: url(../images/DarkForest.jpg);
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
    height: 100%;
}




.active--tab 
{
    background-color: yellow;
    color:green;
}

/*Work*/

/* Card  */
.ShowCaseCard 
{
    position: absolute;
    width: 500px;
    height: 500px;
    top: 221px;
    left: 276px;
    perspective:1000px;
    transform-style: preserve-3d;
}


 .ShowCaseCard:hover 
 {
   animation: CardRotation 6s forwards;
   backface-visibility: hidden;
  }


.ShowCaseCard--front 
{
    position: absolute;
    color: yellow;
    padding: 44px;
    width: 570px;
    height: 300px;
    backdrop-filter: blur(9px);
    background: rgba(0,255,0,0.5);
    backface-visibility: hidden;
}



.ShowCaseCard—-back
{
    
position: absolute;
top: -2px;
left: -151px;
background: green;
padding: 44px;
width: 573px;
height: 301px;
    
backface-visibility: hidden;
    
transform: rotateY(180deg);
}

 .ShowCaseCard--front_OwlerContainer 
 {
  width: 21px;
  position: relative;
  top: -98px;
  left: 237px;
  height: 27px;
 }

 
 .Owler_Image
 {

   height: 110px;

 }


 .ShowCaseCard—front_CoreSkillBadges
{
  position:relative;
  top: 120px;
  right: -212px;
}

.ShowCaseCard—front_CoreSkillBadges--text 
{
    position: relative;
    left: 20px;
    top: -50px;
    font-size: 28px;
}

.ShowCaseCard—front_CoreSkillBadges--skill_logos
{
    position:relative;
    left: 36px;
    top: -36px;
}

.ShowCaseCard--front_CoreSkillBadges_js_badge, .ShowCaseCard--front_CoreSkillBadges_react_badge 
{   
    width: 100px;
    height: 56px;
}

.ShowCaseCard--front_CoreSkillBadges_js_badge
{
  position: relative;
  top: 29px;
  height: 36px;
  right: 56px;
  
}


.Project--Card--front_CoreSkillBadges_js_badge
{
  position: relative;
  top: 53px;
  height: 36px;
  right: 9px;
}
.Project--Card--front_CoreSkillBadges_react_badge
{
  position: relative;
  top: 54px;
  height: 36px;
  right: -8px;
}


.ShowCaseCard--front_CoreSkillBadges_js_badge--text
{
    position: absolute;
    top: 79px;
    left: -46px;
    font-size: 21px;
}


.ShowCaseCard--front_CoreSkillBadges_react_badge--text 
{
    position: absolute;
    left: 77px;
    top: 80px;
    font-size: 21px;
}

.ShowCaseCard--front_CoreSkillBadges_react_badge
{
    position: relative;
    top: -29px;
    height: 36px;
    left: 50px;
}


#ShowCaseCard—-back_Title 
{
    position: relative;
    left: 192px;
    top: -16px;
    font-size: 32px;
}


.ShowCaseCard—-back_gallery
{
    position: relative;
    left: -26px;
    display: inline-flex;
    /* align-content: flex-start; */
}

.ShowCaseCard—-back_thumbnail 
{
  position: relative;
  top: 11px;
  width: 185px;
  padding-left: 2px;
  height:180px;
  display: inline;
}

.ShowCaseCard—-back_text 
{
    font-size: 13px;
    position: relative;
    /* margin: -11px; */
    /* display: flex; */
    top: 239px;
    left: -112px;
}




.rotate--button 
{
    position: absolute;
    top: 351px;
    left: 526px;
    /* padding: 10px; */
    width: 132px;
    height: 38px;
}


.Owl2 
{
  left: 122px;
  top: 139px;
  width: 180px;
  clip-path: ellipse(47% 257% at 89% 58%);
  position: relative;
  border-radius: 100px 100px;
  height: 184px;
}

.Owler
{
  position: absolute;
  left: -107px;
  top: -87px;
}

.Owler_subtitle
{
  color: yellow;
  position: relative;
  left: 205px;
}


.Footer--home
{
    background-color: brown;
    width: 100%;
    height: 95px;
    position: absolute;
    top: 688px;
}

.Contact-Icons 
{
  position: relative;
  font-size:20px;
  left: 688px;
  top: -12px;
  display: flex;
}

.Contact-Icons_links
{
    position: relative;
    display: flex;
    font-size: 13px;
    top: 38px;
    right: 122px;

}

.LinkedIn 
{
    position: relative;
    left: -25px;
}

.GitHub 
{
    position: relative;
    left: 101px;
    top: 0px;
}

.FreeCodeCamp 
{
    position: relative;
    left: 36px;
    top: 0px;
}

.Contact-Icons_header 
{
    font-size: 23px;
}


.Blog_link-button
{
  position: relative;
  left: 119px;
  padding: 10px;
  border-radius: 21px;
  background: white;
  text-decoration:none;
  text-decoration-color: none;
}



.Site--Map 
{
    font-size: 28px;
    position: relative;
    top: 20px;
}