@font-face {
    font-family: 'Borel';
    src: url('/public/fonts/Borel-Regular.ttf')  format('truetype');
}

@font-face {
    font-family: 'Dancing Script';
    src: url('/public/fonts/DancingScript-VariableFont_wght.ttf')  format('truetype');
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/public/fonts/JosefinSans-VariableFont_wght.ttf')  format('truetype');
}

@font-face {
    font-family: 'SourceCodePro';
    src: url('/public/fonts/SourceCodePro-VariableFont_wght.ttf')  format('truetype');
}

@font-face {
    font-family: 'Tektur';
    src: url('/public/fonts/Tektur-VariableFont_wdth,wght.ttf')  format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('/public/fonts/Roboto-Bold.ttf')  format('truetype');
}

html {
    /* --primary-color: #3F334D;
    --secondary-colour: #574B60;
    --tertiary-colour: #7D8491;
    --quarternary-colour: #C0C5C1;
    --quinary-colour: #EAF0CE; */
    overflow-x: hidden;
    --primary-color: #0D1321;
    --secondary-colour: #1D2D44;
    --tertiary-colour: #3E5C76;
    --quarternary-colour: #748CAB;
    --quinary-colour: #F0EBD8;
}

body {
    /* all: unset; */
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    background-color: #151921;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: var(--quinary-colour);
    padding: 0 !important;
    overflow-x: hidden;
    margin: 0;
}

