html
{
    height: 100%;
}

body
{
    height: 100%;
    margin: 0;
    background-color: #292929;
    padding: 0px;
}

h1
{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12vw;
    color: #fe6206;
    padding-bottom: 5px;
}

h2
{
    margin-bottom: 0%;
    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: #fe6206;

}

h3
{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: #1549c3;
}

h4
{
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #1549c3;
}

h5
{
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #1549c3;
}

p
{
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #1549c3;
}

a
{
    text-decoration: none;
    color: #1549c3;
}

.card
{
    border-color: #e0dfec;
    border-width: 3px;
    background-color: #eeeeee;
    border-radius: 5px;
    backdrop-filter: blur(0px);
    transition: background-color 0.25s;
    transition: border-color 0.25s;
}

.card:hover
{
    border-color: #fe6206;
}

.card-title
{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: #1549c3;

}

#CALLUM
{
    fill: rgb(173, 171, 171);
    width: 200px;
    height: auto;
    max-width: 225px;
}

#CALLUM:hover
{
    fill: rgb(254, 98, 6);
}

.card-img
{
    padding: 2px;
    border-radius: 5px;
    max-width: 100%;
    max-height: 800px;
    object-fit: contain;
    height: auto;
    width: 100%;
}

.navblue
{
    border-color: #dcdcdc;
}

.container
{
    background-color: transparent;
}

img
{
    -webkit-user-drag: none;
    /* For Safari */
    backface-visibility: hidden;
    aspect-ratio: auto 360 / 360;
}

.hero
{
    height: 100%;
}

.offcanvas-size-xl
{
    --bs-offcanvas-width: min(95vw, 600px) !important;
}

.offcanvas-size-xxl
{
    --bs-offcanvas-width: min(95vw, 90vw) !important;
}

.offcanvas-size-md
{
    /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}

.offcanvas-size-sm
{
    --bs-offcanvas-width: min(95vw, 250px) !important;
}

.btn-close
{
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(255, 255, 255)'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
}

.btn-close:hover
{
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(254, 98, 6)'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
}

#linkicon
{
    fill: #5a82de;
}

#linkicon:hover
{
    fill: rgb(189, 69, 0);
}

.card:hover #linkicon
{
    fill: rgb(254, 98, 6);
}

.offcanvas
{
    background-color: #292929;
    padding: 0px;
    border: none;
}

/* Set the border color */
.navbar-toggler
{
    border-color: rgb(173, 171, 171);
    border-width: 1px;
    outline: rgb(173, 171, 171);
}

/* Setting the stroke to green using rgb values (0, 128, 0) */
.navbar-toggler-icon
{

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(173, 171, 171)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus
{
    outline: none;
    box-shadow: none;
}

.navbar-toggler:hover
{
    border-color: rgb(254, 98, 6);
}

.navbar-toggler:hover .navbar-toggler-icon
{
    border-color: rgb(254, 98, 6);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath stroke='rgb(173, 171, 171)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler-icon:hover
{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath stroke='rgb(254, 98, 6)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.middle
{
    transition: 0.5s ease;
    opacity: 0;
    position: absolute;
    top: 5%;
    left: 90%;
    text-align: center;
}

.row
{
    padding: 10px;
}

.videohero
{
    max-width: 100vw;
    max-height: 60vh;
    height: 800px;
    width: 800px;
    margin-top: -20px;
}

.navbar-brand
{
    max-width: 200px;
}

.bg-body-tertiary
{

    background-color: #1f2126;
}

.buttonrow
{
    margin-bottom: 4%;
    padding-bottom: 4%;
}

.mainbutton
{
    color: rgb(240, 240, 240);
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 40px;
    opacity: 1;
    transition: opacity 0.5s;
    text-decoration: none;
    width: auto;
    background-color: transparent;
    border: none;
}

b
{
    font-family: "Inter", sans-serif;
}

/* unvisited link */
.mainbutton:link
{
    color: #1549c3;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.75s;
}

/* visited link */
.mainbutton:visited
{
    color: #1549c3;
    text-decoration: none;
}

/* mouse over link */
.mainbutton:hover
{
    color: rgb(254, 98, 6);
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.75s;
    font-weight: 500;
}

/* selected link */
.mainbutton:active
{
    color: rgba(254, 97, 6, 0.749);
    text-decoration: none;
}

video
{
    aspect-ratio: auto 360 / 360;
}


.secondarybutton
{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #1549c3;
    opacity: 1;
    transition: opacity 0.5s;
    text-decoration: none;
    width: auto;
    background-color: transparent;
    border: none;
}


/* unvisited link */
.secondarybutton:link
{
    color: #1549c3;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.75s;
}

/* visited link */
.secondarybutton:visited
{
    color: #1549c3;
    text-decoration: none;
}

/* mouse over link */
.secondarybutton:hover
{
    color: #fe6206;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.75s;
}

/* selected link */
.secondarybutton:active
{
    color: rgba(254, 97, 6, 0.749);
    text-decoration: none;
}

div#comparison
{
    width: 100%;
    height: 60vw;
    overflow: hidden;
}


div#comparison figure
{
    background-image: url(https://callumflett.com/images/website_cover.webp);
    background-size: cover;
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

div#comparison figure>img
{
    position: relative;
    width: 100%;
}

div#comparison figure div
{
    background-image: url(https://callumflett.com/images/oldwebsite.webp);
    background-size: cover;
    position: relative;
    width: 25%;
    box-shadow: 0 7px 10px -2px rgba(67, 67, 67, 0.71);
    overflow: hidden;
    bottom: 0;
    height: 100%;
}


input[type=range]
{
    -webkit-appearance: none;
    /* Hides the default browser slider */
    position: relative;
    top: -2rem;
    left: 0%;
    background-color: #1549c3;
    width: 100%;
}

input[type=range]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    /* Hides the default thumb */
    border: 1px solid #000;
    height: 26px;
    width: 26px;
    border-radius: 3px;
    background: rgb(254, 98, 6);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 1px 1px #000, 0px 0px 1px #0d0d0d;


}

input[type=range]::-webkit-slider-thumb
{
    animation: pulse 1s infinite;
}

@keyframes pulse
{
    0%
    {
        transform: scale(1);
        background: rgb(254, 98, 6);
    }

    50%
    {
        transform: scale(1.1);
        background: rgb(255, 255, 255);
    }

    100%
    {
        transform: scale(1);
        background: rgb(254, 98, 6);
    }

}