.crimson-text-regular {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
}

.crimson-text-semibold {
    font-family: "Crimson Text", serif;
    font-weight: 600;
    font-style: normal;
}

.crimson-text-bold {
    font-family: "Crimson Text", serif;
    font-weight: 700;
    font-style: normal;
}

.crimson-text-regular-italic {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: italic;
}

.crimson-text-semibold-italic {
    font-family: "Crimson Text", serif;
    font-weight: 600;
    font-style: italic;
}

.crimson-text-bold-italic {
    font-family: "Crimson Text", serif;
    font-weight: 700;
    font-style: italic;
}



:root {
    background: linear-gradient(200deg, #A6FBFF, #DCFFEA);
    height: 100vh;
    font-family: Crimson Text, Helvetica, sans-serif, sans-serif;
}

a {
    color: #175F7D;
}


div {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    color: #175F7D;
    width: 100vw;
}

/* Header */

header {
    width: 100vw;
    height: 8.5vh;
    min-height: 75px;
    background-color: #175F7D;
    position: fixed;
    top:0;
    left: 0;
    padding: 1rem 2rem;
}

.header-title a {
    margin: 0;
    font-size: 2rem;
    color: #FFF;
}

.header-title {
    transition-duration: 0.3s;
}

.title-content {
    display: flex;
    flex-direction: column;
    width: 40vw;
}

.header-title:hover {
    transform-origin: left;
    transform: scale(1.05);
}

.tagline {
    padding-top: 0.1rem;
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    color: #FFF;
}

.header-button {
    width: auto;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
    border: 3px solid;
    border-radius: 25px;
    padding: 0.25rem;
}

.header-button {
    width: 25%;
    text-decoration: none;
    background-color: #FFF;
    transition-duration: 0.3s;
}

.tilt-left:hover {
    transform: scale(1.1) rotate(-2deg);
}

.tilt-right:hover {
    transform: scale(1.1) rotate(2deg);
}

.button-grid {
    position: relative;
    bottom: 75px;
    left: 200px;
    width: 75vw;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
}

.mobile {
    display: none;
}


.spin-img img {
    height: 100px;
}

.spin-img {
    height: 100px;
    width: 100px;
    transition-duration: 1s;
}

.spin-img:hover {
    transform: rotate(360deg) scale(1.1);
}

.spin-img:active {
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    0% {
        rotate: 0deg;
    }

    50% {
        rotate: 180deg;
    }

    100% {
        rotate: 360deg;
    }
}


section {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

hr {
    width: 90%;
    background-color: #175F7D;
    height: 3px;
    border: none;
    border-radius: 50px;
}

#header-behind {
    height: 7vh;
    min-height: 50px;
}

/* Commission Status */

.big-status {
    color: #fff;
    font-size: 5vw;
    font-weight: 900;
    -webkit-text-stroke: #175F7D;
    -webkit-text-stroke-width: 2px;
    animation: blinker 2s linear infinite;
    border-radius: 25px;
    margin-bottom: -0.1rem
}

@keyframes blinker {
    0% {
        box-shadow: 0 0 0 5px #175F7D;
        border: 3px dotted #175F7D;
        padding: 1rem;
    }

    49% {
        box-shadow: 0 0 0 5px #175F7D;
        border: 3px dashed #175F7D;
        padding: 1rem;
    }

    50% {
        box-shadow: 0 0 0 5px transparent;
        border: 3px dotted #175F7D;
        padding: 1rem;
    }

    100% {
        box-shadow: 0 0 0 5px transparent;
        border: 3px dashed #175F7D;
        padding: 1rem;
    }
}

/* News */

.basic-box {
    border: 3px solid #175F7D;
    border-radius: 25px;
    width: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: center;
    background-color: #ffffff50;
    padding-bottom: 1rem;
    margin: 2rem;
}

.big-title {
    font-size: xxx-large;
    font-weight: 900;
    margin: 1rem;
}

.news-text {
    border: 3px solid #175F7D;
    border-radius: 25px;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: center;
    background-color: #ffffff50;
}

.medium-title {
    font-size: x-large;
    font-weight: 600;
}

#commissions-info-title {
    text-align: center;
}

.boxed-text {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    margin: 1rem;
}

.important {
    color: #FF0000;
}

#commissions-info {
    width: 90vw;

}

/* Media queries */


@media only screen and (max-width: 950px) {
    .mobile {
        display: flex;
    }
    .button-grid {
        position: relative;
        width: 70vw;
    }

    .header-button:not(.mobile) {
        display: none;
    }

    #header-behind {
        height: 100px;
    }
}

@media only screen and (max-width: 600px) {
    .mobile {
        display: flex;

    }

    .header-button:not(.mobile) {
        display: none;
    }

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 1rem 0;
        height: 11vh;
        text-align: center;
    }

    .tagline {
        text-wrap: nowrap;
    }

    .header-title {
        padding: 0;
        margin: 0;
    }

    .title-content {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .button-grid {
        position: static;
        width: 90%;
        margin: 0 1rem;
    }

    .header-button {
        padding: 0.5rem;
    }

    .spin-img {
        display: none;
    }

    main {
        padding-top: 2rem;
    }

    .big-status {
        color: #175F7D;
        -webkit-text-stroke: transparent;
    }

    #header-behind {
        height: 125px;
    }
}