.section-container {
    margin: 0;
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.section-first {
    background: linear-gradient( to bottom, #151921, #1D2D44  );
}

.section-second {
    background: linear-gradient( to bottom, #1D2D44, #420039 );
}

.section-third {
    background: linear-gradient( to bottom, #420039, #0D1821 );
}

.section-fourth {
    background: #0D1821;
}

@keyframes revolve_text {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.welcome-initial {
    font-size: clamp(5rem, 25vmin, 10rem);
    height: 100vh;
    position: relative;
    display: inline-flex;
    font-family: 'Josefin Sans';
    flex-direction: row;
    align-items: center;
}

.welcome-header {
    display: block;
    position: fixed;
    top: 0;
    font-size: clamp(1rem, 25vmin, 3rem);
    width: 100%;
    height: 'min-content';
    text-align: center;
    background-color: #151921 !important;
    z-index: 9999;
    padding-bottom: 1rem;
    transition: all 0.3s ease-in-out;
}

.welcome-header .header-contents {
    white-space: nowrap;
}

.welcome-header.open {
    opacity: 1;
    transform: scaleY(1);
}

.welcome-header .header-contents, .welcome-heading {
    background: linear-gradient(
        to right,
        var(--quinary-colour) 20%,
        #6EEB83 30%,
        #1BE7FF 60%,
        #D72638 80%,
        var(--quinary-colour) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: revolve_text 5s ease-in-out infinite alternate;
    font-family: 'Dancing Script';
}

.welcome-heading {
    position: relative;
    font-size: clamp(5rem, 25vmin, 10rem);
    font-weight: 900;
    width: fit-content;
    height: 100vh;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.welcome-heading .large-character {
    font-size: clamp(7rem, 25vmin, 12rem);
}

.welcome-heading .second-line {
    padding-left: 9rem;
}

.main-container {
    opacity: 0;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    transition: opacity 5s ease;
}

.section-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.message-initial {
    font-size: clamp(1.5rem, 25vmin, 2rem);
    height: 100vh;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.message-initial img, .message-initial iframe {
    border: 0.2rem solid #77DD77;
    border-radius: 0.4rem;
    max-height: 70vh;
}

.message-initial .thumbnail {
    width: 70% !important;
    cursor: pointer;
}

.message-initial .thumbnail > img {
    min-height: 100%;
    min-width: 100%;
}

.message-initial > iframe {
    max-width: 70%;
    margin: auto;
    display: block !important;
}

.riddle-text img {
    max-width: 300px;
    max-height: 300px;
}

.message-initial .creator-name {
    font-family: 'Josefin Sans';
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--quinary-colour);
}

.message-initial .creator-message {
    font-family: 'SourceCodePro';
    font-size: 1.5rem;
    max-width: 40rem;
    text-align: center;
}

.message-initial .message-contents {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.game-container {
    padding: 1rem;
    text-align: center;
    max-width: 40rem;
    border-radius: 0.3rem;
    background-color: #3E5C76;
    box-shadow: inset;
    font-size: large;
}

.achievement-container {
    padding: 1rem;
    text-align: center;
    max-width: 60rem;
    max-width: 95%;
    border-radius: 0.3rem;
    background-color: #7B7554;
}

.achievement-container .achievement-heading {
    font-family: 'Josefin Sans';
    font-size: 1.5rem;
}

.achievement-container .achievement-label {
    font-family: 'Roboto';
    font-size: 1.3rem;
}

.achievement-container .achievement-images {
    align-self: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.5rem;
    column-gap: 0.5rem;
}

.achievement-contents .achievement-body {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.achievement-container img {
    max-height: 15rem;
}

.achievement-container .achievement-description {
    margin-top: 1rem;
    vertical-align: middle;
}

.achievement-description .info-icon {
    font-size: 1.3rem;
    color: #FF964F;
    margin-right: 0.5rem;
}

.access-granted {
    font-family: 'Tektur';
}

hr {
    opacity: 0.1;
    color: var(--quinary-colour);
}

span.definition-text {
    font-family: 'SourceCodePro';
}

span.definition-text .larger-icon {
    font-size: 2rem;
}

span.riddle-text {
    font-family: 'Tektur';
}

.clue-text {
    font-family: 'Roboto';
    font-size: 1.2rem;
}

span.word-text {
    font-family: 'Josefin Sans';
    font-size: 1.5rem;
}

.riddle-form input[type="text"] {
    outline: none;
    background-color: #273344;
    color: var(--quinary-colour);   
    height: 1.75rem;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1rem;
    font-size: 1.2rem;
    border-radius: 0.3rem;
}

.riddle-form button[type="submit"] {
    outline: none;
    border: none;
    border-radius: 0.3rem;
    height: 1.75rem;
    padding-bottom: 10px 5px 5px 5px;
    font-size: 1.2rem;
    font-family: 'Tektur';
    margin-top: 1rem;
    cursor: pointer;
}

.riddle-form {
    width: 100%;
}

.riddle-form .riddle-form-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.riddle-hint {
    background-color: #cc4949;
    margin: 1rem;
    margin-bottom: 0;
    border-radius: 0.3rem;
    text-align: center;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: 'Roboto';
}

.red {
    color: #FF6961;
}

.green {
    color: #77DD77;
}

.footer-container {
    width: 100%;
    height: 2rem;
    background-color: #273344;
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    align-items: center;
}

.footer-text {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
}

.email-container {
    background-color: #151921;
    color: var(--quinary-colour);
}

.email-container .salutation {
    font-family: 'Josefin Sans';
    font-size: larger;
}

.email-container .email-message {
    font-family: 'SourceCodePro';
    font-size: small;
}

.email-container .footnote {
    font-family: 'Dancing Script';
    font-size: large;
}

@media only screen and (max-width: 700px) {
    .section-contents > div {
        max-width: 90% !important;
    }

    .achievement-container img.half-width {
        max-width: 50% !important;
    }

    .achievement-container img.single-width {
        max-width: 100% !important;
    }

    .welcome-initial, .welcome-heading {
        font-size: 4rem !important;
        white-space: nowrap !important;
    }
    
    .welcome-heading {
    	max-width: 90% !important;
    }
    
    .welcome-heading .second-line {
    	padding-left: 2rem;
    }

    .message-initial > * {
        max-width: 90% !important;
        margin: auto;
    }

    .thumbnail > img {
        max-width: 90% !important;
        margin: auto;
    }

}