@charset "utf-8";
/* CSS Document */
html {
    font-size: 62.5%
}

body {
	margin: 0;
	padding: 0;
    font-size: 100%;
    background-color: #1c252b;
}    	

* {
  box-sizing: border-box; 
}

a {
	text-decoration: none;
    border-bottom: 2px solid #c3a332;;
    color: inherit;
}

/*a:hover {
    border-bottom: 4px solid #c3a332;
}*/

q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@keyframes pulse{
    0% { opacity:1; }
    50% { opacity:.25; }
    100% { opacity:1; }
}
@-webkit-keyframes pulse{
    0% { opacity:1; }
    50% { opacity:.25; }
    100% { opacity:1; }
}
@-moz-keyframes pulse{
    0% { opacity:1; }
    50% { opacity:.25; }
    100% { opacity:1; }
}

.typed-cursor{
	font-family: 'Oswald', 'Arial', sans-serif;
    font-style: normal;
	font-size: 2.5rem;
	color: #4bd84b;
    opacity: 1;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    text-shadow: 0px 0px 8px rgba(75,216,75,.65);
    letter-spacing: 1px;
}

#typed-strings {display: none;

}

.main_container {
    margin: 10vh 0 5vh 0;
    width: 100%;
    height: auto;
}

.title {
    width: 75%;
    height: 35vh;
    /* padding-left: 56px; */
    background-image: url("../img/title.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    margin: 0 28px 56px 11%;
    -o-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -moz-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -webkit-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
}

.pulse {
    -ms-animation: pulse 5s infinite;
    -o-animation: pulse 5s infinite;
    -webkit-animation: pulse 5s infinite;
    -moz-animation: pulse 5s infinite;
    animation: pulse 5s infinite;
    -ms-animation-delay: 2s;
    -o-animation-delay: 2s;
    -webkitanimation-delay: 2s;
    animation-delay: 2s;
}

.main_text_container {
    margin: 0 auto;
    width: 75%;
    max-width: 800px;
    min-width: 300px;
}

.maintag_text {
    /*color: #e4cc2d;*/
    color: #4bd84b;
    font-size: 2.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    text-shadow: 0px 0px 8px rgba(75,216,75,.65);
    word-spacing: 2px;
    letter-spacing: 1px;
}

.text_theend {
    color: #4bd84b;
    font-size: 4.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    text-shadow: 0px 0px 8px rgba(75,216,75,.65);
    word-spacing: 2px;
    letter-spacing: 1px;
}

.main_choices_container {
    margin: 56px auto;
    width: 75%;
    max-width: 800px;
    min-width: 300px;
    display: none;
}

.404_choices_container {
    margin: 200px auto;
    width: 75%;
    max-width: 800px;
    min-width: 300px;
    display: block;
}

a.choice_good {
    color: #4bd84b;
    font-size: 2.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    width: auto;
    height: auto;
    border: 2px solid #4bd84b;
    -o-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -moz-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -webkit-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    display: inline;
    padding: 14px;
    margin-right: 28px;
    text-align: center;
    word-spacing: 2px;
    letter-spacing: 1px;
    /*text-shadow: 0px 0px 8px rgba(75,216,75,.65);*/
}

a.choice_good:hover {
    color: #1c252b;
    background-color: #4bd84b;
    opacity: 1;
    -webkit-animation-name: none;
}

a.choice_good:active {
    color: #4bd84b;
    background-color: #4bd84b;
    opacity: 1;
    -webkit-animation-name: none;
}


a.choice_bad {
    color: #4bd84b;
    font-size: 2.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    width: auto;
    height: auto;
    border: 2px solid #4bd84b;
    -o-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -moz-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -webkit-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    display: inline;
    padding: 14px;
    text-align: center;
    word-spacing: 2px;
    letter-spacing: 1px;
    /*text-shadow: 0px 0px 8px rgba(75,216,75,.65);*/
}

a.choice_bad:hover {
    color: #1c252b;
    background-color: #4bd84b;
}

a.choice_bad:active {
    color: #4bd84b;
    background-color: #4bd84b;
}

.choice_bad_trick {
    color: #4bd84b;
    font-size: 2.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    width: auto;
    height: auto;
    border: 2px solid #4bd84b;
    -o-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -moz-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -webkit-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    display: inline;
    padding: 14px;
    text-align: center;
    word-spacing: 2px;
    letter-spacing: 1px;
}

.choice_bad_trick:hover {
    opacity: 0;
    cursor: default;
}

a.container_theend {
    color: #4bd84b;
    font-size: 2.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    width: auto;
    height: auto;
    display: inline;
    padding: 14px;
    margin-right: 28px;
    text-align: center;
    text-shadow: 0px 0px 8px rgba(75,216,75,.65);
    word-spacing: 2px;
    letter-spacing: 1px;
}

a.link_work {
    color: #4bd84b;
    font-size: 2.5rem;
    font-family: 'Oswald', 'Arial', sans-serif;
    line-height: 150%;
    width: auto;
    height: auto;
    border: 2px solid #4bd84b;
    -o-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -moz-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    -webkit-filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    filter: drop-shadow(0px 0px 5px rgba(75,216,75,.5));
    display: block;
    padding: 14px;
    margin: 28px 0 0 0;
    text-align: center;
    word-spacing: 2px;
    letter-spacing: 1px;
    /*text-shadow: 0px 0px 8px rgba(75,216,75,.65);*/
}

a.link_work:hover {
    color: #1c252b;
    background-color: #4bd84b;
    opacity: 1;
    -webkit-animation-name: none;
}

a.link_work:active {
    color: #4bd84b;
    background-color: #4bd84b;
    opacity: 1;
    -webkit-animation-name: none;
}

.comicsans {
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', 'Oswald', sans-serif;
}

.toomuchkerning {
    letter-spacing: 10px;
}

/*@media (max-width: 505px) {
    .choice_good {
        padding: 7px;
    }

    .choice_bad {
        padding: 7px;
    }
}*/

@media (max-width: 414px) {
    .title {
        width: 98%;
        height: 35vh;
        background-image: url("/img/title.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom center;
        margin: 0 28px 28px 7px;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {

    a.choice_bad:hover {
        color: #4bd84b;
        background-color: transparent;
    }

    a.choice_bad:active {
        color: #4bd84b;
        background-color: #4bd84b;
    }

    a.choice_good:hover {
        color: #4bd84b;
        background-color: transparent;
    }

    a.choice_good:active {
        color: #4bd84b;
        background-color: #4bd84b;
    }

    a.link_work:hover {
        color: #4bd84b;
        background-color: transparent;
    }

    a.link_work:active {
        color: #4bd84b;
        background-color: #4bd84b;
    }
}

@media (max-width: 768px) and (orientation: portrait) {

    a.choice_bad:hover {
        color: #4bd84b;
        background-color: transparent;
    }

    a.choice_bad:active {
        color: #4bd84b;
        background-color: #4bd84b;
    }

    a.choice_good:hover {
        color: #4bd84b;
        background-color: transparent;
    }

    a.choice_good:active {
        color: #4bd84b;
        background-color: #4bd84b;
    }
    a.link_work:hover {
        color: #4bd84b;
        background-color: transparent;
    }

    a.link_work:active {
        color: #4bd84b;
        background-color: #4bd84b;
    }
}

@media (max-width: 480px) {

    .main_container {
        margin: 28px 0 5vh 0;
        width: 100%;
        height: auto;
    }

    .main_choices_container {
        margin: 28px auto;
        width: 75%;
        max-width: 800px;
        min-width: 300px;
        display: none;
    }

    a.choice_good {
        text-align: left;
        display: block;
        width: 100%;
    }

    a.choice_bad {
        text-align: left;
        display: block;
        margin-top: 28px;
        width: 100%;
    }

    .choice_bad_trick {
        text-align: left;
        display: block;
        margin-top: 28px;
        width: 100%;
    }
}