$color-primary: #fd9700;
$color-primary-text: #ffffff;
$color-secondary: #114388;
$color-secondary-text: #ffffff;
$color-background: #ffffff;
$color-text: #091202;


* {
    font-family: OpenSans;
}

@font-face {
    font-family: OpenSans;
    src: url("/fonts/OpenSans-Medium.ttf");
}

html,
body {
  padding: 0;
  margin: 0;
}


body {
    background-color: $color-background;

}

a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }

.container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.view-container {
    height: 95vh;
    width: 95%;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid $color-text;
}


.view-nav {
    padding-top: 20px;
    gap: 20px;
    width: 98%;
    display: flex;
    flex-direction: row;
    flex-basis: 50px;
    .button-primary {
        flex-basis: 15%;
    }
    .button-secondary {
        flex-basis: 15%;
    }
    .spacer {
        flex-basis: 30%
    }
}

.file {
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon {
        width: 64px;
        height: 64px;
    }
    .filename {
        p {
            font-size: 50px;
            margin: 0;
            flex-wrap: 80%;
        }
    }
}

.file-view {        
    flex-basis: 90%;
    width: 98%;
    border: 1px dotted $color-text;
    .file-container {
        display: flex;
        flex-wrap: wrap;
        .file {
            height: 40px;
            flex: 0 0 200px;
            row-gap: 2px;
            .icon {
                width: 45px;
                height: 40px;
            }
            .filename {
                p {
                    font-size: 20px;
                    margin: 0;
                    flex-wrap: 80%;
                }
            }
        }
        .file:hover {
            transform: scale(1.05);
            transition: all 0.3s;
        }
    }
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #e42200;
    border: none;
    color: #FFFFFF;
    font-family: OpenSans;
    font-size: 20px;
    padding: 4px;
    width: 200px;
    transition: all 0.3s;
    cursor: pointer;
    p {
        margin: 0;
    }
}

.button:hover {
    transform: scale(1.05);
}

.primary {
    background-color: $color-primary;
}

.secondary {
    background-color: $color-secondary;
    color: $color-secondary-text;
}

.link-box {
    display: flex;
    height: 40px;
    flex-direction: row;
    flex-basis: 40%;
    align-items: center;
    justify-content: center;
    .button-copy {
        display: flex;
        background-color: $color-secondary;
        color: $color-secondary-text;
        height: 100%;
        border: 3px solid $color-text;
        border-left: none;
        align-items: center;
        justify-content: center;
    }
    .text-link {
        height: 100%;
        width: 100%;
        border: 3px solid $color-text;
        input[type=text] {
            width: 100%;
            height: 100%;
            font-size: 20px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: none;
            background-color: $color-secondary;
            color: $color-secondary-text;
        }   
    }
}

.hidden {
    display: none;
}

.copy {
    height: 30px;
}

.checkmark {
    height: 30px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation-iteration-count: 1;
    stroke-dashoffset: 0;
    animation: checkmark 0.3s linear;
}

@keyframes checkmark {
    
    from { 
        stroke-dashoffset: -500;
    }
    to {
        stroke-dashoffset: 0;
    }
}