crissymcevoy.css

:root
{
    --primary: #e7eccb;
    --secondary: #777b63;
    --tertiary: #4d4f44;
}


body 
{
    
    font-family: Pompiere;
    background-color: var(--secondary);
    color: var(--primary);
    background-image: url(Images/paper-bg.jpeg);
}

.menu
{
    position:absolute;
    text-align: center;
    background-color: var(--secondary);
    font-weight: bold;
    display: grid;
    place-items: center;
    overflow: visible;
    min-width: 100%;
    max-width: 100%;
    margin:0;
    z-index: 100;
}

.current
{
    text-decoration: underline;
}

.navbar-dark .navbar-nav .nav-link 
{
    color: var(--primary);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover 
{
    color: var(--tertiary);
}

.navbar-toggler:hover, .navbar-toggler.navbar-toggler:focus
{
    background-color: var(--tertiary);
}

.ArtSecImg
{
    width: 40vw;
    transition-duration: 0.4s;
}

a .ArtSecImg:hover
{
    width: 45vw;
}

/*anchor styling*/
a, a:link, a:visited, a:active
{
    color: var(--primary);
}

a:hover
{
    color:var(--tertiary);
    text-decoration: none;
}

.CContainer
{
    padding: 2%;
    margin-top: 5%;
    color: var(--tertiary);
    display: grid;
    place-items: center;
}

.textContainer
{
    border: 5px solid var(--secondary);
    border-radius: 10px;
    background-color: var(--secondary);
    color: var(--primary);
}

footer
{
    width:100%;
    color: var(--primary);
    background-color: var(--secondary);
    text-align: center;
    vertical-align: bottom;
    position: fixed;
	right: 0;
    bottom: 0;
	left: 0;
}

.FooterText
{
    text-align: center;
    color: var(--primary);
}

.Signature
{
    width: 10vw;
}


.image-gallery 
{
    /* Mobile first */
    display: flex;
    flex-direction: column;
    gap: 10px;  
}
  
.image-gallery .column 
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
  
.image-item img, .image-item video 
{
    width: 100%;
    border-radius: 5px;
    height: 100%;
    object-fit: cover;
}

.tall {
    justify-self: center;
    align-self: center;
    width: fit-content;
}

.gal-title
{
    color: var(--tertiary);
}

/*Youtube aspect ratio is 16:9. I hope this maths is correct :( */
.scannan
{
    width: 90vw;
    height: 50vh;
    border: 5px solid var(--tertiary);
    border-radius: 5px;
}

.DropButton
{
    color: var(--primary);
    background-color: var(--secondary);
}

.DropButton:hover, .DropButton:focus, .DropButton:active
{
    color: var(--primary);
    background-color: var(--tertiary);
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active,.show > .btn-secondary.dropdown-toggle, .btn-secondary:focus 
{
    color: var(--primary);
    background-color: var(--tertiary);
}

.dropdown-menu
{
	background-color: var(--secondary);
    color: var(--primary);
	border: 1px solid rgba(0,0,0,0);
	overflow-y: visible;
}

.dropdown-item
{
    color: var(--primary);
}

.dropdown-item:hover 
{
	color: var(--primary);
	background-color: var(--tertiary);
}

.ContactImg
{
    width: 80vw;
    bottom:0;
    margin: 0;
    padding: 0;
    position: fixed;
}

.gborder
{
    border: 5px solid var(--tertiary);
    border-radius: 5px;
}

/*MEDIA QUERIES!!!!*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{
    .CContainer
    {
        margin-top: 15%;
    }
    
    .ArtSecImg
    {
        width: 90vw;
    }

    a .ArtSecImg:hover
    {
        width: 95vw;
    }

    .Signature
    {
        width: 10vh;
    }
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)
{
    .CContainer
    {
        margin-top: 15%;
    }

    .ArtSecImg
    {
        width: 90vw;
    }

    a .ArtSecImg:hover
    {
        width: 95vw;
    }

    .Signature
    {
        width: 10vh;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) 
{
    .CContainer
    {
        margin-top: 10%;
    }

    .ArtSecImg
    {
        width: 80vw;
    }

    a .ArtSecImg:hover
    {
        width: 85vw;
    }

    .Signature
    {
        width: 10vh;
    }

    .image-gallery 
    {
        flex-direction: row;
    }

    .scannan
    {
        width: 60vw;
    }

}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) 
{
    .CContainer
    {
        margin-top: 5%;
    }

    .ArtSecImg
    {
        width: 40vw;
    }

    a .ArtSecImg:hover
    {
        width: 45vw;
    }

    .scannan
    {
        width: 40vw;
    }

    .Signature
    {
        width: 10vh;
    }

}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{
    .CContainer
    {
        margin-top: 5%;
    }

    .scannan
    {
        width: 40vw;
    }

    .Signature
    {
        width: 10vh;
    }
}