@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

html {
    @apply font-sans;
}
.main {
    background-image: url('~assets/images/bg-sm.jpg');
    background-size: cover;
    background-position: center;
    @apply min-h-screen;
}
@screen sm {
    .main {
        background-image: url('~assets/images/bg-md.jpg');
    }
}
@screen md {
    .main {
        background-image: url('~assets/images/bg-lg.jpg');
    }
}
@screen lg {
    .main {
        background-image: url('~assets/images/bg-xl.jpg');
    }
}
@screen xl {
    .main {
        background-image: url('~assets/images/bg-xxl.jpg');
    }
}
.card {
    @apply text-white py-4 px-4;
    background-color: rgba(0,0,0,0.3);
}

.content {
    @apply relative overflow-y-auto;
    height: calc(100vh - 7rem);
}

.page {
    @apply text-white py-4 px-4 w-full right-0;
    background-color: rgba(0,0,0,0.3);
    min-height: calc(100vh - 7rem);
}
@screen sm {
    .page {
        @apply w-3/4;
    }
}
@screen md {
    .page {
        @apply w-3/5;
    }
}
@screen lg {
    .page {
        @apply w-1/2;
    }
}
@screen xl {
    .page {
        @apply w-2/5;
    }
}

.page h1 {
    @apply text-4xl;
}
.page h2 {
    @apply text-3xl;
}

.page ul {
    @apply list-disc;
}
.page ul li {
    @apply ml-4;
}
.page a {
    @apply text-yuika-blue-200;
}