@tailwind base;
@tailwind components;
@tailwind utilities;


@font-face {

    font-family: 'manrope';
    src: url('./manrope.ttf');

}

body {
    padding: 0;
    margin: 0;
    font-family: 'manrope', 'MR', sans-serif;
    font-weight: 600;
    width: 100vw;
    height: 100vh;
    background: #0b001b;
    overflow-x: hidden;
    max-width: 100%;
}

img.profile{
    border-radius: 30px;
    height: 100px;
    aspect-ratio: 1 / 1;
	box-shadow: 6px 6px 15px #0b001b;
}

p{
    
}

.kmscontainer {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      "windows office"; 
}

.windows { grid-area: windows; }
.office { grid-area: office; }

.winvercontainer {  
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        "eleven ten eight seven"; 
}
  
.eleven { grid-area: eleven; }

.ten { grid-area: ten; }

.eight { grid-area: eight; }

.seven { grid-area: seven; }

.officevercontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px;
    grid-template-areas: 
        "twentyone nineteen";
}

.twentyone { grid-area: twentyone; }

.nineteen { grid-area: nineteen; }

.legacy { grid-area: legacy; }
  

.wave {
    animation-name: wave-animation;  
    animation-duration: 2.5s;        
    animation-iteration-count: infinite;  
    transform-origin: 70% 70%;       
    display: inline-block;
}
.emohi:hover {
    animation-name: wave-animation;  
    animation-duration: 2.5s;        
    animation-iteration-count: 1;  
    transform-origin: 70% 70%;       
    display: inline-block;
}
  
  @keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}


.blurbg {
    width:100%;
    height:100%;
    background-size:cover;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}

button{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.45), 0 17px 50px 0 rgba(0,0,0,0.40);
    transition: transform .1s;
    outline: none;
}

.shadow{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.45), 0 17px 50px 0 rgba(0,0,0,0.40);
}

button:hover{
    transform: scale(1.06);
}

.modal{
	display: block;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.9);
}

.modal-content{
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}