@import 'bulma.css';

.avatar {
    width: 210px;
    border-radius: 50%;
}

.hero {
    padding-top: 2rem;
}

.navbar {
    padding: 1.2rem 0;
}

.tiles {
    margin-top: 5rem;
}

.contact-button {
    margin-top: 5rem;
}

.has-rounded-border-white {
    border: 1px solid white;
    border-radius: 20px;
}

.has-rounded-border-black {
    border: 1px solid black;
    border-radius: 20px;
}

.welcome-content {
    margin-top: 5rem;
}

.moving-title {
    position: relative;
    animation: moveInFromLeft 2s normal, fadeIn 2s normal;
}

.moving-subtitle {
    position: relative;
    animation: moveInFromRight 2s normal, fadeIn 2s normal;
}

.fade-in {
    animation: fadeIn 2s ease-in;
}

.to-reveal {
    visibility: hidden;
}

.column.active {
    visibility: visible;
    position: relative;
    animation: moveInFromLeft 1s normal, fadeIn 1s normal;
}

.box.active {
    visibility: visible;
    position: relative;
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes moveInFromLeft {
    from {right: 200px;}
    to {right: 0;}
}

@keyframes moveInFromRight {
    from {left: 200px;}
    to {left: 0;}
}

.navbar-item {
    display: flex;
}

.navbar,
.navbar-menu,
.navbar-start,
.navbar-end {
    align-items: stretch;
    display: flex;
    padding: 0;
}

.navbar {
    padding: 1.2rem 0;
}

.navbar-menu{
    flex-grow: 1;
    flex-shrink: 0;
}
.navbar-start{
    justify-content: flex-start;
    margin-right: auto;
}
.navbar-end{
    justify-content: flex-end;
    margin-left: auto;
}

.navbar .container {
    display: flex;
}
.navbar-item {
    display: flex;
    align-items: center;
}

.box:hover .subtitle {
    font-weight: bold;
}

.card {
    margin-top: 10px;
}

.question-cards {
    margin-top: 5rem;
}

@media only screen and (min-width: 900px) {
    .question-cards {
        width: 60%;
    }
}

.hero.is-fullheight-with-navbar {
    min-height: calc(100vh - 6rem);
}