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

@font-face {
    font-family: 'Jeko-SemiBold';
    src:  url('/fonts/Jeko Semi Bold.ttf')
}

@font-face {
    font-family: 'Jeko-MediumItalic';
    src:  url('/fonts/Jeko Medium Italic.ttf')
}

@font-face {
    font-family: 'Jeko-Regular';
    src:  url('/fonts/Jeko Regular.ttf')
}

html {
    min-height:100%;
    /* position:relative; */
}
html, 
body {
    height: 100%;
}

main {
    background-color: #1B1D29;
    /* border-radius: 50px; */
    box-shadow: 29px 38px 50px -29px #08090D;
}

#title {
    text-shadow: 0px 0px 30px #1F3891;
}

.button {
    @apply w-full h-32 md:w-56 md:h-16 text-3xl md:text-lg rounded-full font-title font-normal text-white flex items-center justify-center p-4 bg-center bg-contain transition ease-in-out text-center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(0deg, rgba(27, 29, 41, 0.49), rgba(27, 29, 41, 0.49));
    box-shadow: inset 0px 0px 30px #000000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-backdrop-filter: brightness(50%);
    backdrop-filter: brightness(50%);
}

.button:hover {
    box-shadow: inset 0px 0px 100px #000000;;
}

#button1 {
    background-image: url('/projects.jpg?webp');
}

#button2 {
    background-image: url('/hosted.jpg?webp');
}

.error {
    font-size: 50pt;
}

.main {
    height: 100%;
    width: 100%;
}

body {
    background: linear-gradient(107.56deg, #12151E 0%, #060910 100%);
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.bg {
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    z-index: -1;
  }

.link {
    background-image: url('/link.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-color: #151515;
}