/* ---------------------------------------------------------- */
/* All Body */

body{
    margin: 0; /* header can spread the full page length, without a gap */
    background-color: #F5EFE9;
    
    background-image: repeating-linear-gradient( /* vertical lines */
    to right,
    #EAE3DC 0px,
    #EAE3DC 80px,
    transparent 28px,
    transparent 118px
    );
    cursor: url(resources/auto.svg), auto; /* custom cursor */
}

a:hover{
    cursor: url(resources/pointer.svg), auto; /* custom hover cursor */
}

/* ---------------------------------------------------------- */
/* Header */

/* header background and sizing */
.header{
    height: 5rem;
    padding: 0% 5%;
    background: #3E3E3E;
    display: flex;
    align-items: center;
}

/* header title link - removing text decoration */
.logo-link {
    text-decoration: none;
}

.logo-link:hover {
    text-decoration: none;
}

/* "magnet archive" title formatting */
h1{
    vertical-align: middle;
    color: #F5EFE9;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

/* navigation section of header */
nav{
    width: 100%;
    /* padding: 3px 0px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* list */
nav ul li{
    display: inline-block;
    list-style: none;
    margin: 10px 30px;
}

/* list text format */
nav ul li a{
    text-decoration: none;
    color: #F5EFE9;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
}

/* dropdown */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background:#3E3E3E;
    padding: 10px 0;
    margin: 0;
    min-width: 40px;
}

.dropdown-menu li {
    display: block;
    margin: 5px 15px;
}

@media (hover:hover) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-toggle {
    all: unset;

    background: none;
    border: none;
    color: #f5efe9;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    cursor: url(resources/pointer.svg), auto;
}

/* header responds to screen width, text size reduces */
@media (max-width: 1000px){
    .header{
        height: 7rem;
        padding: 0% 5%;
        background: #3E3E3E;
        display: flex;
        align-items: center;
    }   
    h1{
        font-size: 0rem;
    }
    nav ul li a{
        font-size: 0.60rem;
    }
    .dropdown-toggle {
        font-size: 0.60rem;
    }
}

/* ---------------------------------------------------------- */
/* Year/Title Section */
    /* each page begins with the same header and subhead style */

.year-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* defines background colour, sizing, font */
.year{
    background-color: #3E3E3E;
    padding: 1.2rem;
    height: 8rem;
    width: 20rem;
    border: 0rem;
    margin: 0.5rem;

    text-align: center;
    color: #F5EFE9;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 7rem;
    letter-spacing: -0.2rem;
}

/* wide titles*/
.year2{
    background-color: #3E3E3E;
    padding: 1.2rem;
    height: 8rem;
    width: 50rem;
    border: 0rem;
    margin: 0.5rem;

    text-align: center;
    color: #F5EFE9;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 7rem;
}

/* box around countries */
.countries-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* countries text */
.countries{
    /* background-color: aquamarine; */
    padding: 0rem;
    height: 6rem;
    width: 20rem;
    border: 0rem;
    margin: 0.5rem;

    color: #3E3E3E;
    font-family: 'Roboto Condensed';
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
}

/* subtitle - using countries format */
.countries2{
    /* background-color: aquamarine; */
    padding: 0rem;
    height: 6rem;
    width: 50rem;
    border: 0rem;
    margin: 0.5rem;

    color: #3E3E3E;
    font-family: 'Roboto Condensed';
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
}

/* ---------------------------------------------------------- */
/* Destination */

/* line formatting - above and below destination */
hr{
    border:none;
    height: 1.5px;
    background-color: #3E3E3E;
}

/* destination header - split into two sections (40/60% of screen) */
.destination-container{
    display: grid;
    grid-gap: 10px;
    grid-template: 
    "destination place"
    /40% 60%;
}

/* "DESTINATION" title format */
.destination {
    grid-area: destination;

    text-align: center;
    padding: 0rem;
    border: 0rem;
    margin: 1rem;

    color: #3E3E3E;
    font-family: 'Roboto Condensed';
    font-weight: 400;
    font-size: 1.5rem;
    text-transform: uppercase;
}

/* general place format */
.place{
    grid-area: place;

    padding: 0rem;
    border: 0rem;
    margin: 0.5rem;
    width: 95%;

    color: #F5EFE9;
    font-family: 'Roboto Condensed';
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-indent: 1rem;
}

/* width changes based on screen size */
@media (max-width: 1000px){
    .destination{
        font-size: 1.5rem;
    }
    .place{
        width: 90%;
        font-size: 1.5rem;
    }
    .year2{
        width: 80%;
        height: 4.5rem;
        font-size: 4rem;
    }
}
@media (max-width: 600px){
    .destination{
        font-size: 1rem;
    }
    .place{
        font-size: 1rem;
    }
    .year2{
        height: 3.75rem;
        font-size: 3.25rem;
    }
    .countries{  
        font-size: 1.25rem;
    }
}
@media (max-width: 400px) {
    .destination{
        font-size: 0.8rem;
    }
    .place{
        font-size: 0.8rem;
    }
    .year2{
        height: 3rem;
        font-size: 2.5rem;
    }
}

@media (max-width: 315px) {
    .destination{
        font-size: 0.8rem;
    }
    .place{
        font-size: 0.8rem;
    }
    .year2{
        height: 2.5rem;
        font-size: 2.25rem;
    }
}



/* background formatting for each country - assigned colours, situated within the .place */
    /* place - original format, for destination section */
    /* place2 - catalogue format */

    .america-place{
    background-color: #4C6473;
    padding: 0.5rem;
}

.america-place2{
    background-color: #4C6473;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.aruba-place{
    background-color: #973964;
    padding: 0.5rem;
}

.aruba-place2{
    background-color: #973964;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.australia-place{
    background-color: #005F67;
    padding: 0.5rem;
}

.australia-place2{
    background-color: #005F67;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.canada-place{
    background-color: #892426;
    padding: 0.5rem;
}

.canada-place2{
    background-color: #892426;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.denmark-place{
    background-color: #E9BA3A;
    padding: 0.5rem;
}

.denmark-place2{
    background-color: #E9BA3A;
    color: #3E3E3E;
    font-weight: 400;
    padding: 0.5rem;
}

.dominican-place{
    background-color: #7EA4A7;
    padding: 0.5rem;  
}

.dominican-place2{
    background-color: #7EA4A7;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;  
}

.estonia-place{
    background-color: #8687A3;
    padding: 0.5rem;    
}

.estonia-place2{
    background-color: #8687A3;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;    
}

.finland-place{
    background-color: #5D6360;
    padding: 0.5rem;    
}

.finland-place2{
    background-color: #5D6360;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;    
}

.france-place{
    background-color: #231E42;
    padding: 0.5rem;
}

.france-place2{
    background-color: #231E42;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.germany-place{
    background-color: #412B17;
    padding: 0.5rem;    
}

.germany-place2{
    background-color: #412B17;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;    
}

.iceland-place{
    background-color: #C98B88;
    padding: 0.5rem;   
}

.iceland-place2{
    background-color: #C98B88;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;   
}

.ireland-place{
    background-color: #D55D00;
    padding: 0.5rem;
}

.ireland-place2{
    background-color: #D55D00;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.italy-place{
    background-color: #ACC221;
    padding: 0.5rem; 
}

.italy-place2{
    background-color: #ACC221;
    color: #3E3E3E;
    font-weight: 400;
    padding: 0.5rem; 
}

.japan-place{
    background-color: #AE6C8D;
    padding: 0.5rem;
}

.japan-place2{
    background-color: #AE6C8D;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.monaco-place{
    background-color: #443C77;
    padding: 0.5rem; 
}

.monaco-place2{
    background-color: #443C77;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem; 
}

.northern-ireland-place{
    background-color: #B15E43;
    padding: 0.5rem;
}

.northern-ireland-place2{
    background-color: #B15E43;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.serbia-place{
    background-color: #90785E;
    padding: 0.5rem;
}

.serbia-place2{
    background-color: #90785E;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.spain-place{
    background-color: #525120;
    padding: 0.5rem;    
}

.spain-place2{
    background-color: #525120;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;    
}

.sweden-place{
    background-color: #686A8F;
    padding: 0.5rem;    
}

.sweden-place2{
    background-color: #686A8F;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;    
}

.uk-place{
    background-color: #973439;
    padding: 0.5rem;
}

.uk-place2{
    background-color: #973439;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

.unknown-place{
    background-color: #3E3E3E;
    padding: 0.5rem;
}

.unknown-place2{
    background-color: #3E3E3E;
    color: #F5EFE9;
    font-weight: 300;
    padding: 0.5rem;
}

/* ---------------------------------------------------------- */
/* Magnets */

/* section with image, icon, title and description */
.magnet-container{
    max-width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 40% 50%; /* leaves 10% gap on right side, better text formatting */
    padding: 1rem;
}

/* image is centered within column 1, minimal drop shadow */
.image {
    grid-column: 1;
    margin: 0.5rem;
    filter: drop-shadow(0 0 0.75rem #92887d); 
    text-align: center; 
}

/* wide format images (e.g. colour graphic on About page */
.image2 {
    grid-column: 1;
    margin: 0.5rem;
    margin-left: 4.5rem;
    text-align: center;
}

/* image on 404 page */
.error-image {
    text-align: center; 
}

/* holds icon, magnet title and body text */
.info{
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.info .title-row{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info .title-row .magnet-title {
    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 700;
    font-size: 1.75rem;
    text-indent: 1rem;
    line-height: 4rem;
}

.info .title-row .icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4rem;
    margin: 0.5rem;
    filter: drop-shadow(0 0 2rem #dfd5ca);
}

/* icons on home page */
.icon2{
    grid-column: 1;
    margin: 0.5rem;
    text-align: center;
}

.info main {
    padding: 1rem;
    border: 0rem;
    margin-top: 0.5rem;

    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.10rem;
}

.info main ul li{
    font-size: 1.10rem;
}

/* ---------------------------------------------------------- */
/* About Page */

/* sections for about page, following destination format */
.about-destination {
    text-align: center;
    padding: 0rem;
    border: 0rem;
    margin: 2rem;

    color: #3E3E3E;
    font-family: 'Roboto Condensed';
    font-weight: 400;
    font-size: 1.75rem;
    text-transform: uppercase;
}

.about-info{
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.about-info .about-title-row{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 15rem;
}

.about-info .about-title-row .icon{
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4rem;
    margin: 0.5rem;
    filter: drop-shadow(0 0 2rem #dfd5ca);
}

.about-info .about-title-row .about-title{
    padding: 1rem;
    border: 0rem;
    margin-top: 0.5rem;

    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 700;
    font-size: 1.10rem;
}

.about-info main{
    padding: 1rem;
    border: 0rem;
    margin-top: 0.5rem;
    margin-left: 15rem;

    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.10rem;

}
/* ---------------------------------------------------------- */

h2{
    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 700;
    font-size: 1.75rem;
    text-indent: 1rem;
    line-height: 4rem;
    margin-left: 7rem;
}

main{
    padding: 1rem;
    border: 0rem;
    margin-top: 0.5rem;
    margin-left: 7rem;

    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.10rem;
}

/* text format, border around instructions */
.map-instructions{
    background-color: #F5EFE9;
    border: 1px solid #3E3E3E;
    padding: 1rem;
    margin-top: 0.5rem;
    margin-left: 10rem;
    width: 35rem;

    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.10rem;
}

.error-main{
    text-align: center;
    color: #3E3E3E;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.10rem;
}

/* ---------------------------------------------------------- */
/* layout changes based on screen width, images move above info section */
@media (max-width: 1000px) {
    .magnet-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }
    .title-row{
        align-items: center;
        justify-content: center;
    }
    .info main {
        font-size: 0.9rem;
        margin-right: 1rem;
    }
    .info main ul li{
        font-size: 0.9rem;
    }
    .image{
        transform: scale(80%);
    }
    .image2{
        transform: scale(80%);
        margin-left: 1rem;
    }
    .error-image {
        margin-left: -7rem;
        transform: scale(50%);
    }
    .info .title-row .icon{
        scale: 80%;
    }
    .about-info .about-title-row {
        margin-left: 2rem;
    }
    .about-info .about-title-row .icon{
        height: 0.5rem;
    }
    .about-info main{
        margin-top: 0.5rem;
        margin-left: 4rem;
        margin-right: 2rem;
        font-size: 0.9rem
    }
    main {
        margin-left: 4rem;
        font-size: 0.9rem
    }
    .map-instructions{
        padding: 0.75rem;
        margin-left: 4rem;
        margin-bottom: 2rem;
        width: 28rem;

        font-size: 0.9rem;
    }
}
@media (max-width: 600px) {
    .magnet-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }
    .title-row{
        align-items: center;
        justify-content: center;
    }
    .info main {
        font-size: 0.8rem;
        margin-right: 1rem;
    }
    .info .title-row .magnet-title {
        font-size: 1.5rem;
    }
    .image{
        transform: scale(70%);
        margin-left: -2rem;
    }
    .image2{
        transform: scale(80%);
        margin-left: 0.25rem;
    }
    .info .title-row .icon{
        scale: 80%;
    }
    .about-info .about-title-row {
        margin-left: 2rem;
        
    }
    .about-info main{
        margin-top: 0.5rem;
        margin-left: 4rem;
        margin-right: 2rem;
        font-size: 0.8rem
    }
    main {
        margin-left: 4rem;
        font-size: 1rem
    }
    .map-instructions{
        padding: 0.75rem;
        margin-left: 2rem;
        margin-bottom: 1rem;
        width: 22rem;

        font-size: 0.75rem;
    }
}
@media (min-width: 0px) and (max-width: 400px) {
    .info main {
        font-size: 1rem;
        margin-right: 1rem;
    }
    .info .title-row .magnet-title {
        font-size: 1.25rem;
    }
    .image{
        transform: scale(60%);
        margin-left: -2rem;
    }
    .image2{
        transform: scale(70%);
        margin-left: 0.25rem;
    }
    .info .title-row .icon{
        scale: 80%;
    }

    .about-info .about-title-row {
        margin-left: 2rem;
    }

    .about-info .about-title-row .icon{
        transform: scale(30%);
        margin-left: 2rem;
    }
    .about-info main{
        margin-top: 0.5rem;
        margin-left: 0rem;
        margin-right: 2rem;
        font-size: 0.8rem
    }
    main {
        margin-left: 1rem;
        font-size:0.8rem
    }
    .map-instructions{
        padding: 0.75rem;
        margin-left: 2rem;
        margin-bottom: 1rem;
        width: 15rem;

        font-size: 0.5rem;
    }
    .info main ul li{
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------- */
/* Footer */

.footer{
    height: 10rem;
    background: #3E3E3E;
    text-align: center;
    vertical-align: middle;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #F5EFE9;
}

.footer .clickable2 a{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #F5EFE9;
}

/* ---------------------------------------------------------- */
/* Map */

.mapdiv{
    /* background-color: #F5EFE9; */
    display: flex;
    text-align: center;
    padding: 5rem;
}

.mapdiv-havenot{
    position: absolute;
}

.mapdiv-have{
    position: absolute;
    z-index: 2;
    transition: fill 0.01s;
}

.mapdiv-pins{
    position: absolute;
    z-index: 3;
}

.mapdiv-pins :hover {
fill: #ffffff;
stroke: #000;

}

.pins :hover {
    fill:#fff;
    stroke: #412B17;
    stroke-width: 2;
}

@media (max-width: 1000px){
    .mapdiv{
        padding: 1rem;
    }
}

/* ---------------------------------------------------------- */
/* Magnet Catalogue */

/* holds the magnet catalogue */
.table-container { 
    width: 100%;
    overflow-x: auto;
}
/* defines table */
table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 2rem 0;
    font-family: 'Roboto Condensed', sans-serif;
}
/* table header */
thead th {
    position: sticky;
    top: 0;
    background: #F5EFE9;
    color: #3E3E3E;
    font-weight: 400;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: url(resources/pointer.svg), auto; /* custom hover cursor */
    user-select: none;
    border-bottom: 1.5px solid #3E3E3E;
    border-top: 1.5px solid #3E3E3E;
}

/* header changes colour on hover */
th:hover {
  background: #3E3E3E;
  color: #F5EFE9;
}

/* table body text */
tbody td{
    color: #3E3E3E;
    background: #F5EFE9;
    padding: 1rem;
    font-size: 0.95rem;
    border-bottom: 1px solid #3E3E3E;
    text-align: center;
    vertical-align: middle;
}

.clickable a {
    display: block;
    width: 100%;
    height: 100%;
    color: #3E3E3E;
    text-decoration: none;
}

.clickable2 a {
    font-family: 'Roboto', sans-serif;
    display: block;
    width: 100%;
    height: 100%;
    color: #3E3E3E;
    text-decoration: none;
    text-align: center;
}

/* header and body text scaling */
th, td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* link colour */
tbody td a {
    color: #4C6473;
}

/* magnet category icon */
.icon3 img{
    width: auto;
    height: 30px;
}

.preview img {
    width: 50px;
    height: auto;

}

/* table scaling for small screen sizes, font and icon sizes reduce to fit screen */
@media (max-width:600px){
    tbody td{
        padding: 0.5rem;
        font-size: 0.65rem;
    }
    thead th {
        padding: 0.75rem;
        font-size: 0.7rem;

    }
    .icon3 img{
        height: 15px;
    }
    .preview img{
        width: 25px;
    }
}

/* -------------------------------------------------------------------------- */
/* PROCESS */
/* OLD CODE */

/* header box and background format*/
/* .header{
    min-height: 5rem;
    padding: 0% 5%;
    background: #3E3E3E;
    display: flex;
    align-items: center;
} */

/* "magnet archive" title formatting */
/* h1{
    vertical-align: middle;
    color: #F5EFE9;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
} */

/* navigation section of header */
/* nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
} */
/* nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
} */

/* list */
/* nav ul li{
    list-style: none;
    margin: 10px 30px;
} */

/* list text format */
/* nav ul li a{
    text-decoration: none;
    color: #F5EFE9;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
} */

/* .dropdown {
    position: relative;
} */

/* .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: none;
    background:#3E3E3E;
    padding: 5px 0;
    min-width: 80px;
    z-index: 1000;
} */

/* .dropdown-menu li {
    display: block;
    margin: 5px 15px;
} */

/* .dropdown:hover .dropdown-menu,
.dropdown:active .dropdown-menu {
    display: block;
} */

/* header responds to screen width, text size reduces */
/* @media (max-width: 1000px){
    .header{
        height: 7rem;
        padding: 0% 5%;
        background: #3E3E3E;
        display: flex;
        align-items: center;
    }   
    h1{
        font-size: 1rem;
    }
    nav ul li{
        margin: 5px 15px;
    }
    nav ul li a{
        font-size: 0.75rem;
    }
} */

/* @media (max-width: 600px){
    nav {
        flex-direction: column;
        align-items: center;
    }
    nav ul{
        width: 100%;
        justify-content: flex-start;
    }
} */

/* IMAGE -  I wanted image scale to change based on screen size, 
later decided to have content stack instead of changing only image scale */

/* .image {
    margin: 0.5rem;
    filter: drop-shadow(0 0 0.75rem #92887d);
    text-align: center;
} */

/* .image img{
    width: auto;
}

@media(max-width:600px){
    .image img{
        width: 70%;
        height: auto;
    }
} */


/* OLD GRID-TEMPLATE LAYOUT */
/* before I implemented info, title-row */

/* @media (max-width: 1000px){
    .magnet-container{
        grid-template: 
        "icon title"
        "image image"
        "main main"
        /40% 60%;
    }
    .image{
        text-align: center;
    }
    .icon{
        text-align: right;
    }
    .magnet-title{
        text-align: left;
    }
} */